【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选中样式
image.png855917053.png

2.2旋转和样式

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

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使用连接器连接图片和形状
image.png751080016.png

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组合图和形状
image.png694220275.png

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([picture, shape]);

复制代码

4.3调整图片和形状的zindex

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.pictures api被标记为不推荐使用

		自动登录	找回密码
密码			立即注册

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

0 个回复