織物JS定製旋轉圖標沒有顯示在初始加載

我已經用於改變在織物JS旋轉圖標下面的代碼： http://jsfiddle.net/2XZHp/194/織物JS定製旋轉圖標沒有顯示在初始加載

//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; 
      } 
     } 
    } 
});

但旋轉圖標沒有顯示在第一選擇。只有當我開始移動物體時，或者取消選擇它並再次選擇它。

我已經看過其他解決方案來改變圖標，但這個似乎是迄今爲止最優雅的。但也許它太簡單/有限？

任何想法？

來源

2016-09-12 Michael

我會推薦y ou使用圖像的base64字符串，因爲這會刪除可能需要從遠程URL加載圖像所需的初始等待時間：http://jsfiddle.net/2XZHp/197/ – Fidel90

我不知道是否適合您的需求，但增加一個簡單的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/

來源

2016-09-16 09:42:46 Fidel90

織物JS定製旋轉圖標沒有顯示在初始加載

回答

相關問題