纯前端表格控件SpreadJS新手入门指南：如何使用形状功能

使用SpreadJS的形状功能，需引用：

<script src='.../spreadjs/plugins/gc.spread.sheets.shapes.x.xx.xxxxx.x.min.js' type='text/javascript'></script>

SpreadJS三种形状：

1. 基础形状 sheet.shapes.add()  ,SpreadJS提供182种类型的基础形状；

2. 线条形状  sheet.shapes.addConnector()：

• Straight
• Elbow

3. 组合形状 sheet.shapes.group([shape1,shape2])。

可设置的属性：

填充色、边框宽度、边框颜色、填充文字、文字的居中情况、字体、字体色、背景透明度、线条的类型、线条形状的箭头等等。可设定一个形状是否可被选中、可放大缩小、可被移动。

形状组合

让单个的形状成为一组，可以一起被选中、放大缩小、旋转。

// 组合形状sheet.shapes.group([shape1,shape2])；//取消组合形状var groupShape = sheet.shapes.group(shapes)sheet.shapes.ungroup(groupShape);

示例中选择几个形状，点击组合按钮，可以使选中形状成为一组，选中组合的形状点击取消组合可以使选中的组合形状取消先前的组合。

自定义形状

如示例中左下角的桃心，为自定义的一个图形。

形状与公式

修改示例中G14-G20单元格的内容，可对应修改左边的图形显示：

SpreadJS | 下载试用

标签：