與FabricJS循環中的圖像

我正在使用fabricjs，並且我有一個JSON圖像列表。每個元素代表一個圖像，每個圖像的左側，頂部等信息。在我的javascript代碼我有我有以下與FabricJS循環中的圖像

for (var j = 0; j < ChrImages.d.length; j++) { 

    var obj = ChrImages.d[j]; 

    fabric.util.loadImage(obj.URL, function (img) { 
     var customImage = new fabric.CustomImage(img, { name: obj.Name, rot: obj.Rotation, rawURL: obj.RawURL, belongsto: obj.BelongsTo,left:obj.PosX,top:obj.PosY,angle:obj.Rotation }); 
     //customImage.set({ 
     // left: obj.PosX, 
     // top: obj.PosY, 
     // angle: obj.Rotation, 
     // lockScalingX: true, 
     // lockScalingY: true, 
     // perPixelTargetFind: true, 
     //}); 
    // customImage.filters.push(new fabric.Image.filters.RemoveWhite()); 
     canvas.add(customImage); 
     groupWorkingChromosomeImages.add(customImage); 
    }); 

    }

的問題是，所有的圖像堆疊於彼此。看起來所有的圖像都有相同的左邊和上邊。

我有檢查，以確保JSON列表是準確的。另外，我需要使用自定義類，因爲我的圖像具有其他屬性。

有人可以讓我知道爲什麼在緊密循環中添加圖像失敗？

來源

2013-07-03 user1144596

您的變量obj不在loadImage函數的相同範圍內，所以這會給您帶來意想不到的結果，因爲您無法控制loadImage何時觸發。在你的for循環結束後，可能會引發太多火花。

使用此代碼，並告訴我，如果它幫助：

for (var j = 0; j < ChrImages.d.length; j++) { 
    var currentObj = ChrImages.d[j]; 

    //closure, create a scope for specific variables 
    (function (obj) { 
     fabric.util.loadImage(obj.URL, function (img) { 
      var customImage = new fabric.CustomImage(img, { 
       name: obj.Name, 
       rot: obj.Rotation, 
       rawURL: obj.RawURL, 
       belongsto: obj.BelongsTo, 
       left: obj.PosX, 
       top: obj.PosY, 
       angle: obj.Rotation 
      }); 
      canvas.add(customImage); 
      groupWorkingChromosomeImages.add(customImage); 
     }); 

    })(currentObj); 

}

我包你的LoadImage功能，所以它會使用正確的obj實例內關閉，告訴我，如果它的工作原理。

乾杯

來源

2013-07-04 07:08:48 arty

真棒的工作。 – user1144596

與FabricJS循環中的圖像

回答

相關問題