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

QQ登录

只需一步,快速开始

jerryniepan

初级会员

32

主题

132

帖子

336

积分

初级会员

积分
336
jerryniepan
初级会员   /  发表于:2017-5-2 14:52  /   查看:6397  /  回复:13
本帖最后由 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中也是无法画出来的,求解。

13 个回复

倒序浏览
Clark.Pan讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2017-5-2 17:43:37
沙发
原因就是任何操作都会引起重绘,调用paint方法,这样按照你目前的写法就会重新加载图片,但是加载图片是一个异步的过程,drawImage时候图片还没加载完所以,就会显示不出来。设置了setTimeout是一个道理,当setTimeout触发时又会重新加载图片,所以还是显示不回来。
所以最好将图片一次加载完存入tag中。
  1. var tag = sheet.getTag(row, col);
  2.             if(tag && tag.img){
  3.               ctx.drawImage(tag.img, x + w - h + 1, y + 1, h - 2, h - 2);
  4.             }
  5.             else{
  6.                 var img = new Image();  
  7.                 img.src = iconImage;
  8.                 img.onload = function(){
  9.                     sheet.setTag(row, col, {img: img})
  10.                     sheet.repaint();
  11.                 }
  12.             }
复制代码

以上代码可以进行参考。
回复 使用道具 举报
jerryniepan
初级会员   /  发表于:2017-5-2 18:29:29
板凳
本帖最后由 jerryniepan 于 2017-5-2 18:30 编辑
ClarkPan 发表于 2017-5-2 17:43
原因就是任何操作都会引起重绘,调用paint方法,这样按照你目前的写法就会重新加载图片,但是加载图片是一 ...

img.onload = function(){... }
onload里执行,图片怎么会没有加载完?你的意思是当paint的时候图片还没有加载完,这时候回调的时候再执行就不会画了?
回复 使用道具 举报
Clark.Pan讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2017-5-2 18:59:05
地板
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
初级会员   /  发表于:2017-5-3 11:10:35
5#
本帖最后由 jerryniepan 于 2017-5-3 11:14 编辑
ClarkPan 发表于 2017-5-2 18:59
js内部是按顺序逐行执行的,可以认为是同步的给imgae赋值src时,去加载图片这个过程是异步的,这个异步过 ...

为啥下面的代码画圆也画不出来呢?
  1. setTimeout(function() {
  2.     var tag = context.sheet.getTag(context.row, context.col, context.sheetArea);
  3.     var RADIUS = 10;
  4.     ctx.save();
  5.     ctx.beginPath();
  6.     ctx.arc(x + width - RADIUS, y + height / 2, RADIUS / 2, 0, Math.PI * 2);

  7.     ctx.fillStyle = (tag && tag.color) || 'blue';
  8.     ctx.fill();
  9.     ctx.restore();
  10. });
复制代码


回复 使用道具 举报
Clark.Pan讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2017-5-3 11:19:06
6#
jerryniepan 发表于 2017-5-3 11:10
为啥下面的代码画圆也画不出来呢?

之前已经说了,在spreadjs中,何操作都会引起重绘,当setTimeout触发时又会引起重绘,所以还是显示不出来。
回复 使用道具 举报
jerryniepan
初级会员   /  发表于:2017-5-3 11:21:47
7#
ClarkPan 发表于 2017-5-3 11:19
之前已经说了,在spreadjs中,何操作都会引起重绘,当setTimeout触发时又会引起重绘,所以还是显示不出来 ...

刚才说的src放后边试了一下也出不来
回复 使用道具 举报
Clark.Pan讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2017-5-3 12:01:46
8#
jerryniepan 发表于 2017-5-3 11:21
刚才说的src放后边试了一下也出不来

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
初级会员   /  发表于:2017-5-3 14:43:21
9#
ClarkPan 发表于 2017-5-3 12:01
var tag = sheet.getTag(row, col);
            if(tag && tag.img){
              ctx.drawImage(ta ...

嗯,最后用的是这个,也解决问题了,只是想请教一下原理,多谢版主了
回复 使用道具 举报
CCKan
银牌会员   /  发表于:2017-5-3 15:35:22
10#
在画法中不要使用 timer,因为 SpreadJS 使用了 double buffer 机制,所以你前面拿到的 context 不一定是界面上真实显示的 Canvas 的 context.
回复 使用道具 举报
12下一页
您需要登录后才可以回帖 登录 | 立即注册
返回顶部