SpreadJS学习笔记-形状

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

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

三种形状：

1.基础形状 sheet.shapes.add() ,SpreadJS提供182种类型的基础形状
2.线条形状 sheet.shapes.addConnector()
2.1 Straight
2.2 Elbow
3.组合形状 sheet.shapes.group([shape1,shape2])

可设置的属性：

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

image.png

形状组合

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

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

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

自定义形状

   var shape = sheet.shapes.add('name', model);
  var model = {
         left: 50,
            top: 230,
            width: 100,
            height: 100,
          options: {}
           path: []
};

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

形状与公式

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

// 图形内的文字取Sheet1表单中G19单元格的内容
       shape.text('=Sheet1!G19');

image.png