请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

Derrick.Jiao 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2021-6-4 09:34  /   查看:2216  /  回复:4
本帖最后由 Derrick.Jiao 于 2021-6-4 09:41 编辑

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

有小伙伴想要将已有的图标绘制在单元格上,但是发现绘制的图标没有显示。这是因为图片的加载是异步的。我们直接来看代码
  1. var img = undefined;
  2.             function ImageCellType() {
  3.             }
  4.             ImageCellType.prototype = new GC.Spread.Sheets.CellTypes.Text();
  5.             ImageCellType.prototype.paint = function (ctx, value, x, y, width, height, style, context) {
  6.                 spreadNS.CellTypes.RowHeader.prototype.paint.apply(this, arguments);
  7.                                  
  8.                if (img) {
  9.                     ctx.save();
  10.                     ctx.beginPath();
  11.                     ctx.moveTo(x, y);
  12.                     ctx.drawImage(img, x+90, y, 20, 20);
  13.                     ctx.restore();
  14.                     return
  15.                 }
  16.                 //创建新的图片对象
  17.                 img = new Image();
  18.                 //指定图片的URL
  19.                 img.src = "2.png";
  20.                 //浏览器加载图片完毕后再绘制图片
  21.                 img.onload = function () {
  22.                     context.sheet.repaint();
  23.                 }
  24.             };
复制代码
image.png469591063.png
在代码中,我们先定义了一个img的变量,然后为了让这个单元格可以编辑,我们继承了text。里面的if语句判断是都有img,有则进入绘制,在drawImage中的参数分别为图标、X轴距离、Y轴距离,以及宽高。另外,需要注意的是第二个参数可以加上变量的这样可以以防在不同的页面大小下,出现绘制位置不一致的情况。最后在图片加载完成后,调用repaint方法,将图标绘制。
下载附件即可查看完整demo。




SpreadDemo - 图标.zip

2.13 MB, 下载次数: 52

4 个回复

倒序浏览
Trick
中级会员   /  发表于:2021-12-9 17:55:22
沙发
image.png112450255.png
想问一下这个错怎么规避掉,好像某些图片会导致这个错误
Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.
回复 使用道具 举报
Derrick.Jiao讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2021-12-9 18:03:04
板凳
Trick 发表于 2021-12-9 17:55
想问一下这个错怎么规避掉,好像某些图片会导致这个错误
Failed to execute 'drawImage' on 'CanvasRend ...

出现这个错一般是因为dom元素没有获取对,建议你debugger调试一下,跟一下具体是哪步的问题,或者移除业务逻辑提供能复现问题的demo,我们这边调试一下。
回复 使用道具 举报
Trick
中级会员   /  发表于:2021-12-10 10:40:27
地板
Derrick.Jiao 发表于 2021-12-9 18:03
出现这个错一般是因为dom元素没有获取对,建议你debugger调试一下,跟一下具体是哪步的问题,或者移除业 ...

drawImage时出现的问题
回复 使用道具 举报
Derrick.Jiao讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2021-12-10 10:50:35
5#
Trick 发表于 2021-12-10 10:40
drawImage时出现的问题

请开一个新帖把对应的demo提供,我们这边直接从demo上进行调试。
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部