概述
本 Demo 展示了如何为形状和连接符设置自定义边框样式。Demo 中创建了两个基础形状（椭圆和矩形）和两个连接符形状（直线和折线），并提供交互式界面，允许用户选择形状后修改其边框的颜色、透明度、宽度、线型、端点样式和连接样式。
实现思路
初始化工作表，创建两个基础形状（椭圆、矩形）和两个连接符形状（直线、折线）
监听 ShapeSelectionChanged 事件，检测用户选中的形状类型
根据选中状态显示或隐藏边框属性设置面板
为每个边框属性（颜色、透明度、宽度、线型、端点样式、连接样式）提供输入控件和设置按钮
用户点击设置按钮时，获取当前选中的所有形状，修改其边框样式并刷新工作表
代码解析
创建形状和连接符
这段代码演示了如何使用 shapes.add() 方法创建基础形状，以及使用 shapes.addConnector() 方法创建连接符形状。shapes.add() 方法的参数依次为形状名称、形状类型、左边距、上边距、宽度和高度。AutoShapeType.oval 和 AutoShapeType.rectangle 分别表示椭圆和矩形类型，ConnectorType.straight 和 ConnectorType.elbow 分别表示直线和折线连接符。
监听形状选择事件
这段代码监听 ShapeSelectionChanged 事件，当用户选择形状时触发。通过 shapes.all() 获取所有形状，再使用 isSelected() 方法筛选出当前选中的形状，并使用 instanceof 判断形状类型（基础形状或连接符形状）。
修改形状边框样式
这是核心的样式修改函数。首先获取所有选中的形状，然后遍历每个形状，通过 shape.style() 获取当前样式对象，修改 line 属性的指定字段（如 color、width 等），最后调用 shape.style(shapeStyle) 应用新样式，并调用 sheet.repaint() 刷新显示。
边框样式属性说明
line.color：边框颜色，使用十六进制颜色值或颜色名称
line.transparency：边框透明度，取值范围为 0（不透明）到 1（完全透明）
line.width：边框宽度，单位为像素
line.lineStyle：边框线型，使用 PresetLineDashStyle 枚举值，如 solid（实线）、dash（虚线）、dot（点线）等
line.capType：线条端点样式，使用 LineCapStyle 枚举值，如 flat（平端）、square（方端）、round（圆端）
line.joinType：线条连接样式，使用 LineJoinStyle 枚举值，如 round（圆角连接）、miter（尖角连接）、bevel（斜角连接）
运行效果
工作表初始显示两个白色填充的形状（椭圆和矩形）和两个连接符形状（直线和折线）
点击选择任意形状后，右侧面板会显示边框属性设置选项
修改颜色、透明度、宽度等属性后点击对应的"设置"按钮，可以看到选中形状的边框样式实时更新
可以同时选择多个形状，批量修改它们的边框样式
边框样式支持实时预览，所有修改立即生效
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
initSpread(spread);
initEvent(spread);
};
var lineCapStyle = {
flat: 2,
square: 1,
round: 0
};
var lineJoinStyle = {
round: 0,
miter: 1,
bevel: 2
};
var lineDashStyle = {
solid: 0,
squareDot: 1,
dash: 2,
longDash: 3,
dashDot: 4,
longDashDot: 5,
longDashDotDot: 6,
sysDash: 7,
sysDot: 8,
sysDashDot: 9,
dashDotDot: 10
};
var activeShape;
function fillShapeTypeList(type, dom) {
var names = [];
for (var name in type) {
if(name === "none" || (parseInt(name, 10)) == name) {
continue;
}
names.push({name: name, value: type[name]});
}
names.sort(function (a, b) {
return a.name > b.name ? 1 : -1
});
var html = "";
names.forEach(function (item) {
html += '<option value="' + item.value + '">' + item.name + '</option>';
});
dom.innerHTML= html;
}
function getActiveConnectorShape(sheet) {
return sheet.shapes.all().filter(function(sp){
return sp.isSelected() && sp instanceof GC.Spread.Sheets.Shapes.ConnectorShape;
});
}
function initSpread(spread) {
setBorderPropVisibility("none");
fillShapeTypeList(lineDashStyle, _getElementById("borderLineStyle"));
fillShapeTypeList(lineCapStyle, _getElementById("borderCapLineStyle"));
fillShapeTypeList(lineJoinStyle, _getElementById("borderJoinLineStyle"));
let oval = spread.getActiveSheet().shapes.add("oval", GC.Spread.Sheets.Shapes.AutoShapeType.oval, 40, 20, 150, 150);
let ovalStyle = oval.style();
ovalStyle.fill.color = "#FFFFFF";
oval.style(ovalStyle);
var rectangle = spread.getActiveSheet().shapes.add("rectangle", GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 40, 230, 150, 150);
let rectangleStyle = rectangle.style();
rectangleStyle.fill.color = "#FFFFFF";
rectangle.style(rectangleStyle);
spread.getActiveSheet().shapes.addConnector("line", GC.Spread.Sheets.Shapes.ConnectorType.straight, 250, 20, 400, 150);
spread.getActiveSheet().shapes.addConnector("line", GC.Spread.Sheets.Shapes.ConnectorType.elbow, 250, 250, 400, 350);
}
function setBorderPropVisibility(display) {
var borderProp = _getElementById("borderProp");
borderProp.style.display = display;
}
function initEvent(spread) {
var spreadNS = GC.Spread.Sheets;
var sheet = spread.getActiveSheet();
sheet.bind(spreadNS.Events.ShapeSelectionChanged, function () {
var selectedShape = sheet.shapes.all().filter(function(sp){
return sp.isSelected();
});
var isShapeSelected = false, isConnectorSelected = false;
if (selectedShape.length > 0) {
selectedShape.forEach(function (shape) {
if (!isShapeSelected && shape instanceof spreadNS.Shapes.Shape) {
isShapeSelected = true;
} else if (!isConnectorSelected && shape instanceof spreadNS.Shapes.ConnectorShape) {
isConnectorSelected = true;
}
});
setBorderPropVisibility("block");
} else {
setBorderPropVisibility("none");
}
});
_getElementById("borderColorActionBtn").addEventListener('click', function() {
_handleShapeBorderAction(spread, 'color', _getElementById("borderColorStyle"));
});
_getElementById("borderTransparencyActionBtn").addEventListener('click', function() {
_handleShapeBorderAction(spread, 'transparency', _getElementById("borderTransparencyStyle"));
});
_getElementById("borderWidthActionBtn").addEventListener('click', function() {
_handleShapeBorderAction(spread, 'width', _getElementById("borderWidthStyle"));
});
_getElementById("borderLineStyleActionBtn").addEventListener('click', function() {
_handleShapeBorderAction(spread, 'lineStyle', _getElementById("borderLineStyle"));
});
_getElementById("borderCapLineActionBtn").addEventListener('click', function() {
_handleShapeBorderAction(spread, 'capType', _getElementById("borderCapLineStyle"));
});
_getElementById("borderJoinLineActionBtn").addEventListener('click', function() {
_handleShapeBorderAction(spread, 'joinType', _getElementById("borderJoinLineStyle"));
});
}
function _handleShapeBorderAction(spread, action, valueDom) {
var sheet = spread.getActiveSheet();
activeShape = sheet.shapes.all().filter(function (sp) {
return sp.isSelected();
});
if (activeShape) {
activeShape.forEach(function (shape) {
var shapeStyle = shape.style();
shapeStyle.line[action] = valueDom.value;
shape.style(shapeStyle);
});
sheet.repaint();
}
}
function _getElementById(id){
return document.getElementById(id);
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<div class="option-row">
尝试选择一个形状并更改边框属性以查看效果： </div>
<div id="divideLine" class="divide-line"></div>
<div id="borderProp" class="option-row">
<label>边框颜色： </label>
<input id="borderColorStyle" data-attr="color" type="color" value="#00A2E8" />
<input type="button" id='borderColorActionBtn' value="设置" />
<label>边框透明度： </label>
<input id="borderTransparencyStyle" data-attr="transparency" type="text" value="0.5" />
<input type="button" id='borderTransparencyActionBtn' value="设置" />
<label>边框宽度： </label>
<input id="borderWidthStyle" data-attr="width" type="number" value="1" />
<input type="button" id='borderWidthActionBtn' value="设置" />
<label>边框线型： </label>
<select id="borderLineStyle" data-attr="lineStyle"></select>
<input type="button" id='borderLineStyleActionBtn' value="设置" />
<label>边框端点样式： </label>
<select id="borderCapLineStyle" data-attr="capType"></select>
<input type="button" id='borderCapLineActionBtn' value="设置" />
<label>边框连接样式： </label>
<select id="borderJoinLineStyle" data-attr="joinType"></select>
<input type="button" id='borderJoinLineActionBtn' value="设置" />
</div>
</div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding-left: 5px;
}
.divide-line {
width: 100%;
height: 1px;
background: #cbcbcb;
margin-top: 10px;
margin-bottom: 3px;
}
.title {
text-align: center;
font-weight: bold;
}
label {
display: block;
margin-top: 15px;
margin-bottom: 5px;
}
p {
padding: 2px 10px;
background-color: #F4F8EB;
}
input {
width: 160px;
margin-left: 10px;
display: inline;
}
input[type=button] {
width: 50px;
margin-left: 1px;
}
select {
width: 160px;
margin-left: 10px;
display: inline;
}
textarea {
width: 160px;
margin-left: 10px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
