【SpreadJS v15.2 新特性介绍】使用形状（Shape）重新构建图片对象，实现更灵活的功能

以往在SpreadJS中，图片是通过浮动浮动对象实现的，SpreadJS v15.2 使用形状（Shape）重新构建图片对象
1.将图片实现为形状，而不是浮动对象。原因如下：
     1.1将图片用作浮动DOM对象会导致难以正确处理Z-Order。
     1.2用形状将允许图片支持形状格式选项。
     1.3使用形状可以让我们将图片和线条连接起来，并放置在形状容器和列表中
2.外观表现：
     2.1选中样式

      2.2旋转和样式

rotate(30)	style(solid fill)	style(solid fill + solid line)

3.用法：

1. var pic = sheet.shapes.addPictureShape("Picture 1", "data:image/png;base64,/9j/4...", 100, 50, 100, 100);
   
2. 
   
3. // rotate
   
4. pic.rotate(30);
   
5. 
   
6. // style
   
7. var style = pic.style();
   
8. style.fill.type = GC.Spread.Sheets.Shapes.ShapeFillType.solid;
   
9. style.fill.color = "rgb(112,48,160)";
   
10. style.line.color = "rgb(91,155,213)";
    
11. style.line.width = 2;
    
12. pic.style(style);

复制代码

4.示例代码：
    4.1使用连接器连接图片和形状

1. var picture = sheet.shapes.addPictureShape('pic', 'data:image/png;base64,/9j/4...', 50, 50, 160, 160);
   
2. var shape = sheet.shapes.add('oval', GC.Spread.Sheets.Shapes.AutoShapeType.oval, 300, 200, 160, 160);
   
3. 
   
4. var connector = sheet.shapes.addConnector('cxn', GC.Spread.Sheets.Shapes.ConnectorType.elbow, 20, 50, 100, 20);
   
5. 
   
6. connector.startConnector({name: picture.name(), index: 3});
   
7. connector.endConnector({name: shape.name(), index: 1});

复制代码

     4.2组合图和形状

1. var picture = sheet.shapes.addPictureShape('pic', 'data:image/png;base64,/9j/4...', 50, 50, 160, 160);
   
2. var shape = sheet.shapes.add('oval', GC.Spread.Sheets.Shapes.AutoShapeType.oval, 300, 200, 160, 160);
   
3. sheet.shapes.group([picture, shape]);

复制代码

  4.3调整图片和形状的zindex

1. var shape1 = sheet.shapes.add('oval1', GC.Spread.Sheets.Shapes.AutoShapeType.oval, 50, 50, 160, 160);
   
2. var picture = sheet.shapes.addPictureShape('pic', 'data:image/png;base64,/9j/4...', 160, 50, 160, 160);
   
3. var shape2 = sheet.shapes.add('oval2', GC.Spread.Sheets.Shapes.AutoShapeType.oval, 270, 50, 160, 160);
   
4. 
   
5. // adjust zIndex
   
6. sheet.shapes.zIndex(picture.name(), 2);

复制代码

5.一些用法的改变：
5.1在ExcelIO中，添加了“importPictureAsFloatingObject”选项，以控制图片是作为浮动对象还是形状导入。此选项默认为false。

1. excelIo.open(file, () => {}, () => {},{ importPictureAsFloatingObject: false });

复制代码

  5.2复制和粘贴图像文件时，默认情况下将创建图片形状。如果未加载形状模块，将创建浮动对象图片。
   5.3sheet.pictures  api被标记为不推荐使用