自定义单元格绘制图标

收藏

本帖最后由 Derrick.Jiao 于 2021-6-4 09:41 编辑

大家都知道SpreadJS的自定义单元格有着强大的自定义特性。相信大家这也看过学习指南的绘制形状的demo（没有看过的可以跳转下方链接）
https://demo.grapecity.com.cn/sp ... /cell-types/custom#

有小伙伴想要将已有的图标绘制在单元格上，但是发现绘制的图标没有显示。这是因为图片的加载是异步的。我们直接来看代码

var img = undefined;
function ImageCellType() {
}
ImageCellType.prototype = new GC.Spread.Sheets.CellTypes.Text();
ImageCellType.prototype.paint = function (ctx, value, x, y, width, height, style, context) {
spreadNS.CellTypes.RowHeader.prototype.paint.apply(this, arguments);
if (img) {
ctx.save();
ctx.beginPath();
ctx.moveTo(x, y);
ctx.drawImage(img, x+90, y, 20, 20);
ctx.restore();
return
}
//创建新的图片对象
img = new Image();
//指定图片的URL
img.src = "2.png";
//浏览器加载图片完毕后再绘制图片
img.onload = function () {
context.sheet.repaint();
}
};

复制代码

在代码中，我们先定义了一个img的变量，然后为了让这个单元格可以编辑，我们继承了text。里面的if语句判断是都有img，有则进入绘制，在drawImage中的参数分别为图标、X轴距离、Y轴距离，以及宽高。另外，需要注意的是第二个参数可以加上变量的这样可以以防在不同的页面大小下，出现绘制位置不一致的情况。最后在图片加载完成后，调用repaint方法，将图标绘制。
下载附件即可查看完整demo。

Trick · Trick

想问一下这个错怎么规避掉，好像某些图片会导致这个错误
Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.

Derrick.Jiao · Derrick.Jiao

Trick 发表于 2021-12-9 17:55
想问一下这个错怎么规避掉，好像某些图片会导致这个错误
Failed to execute 'drawImage' on 'CanvasRend ...

出现这个错一般是因为dom元素没有获取对，建议你debugger调试一下，跟一下具体是哪步的问题，或者移除业务逻辑提供能复现问题的demo，我们这边调试一下。

Trick · Trick

Derrick.Jiao 发表于 2021-12-9 18:03
出现这个错一般是因为dom元素没有获取对，建议你debugger调试一下，跟一下具体是哪步的问题，或者移除业 ...

drawImage时出现的问题

Derrick.Jiao · Derrick.Jiao

Trick 发表于 2021-12-10 10:40
drawImage时出现的问题

请开一个新帖把对应的demo提供，我们这边直接从demo上进行调试。

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

自定义单元格绘制图标

4 个回复

SpreadJS 高级认证

讲师达人

GrapeCity

悬赏达人

SpreadJS 认证