设置自定义单元格，画图片时出不来

收藏

本帖最后由 jerryniepan 于 2017-5-2 14:53 编辑

                  ColumnItemsCellType.prototype.paint = function(ctx, value, x, y, width, height, style, context) {
                     var args = [].slice.call(arguments, 0, arguments.length)
                     spreadNS.CellTypes.ColumnHeader.prototype.paint.apply(this, arguments);

                     var that = this;
                     var img = new Image();
                     img.src = this.SORT_ASC_ICON_DEFAULT;
                     img.onload = function(){
                        ctx.drawImage(img, x + width - that.SORT_ICON_SIZE, y + (height - that.SORT_ICON_SIZE) / 2, that.SORT_ICON_SIZE, that.SORT_ICON_SIZE);
                     }
                  };

设置自定义单元格，这种情况下图片画不出来，我测试了一下，是onload的原因，若写成setTimeout()也同样画不出来。
http://demo.gcpowertools.com.cn/ ... ustomHeaderCellType中的例子，若圆的部分放在setTimeout中也是无法画出来的，求解。

Clark.Pan · Clark.Pan

原因就是任何操作都会引起重绘，调用paint方法，这样按照你目前的写法就会重新加载图片，但是加载图片是一个异步的过程，drawImage时候图片还没加载完所以，就会显示不出来。设置了setTimeout是一个道理，当setTimeout触发时又会重新加载图片，所以还是显示不回来。
所以最好将图片一次加载完存入tag中。

var tag = sheet.getTag(row, col);
if(tag && tag.img){
ctx.drawImage(tag.img, x + w - h + 1, y + 1, h - 2, h - 2);
}
else{
var img = new Image();
img.src = iconImage;
img.onload = function(){
sheet.setTag(row, col, {img: img})
sheet.repaint();
}
}

复制代码

以上代码可以进行参考。

jerryniepan · jerryniepan

本帖最后由 jerryniepan 于 2017-5-2 18:30 编辑

ClarkPan 发表于 2017-5-2 17:43
原因就是任何操作都会引起重绘，调用paint方法，这样按照你目前的写法就会重新加载图片，但是加载图片是一 ...

img.onload = function(){... }
onload里执行，图片怎么会没有加载完？你的意思是当paint的时候图片还没有加载完，这时候回调的时候再执行就不会画了？

Clark.Pan · Clark.Pan

jerryniepan 发表于 2017-5-2 18:29
img.onload = function(){... }
onload里执行，图片怎么会没有加载完？你的意思是当paint的时候图片还没 ...

js内部是按顺序逐行执行的，可以认为是同步的给imgae赋值src时，去加载图片这个过程是异步的，这个异步过程完成后，如果有onload，则执行onload
如果先赋值src，那么这个异步过程可能在你赋值onload之前就完成了，这应该说是图片加载过快，在你还没有给img.onload赋值之前就完成了，这样就不会调用onload，也就不会进行绘制。
有人说img.src放置到onload下可以解决这种问题，这个你可以试一下，但是不推荐，为什么呢？
就像我之前说的在spreadjs中任何操作都会引起重绘，调用paint方法。如果每次调用paint方法时都进行读取图片，这样性能太差，推荐使用我上面例子所写的方式，将图片缓存到tag中以保持性能

jerryniepan · jerryniepan

本帖最后由 jerryniepan 于 2017-5-3 11:14 编辑

ClarkPan 发表于 2017-5-2 18:59
js内部是按顺序逐行执行的，可以认为是同步的给imgae赋值src时，去加载图片这个过程是异步的，这个异步过 ...

为啥下面的代码画圆也画不出来呢？

setTimeout(function() {
var tag = context.sheet.getTag(context.row, context.col, context.sheetArea);
var RADIUS = 10;
ctx.save();
ctx.beginPath();
ctx.arc(x + width - RADIUS, y + height / 2, RADIUS / 2, 0, Math.PI * 2);
ctx.fillStyle = (tag && tag.color) || 'blue';
ctx.fill();
ctx.restore();
});

复制代码

Clark.Pan · Clark.Pan

jerryniepan 发表于 2017-5-3 11:10
为啥下面的代码画圆也画不出来呢？

之前已经说了，在spreadjs中，何操作都会引起重绘，当setTimeout触发时又会引起重绘，所以还是显示不出来。

jerryniepan · jerryniepan

ClarkPan 发表于 2017-5-3 11:19
之前已经说了，在spreadjs中，何操作都会引起重绘，当setTimeout触发时又会引起重绘，所以还是显示不出来 ...

刚才说的src放后边试了一下也出不来

Clark.Pan · Clark.Pan

jerryniepan 发表于 2017-5-3 11:21
刚才说的src放后边试了一下也出不来

jerryniepan · jerryniepan

ClarkPan 发表于 2017-5-3 12:01
var tag = sheet.getTag(row, col);
if(tag && tag.img){
ctx.drawImage(ta ...

嗯，最后用的是这个，也解决问题了，只是想请教一下原理，多谢版主了

CCKan · CCKan

在画法中不要使用 timer，因为 SpreadJS 使用了 double buffer 机制，所以你前面拿到的 context 不一定是界面上真实显示的 Canvas 的 context.

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

[已处理] 设置自定义单元格，画图片时出不来

13 个回复

浏览过的版块

讲师达人

悬赏达人

微信认证勋章

SpreadJS 认证

SpreadJS 高级认证

元老葡萄

活字格认证