概述
本 Demo 展示了如何将多个形状组合成一个整体，以及如何取消形状组合。Demo 中预先创建了 4 个形状，其中立方体和圆柱体已经组合，用户可以通过按钮选择其他形状进行组合或取消现有组合。
实现思路
创建 4 个不同样式的形状：矩形、椭圆、立方体和圆柱体
使用 sheet.shapes.group() 方法将立方体和圆柱体预先组合
监听工作表点击事件，检测当前选中的形状
判断选中形状是否为组合形状（GroupShape），动态启用/禁用相应按钮
实现"组合"按钮：将选中的多个形状组合为一个 GroupShape
实现"取消组合"按钮：将选中的 GroupShape 拆分为独立形状
代码解析
创建形状并设置样式
通过 sheet.shapes.add() 方法创建形状，第一个参数是形状名称，第二个参数是形状类型，后面四个参数分别是 x、y 坐标和宽高。通过 style() 方法获取样式对象，设置填充色和边框色。
组合多个形状
sheet.shapes.group() 方法接收一个形状数组，将它们组合为一个 GroupShape。组合后的形状可以作为一个整体进行移动、旋转、缩放等操作。
检测选中的形状
通过 sheet.shapes.all() 获取工作表中的所有形状，使用 shape.isSelected() 方法判断形状是否被选中。
判断是否为组合形状
使用 instanceof 操作符判断选中的形状是否为 GroupShape 类型。如果只有一个选中形状且是组合形状，则启用"取消组合"按钮，禁用"组合"按钮。
取消形状组合
sheet.shapes.ungroup() 方法接收一个 GroupShape，将其拆分为独立的形状。
运行效果
页面加载后显示 4 个形状：矩形、椭圆在上排，立方体和圆柱体在下排（已预先组合）
点击选择形状时，按钮会根据选中状态自动启用/禁用
选中多个独立形状后，点击"组合"按钮可将它们组合为一个整体
选中的组合形状后，点击"取消组合"按钮可将其拆分为独立形状
组合后的形状移动时会保持各部分的相对位置关系
API 参考
group 方法
shapes：Shape 数组，要组合的形状集合
返回值：GroupShape 对象
ungroup 方法
groupShape：要拆分的组合形状
isSelected 方法
value：可选，布尔值，设置选中状态
返回值：获取时返回布尔值，设置时返回形状对象本身
all 方法
返回值：工作表中所有形状的数组
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 1});
initSpread(spread);
};
function initSpread(spread) {
var sheet = spread.getSheet(0);
let rectangle = sheet.shapes.add("rectangle", GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 100, 60, 150, 150);
let rectangleStyle = rectangle.style();
rectangleStyle.fill.color = "#F4F8EB";
rectangleStyle.line.color = "#82bc00";
rectangle.style(rectangleStyle);
let oval = sheet.shapes.add("oval", GC.Spread.Sheets.Shapes.AutoShapeType.oval, 400, 60, 150, 150);
let ovalStyle = oval.style();
ovalStyle.fill.color = "#e3e3e3";
ovalStyle.line.color = "#e3e3e3";
oval.style(ovalStyle);
var cube = sheet.shapes.add("cube", GC.Spread.Sheets.Shapes.AutoShapeType.cube, 100, 240, 150, 150);
var can = sheet.shapes.add("can", GC.Spread.Sheets.Shapes.AutoShapeType.can, 400, 240, 150, 150);
var shapes = [cube, can];
var groupShape = sheet.shapes.group(shapes);
var host = spread.getHost();
host.addEventListener("click", function (e) {
var shapes = sheet.shapes.all(), activeShapes = [];
for (var i = 0; i < shapes.length; i++) {
var shape = shapes[i];
if (shape.isSelected()) {
activeShapes.push(shape);
}
}
if (activeShapes.length === 1 && activeShapes[0] instanceof GC.Spread.Sheets.Shapes.GroupShape) {
_getElementById("ungroup").disabled = false;
_getElementById("group").disabled = true;
} else {
_getElementById("ungroup").disabled = true;
_getElementById("group").disabled = false;
}
}
);
_getElementById("group").addEventListener("click", function () {
var activeShape = sheet.shapes.all().filter(function (sp) {
return sp.isSelected();
});
if (activeShape.length > 1) {
var groupShape = sheet.shapes.group(activeShape);
groupShape.isSelected(true);
_getElementById("ungroup").disabled = false;
_getElementById("group").disabled = true;
}
});
_getElementById("ungroup").addEventListener("click", function () {
var activeShape = sheet.shapes.all().filter(function (sp) {
return sp.isSelected() && sp instanceof GC.Spread.Sheets.Shapes.GroupShape;
});
if (activeShape.length) {
activeShape.forEach(function (shape) {
sheet.shapes.ungroup(shape);
});
_getElementById("ungroup").disabled = true;
_getElementById("group").disabled = false;
}
});
}
function _getElementById(id){
return document.getElementById(id);
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="spreadjs culture" content="zh-cn" />
<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$/spread/source/js/license.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="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">
尝试在 Spread 中选择形状并进行组合/取消组合，观察选中区域的变化。
</div>
<div class="option-row">
*立方体和圆柱体已经组合。
</div>
<hr />
<div class="option-row">
<label>组合选中的形状</label>
<input type="button" id="group" value="组合">
<br />
<label>取消组合选中的形状</label>
<input type="button" id="ungroup" 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: 5px;
margin-top: 5px;
}
.sample-options {
z-index: 1000;
}
label {
display: block;
margin-bottom: 6px;
}
p{
padding:2px 10px;
background-color:#F4F8EB;
}
input {
padding: 4px 6px;
width: 160px;
}
input[type=button] {
margin-top: 6px;
display: block;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
