Fabric.js添加圖像順序

Question

我試圖嚴格將圖像添加到畫布，但圖像隨機添加。

有什麼問題？

這是我的簡單代碼。

var canvas = new fabric.Canvas("preview"); 
var imgs = ['bgBottom','bgTop', 'bgLevel', 'bgCircle']; 
for (var i=0; i<imgs.length;i++){ 
      var url = imgs[i]+'.png'; 
        fabric.Image.fromURL(url, function (oImg) { 
         canvas.add(oImg) 
        }) 

} 

Answer 1

fabric.Image.fromURL在後臺加載圖像並運行你傳遞給它一旦圖像加載完成其添加到畫布上的匿名函數。瀏覽器加載圖像的順序會有所不同，您不能依賴它以特定的順序。

檢查出this jsfiddle顯示加載圖像數組並確保它們按照設置的順序顯示。這可以通過在加載之前將圖像添加到畫布上來實現;它只是在圖像可以顯示之前不渲染。

從的jsfiddle代碼：

var SelfLoadingImage = fabric.util.createClass(fabric.Object, { 
    initialize: function(src) { 
     this.image = new Image(); 
     this.image.src = src; 
     this.image.onload = (function() { 
      this.width = this.image.width; 
      this.height = this.image.height; 
      this.loaded = true; 
      this.setCoords(); 
      this.fire('image:loaded'); 
      canvas.renderAll(); 
     }).bind(this); 
    }, 

    _render: function(ctx) 
    { 
     if (this.loaded) { 
      ctx.drawImage(this.image, -this.width/2, -this.height/2); 
     } 
    } 
}); 

var canvas = new fabric.Canvas("preview"); 
var imgs = [ 
    'http://icons.iconarchive.com/icons/fasticon/ifunny/128/dog-icon.png', // dog 
    'http://33.media.tumblr.com/avatar_14ee6ada72a4_128.png', // cat 
    'http://upload.wikimedia.org/wikipedia/commons/b/bc/Nuvola_devices_mouse.png' // mouse 
]; 

for (var i=0; i<imgs.length;i++){ 
    var url = imgs[i]; 
    var img = new SelfLoadingImage(url); 
    canvas.add(img); 
}