【SpreadJS v15.2 新特性介绍】使用形状（Shape）重新构建图片对象，实现更灵活的功能
本帖最后由 爱迪生 于 2023-5-8 18:14 编辑以往在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)
https://grapecity.atlassian.net/wiki/download/thumbnails/2915313752/image2022-7-13_12-27-31.png?version=1&modificationDate=1657686453127&cacheVersion=1&api=v2&width=180&height=180
https://grapecity.atlassian.net/wiki/download/thumbnails/2915313752/image2022-7-13_12-22-1.png?version=1&modificationDate=1657686122797&cacheVersion=1&api=v2&width=180&height=185https://grapecity.atlassian.net/wiki/download/thumbnails/2915313752/image2022-7-13_12-21-43.png?version=1&modificationDate=1657686104813&cacheVersion=1&api=v2&width=180&height=181
3.用法：
var pic = sheet.shapes.addPictureShape("Picture 1", "data:image/png;base64,/9j/4...", 100, 50, 100, 100);
// rotate
pic.rotate(30);
// style
var style = pic.style();
style.fill.type = GC.Spread.Sheets.Shapes.ShapeFillType.solid;
style.fill.color = "rgb(112,48,160)";
style.line.color = "rgb(91,155,213)";
style.line.width = 2;
pic.style(style);4.示例代码：
4.1使用连接器连接图片和形状
var picture = sheet.shapes.addPictureShape('pic', 'data:image/png;base64,/9j/4...', 50, 50, 160, 160);
var shape = sheet.shapes.add('oval', GC.Spread.Sheets.Shapes.AutoShapeType.oval, 300, 200, 160, 160);
var connector = sheet.shapes.addConnector('cxn', GC.Spread.Sheets.Shapes.ConnectorType.elbow, 20, 50, 100, 20);
connector.startConnector({name: picture.name(), index: 3});
connector.endConnector({name: shape.name(), index: 1}); 4.2组合图和形状
var picture = sheet.shapes.addPictureShape('pic', 'data:image/png;base64,/9j/4...', 50, 50, 160, 160);
var shape = sheet.shapes.add('oval', GC.Spread.Sheets.Shapes.AutoShapeType.oval, 300, 200, 160, 160);
sheet.shapes.group(); 4.3调整图片和形状的zindex
https://grapecity.atlassian.net/wiki/download/thumbnails/2915313752/image2022-5-25_14-57-22.png?version=1&modificationDate=1653461844056&cacheVersion=1&api=v2&width=326&height=150
https://grapecity.atlassian.net/wiki/download/thumbnails/2915313752/image2022-5-25_14-59-37.png?version=1&modificationDate=1653461978492&cacheVersion=1&api=v2&width=337&height=150
var shape1 = sheet.shapes.add('oval1', GC.Spread.Sheets.Shapes.AutoShapeType.oval, 50, 50, 160, 160);
var picture = sheet.shapes.addPictureShape('pic', 'data:image/png;base64,/9j/4...', 160, 50, 160, 160);
var shape2 = sheet.shapes.add('oval2', GC.Spread.Sheets.Shapes.AutoShapeType.oval, 270, 50, 160, 160);
// adjust zIndex
sheet.shapes.zIndex(picture.name(), 2);5.一些用法的改变：
5.1在ExcelIO中，添加了“importPictureAsFloatingObject”选项，以控制图片是作为浮动对象还是形状导入。此选项默认为false。
excelIo.open(file, () => {}, () => {},{ importPictureAsFloatingObject: false }); 5.2复制和粘贴图像文件时，默认情况下将创建图片形状。如果未加载形状模块，将创建浮动对象图片。
5.3sheet.picturesapi被标记为不推荐使用
页:
[1]