javascript - Fabric js 自定义旋转图标在初始加载时不显示

Question

我有以下代码用于更改 Fabric js 中的旋转图标: http://jsfiddle.net/2XZHp/194/

//Replace rotate icon
isVML = function() { return typeof G_vmlCanvasManager !== 'undefined'; };

// overriding _drawControl method
fabric.util.object.extend(fabric.Object.prototype, {
    hasRotatingPoint: true,
    selectedIconImage: new Image(),
    iconSrc: 'http://www.navifun.net/files/pins/tiny/Arrow-Rotate-Clockwise.png',
    isLoaded: false,
    _drawControl: function(control, ctx, methodName, left, top) {
        if (!this.isControlVisible(control)) {
            return;
        }
        var size = this.cornerSize;
        isVML() || this.transparentCorners || ctx.clearRect(left, top, size, size);
        if(control !== 'mtr')   ctx['fillRect'](left, top, size, size);
           if(control === 'mtr') {
            if (this.isLoaded) {
                ctx.drawImage(this.selectedIconImage, left, top, size, size);
            } else {
                var self = this;
                this.selectedIconImage.onload = function() {
                    self.isLoaded = true;
                    ctx.drawImage(self.selectedIconImage, left, top, size, size);
                }
                this.selectedIconImage.src = this.iconSrc;
            } 
        }
    }
});

但是旋转图标在第一次选择时不显示。仅当我开始移动对象，或取消选择它并再次选择它时。

我已经研究过其他更改图标的解决方案，但这一个似乎是迄今为止最优雅的。但也许它太简单/有限？

有什么想法吗？

Answer 1

我不确定这是否符合您的需求，但添加一个简单的 self.canvas.renderAll() 就可以了:

http://jsfiddle.net/2XZHp/195/

if (control === "mtr") {
    if (self.isLoaded) {
        ctx.drawImage(self.selectedIconImage, left, top, size, size);
        console.warn("reusing");
    }
    else {
        self.selectedIconImage.onload = function() {
            self.isLoaded = true;
            ctx.drawImage(this, left, top, size, size);
            self.canvas.renderAll();
            console.warn("initial load");
        }
        self.selectedIconImage.src = self.iconSrc;
    } 
}
else {
    ctx.fillRect(left, top, size, size);
}

<小时/>

它还应该与 self.render(ctx) 一起使用:

http://jsfiddle.net/2XZHp/196/