在SpreadJS中将图片嵌入单元格的技巧与实现

收藏

本帖最后由 Wilson.Zhang 于 2024-9-6 09:44 编辑

在SpreadJS中，图片被当作一种形状，而形状无法如同数值、字符串等文本内容被装填在单元格中。形状像是悬浮在Worksheet画布之上的有一个图层一样，也可将其认为浮动对象。那么，如何才能将形状填充在单元格内呢？首先可以确定的是：图片等形状无法真的作为普通数据被装填在单元格内。既然图片是悬浮在Worksheet上方的图层，那是否可能将图片与单元格区域重叠呢，从视觉效果上看起来图片正在单元格中呢？可以负责任地讲一句：这个可以有。如图1所示，图片即看似嵌在单元格内。

图1. 图片嵌在单元格内

第一步，在Worksheet中添加一张图片的API是ShapeCollection:addPictureShape(name, src, left, top, width, height)，从API可知添加图片时可通过left、top指定图片在Worksheet中的起始位置，同时通过width、height确定图片的尺寸。那么，获取某行某列单元格的行高和列宽，以此设置图片的尺寸，便可将图片大小调整至与单元格相同尺寸。将图片成功添加至Worksheet后可以进一步设置图片和单元格之间的相对位置，比如设置图片所在位置的起始行列和末端行列，这是第二步。通过上述两个步骤，便可使图片看似嵌入在单元格内部。如果想要让图片不占满单元格内部空间，也可以再进一步设置图片在单元格内部的偏移尺寸。

正如图片无法真正作为普通数据被装填在单元格内部，即使通过上述方式可以让图片看起来嵌在了单元格中，但也仍然无法通过Worksheet:getValue()获取到单元格内的图片信息。同样地，既然可以曲线救国将图片放置在单元格中，那么也可以相应地找到一条路线通过单元格获取图片信息，那就是ShapeSelectionChanged事件。具体地，点击图片将触发ShapeSelectionChanged事件，该事件便可以获取到被点击的形状对象的所有信息，从中即可根据图片位置属性获取到图片的起始行列和末端行列索引、行列内偏移量、图片源等信息。如图2所示，在浏览器右侧控制台打印了图片相关位置信息。

图2. 图片相关位置信息

可参考附件中的demo了解上述步骤的代码实现，同时可参考官网API文档了解API详情：
ShapeCollection:addPictureShape()--https://demo.grapecity.com.cn/spreadjs/help/api/classes/GC.Spread.Sheets.Shapes.ShapeCollection#addpictureshape
PictureShape--https://demo.grapecity.com.cn/spreadjs/help/api/classes/GC.Spread.Sheets.Shapes.PictureShape
ShapeSelectionChanged--https://demo.grapecity.com.cn/spreadjs/help/api/classes/GC.Spread.Sheets.Events#shapeselectionchanged

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

在SpreadJS中将图片嵌入单元格的技巧与实现

0 个回复