循環中的多個圖像fabricjs

我已將我的小提琴剝離以顯示我的問題。循環中的多個圖像fabricjs

我有一個Rectagle，我正在循環，因此它給多個實例一個不同的名稱。我可以添加和刪除矩形很好。我的問題是，我正在用圖像替換這個矩形，我可以讓它循環，但它只會刪除1個圖像，而不是全部。我認爲我在名稱上做錯了事，但我無法通過樹木看到木頭。

var canvas = new fabric.Canvas('c', { selection: false }); 
var land = []; 
var turret = []; 
var wh=[]; 
var op=[]; 

////////////////////////////////////////////////////////////////// 
// Outpost Level Dropmenu Select 
$(document).ready(function() {$('#method').change(
function() { 
    var method = $('option:selected').val(); 

          if (this.value == "0") {    
      for (var i=0; i<96; i++){ 
      canvas.remove(land[i]); 
     canvas.remove(turret[i]); 
     canvas.remove(wh[i]); 
     canvas.remove(op[i]); 
}; 

}      else if (this.value == "1") { 
//Clear All 
      for (var i=0; i<96; i++){ 
      canvas.remove(land[i]); 
     canvas.remove(turret[i]); 
     canvas.remove(wh[i]); 
}; 
//Add Buildings 
     for (var i=0; i<40; i++){ 
      land[i] = new fabric.Rect({ 
     fill: 'green',left: 25,top: 25,width: 25,height: 25,  
     perPixelTargetFind: true,hasBorders: false,hasControls:false, hasRotatingPoint: false, 
}); 
      canvas.add(land[i]) 
}; 
      for (var i=0; i<6; i++){ 
      turret[i] = new fabric.Rect({ 
     fill: 'brown',left: 75,top: 25,width: 15,height: 15,  
     perPixelTargetFind: true,hasBorders: false,hasControls: false,hasRotatingPoint: false, 
}); 
      canvas.add(turret[i]) 
}; 

      for (var i=0; i<3; i++){ 
      fabric.Image.fromURL('http://www.ahoymearty.co.uk/baseplanner2/images/buildings/warehouse.png', function(myImgwh) {wh[i] = myImgwh.set({ left: 25, top: 75 ,width:25,height:25, hasControls: false, hasRoatatingPoint: false,stroke: 'blue',strokeWidth: 1, 
}); 
      canvas.add(wh[i]); 
}); 
}; 

} 

}); 
});

來源

2016-09-13 Wayne

全部3圖片的異步與參考i和參考i相加爲3時添加的所有圖像。如果你看看你的'wh'數組，你有一堆undefined，然後只有1個對象添加到數組中。這就是爲什麼你只能刪除一個對象。

this JSFiddle剛剛在回調中獲得了一個新的ID，它將陣列正確設置，然後它們可以被刪除，因爲您現在將擁有所有適當的引用。

來源

2016-09-15 11:07:14 StefanHayden

ty。我還收取了變種i = 0讓我= o和它的工作 – Wayne

，如果它是可以接受的清除整個畫布，然後這個，你可以使用context -fiddle這裏https://fiddle.jshell.net/2xozu3wk/作爲正在致力於在此查詢How to undraw, hide, remove, or delete an image from an html canvas?，我認爲除了你的形象的一個討論畫布和圖像以不太容易清理的方式繪製像素。或者，您可以將畫布留空並恢復您希望保留的元素，但要爲閃爍做好準備？

var canvas = new fabric.Canvas('c', { selection: false }); 

var context = canvas.getContext('2d'); 

. 
. 
. 

if (this.value == "0") {    
     context.clearRect(0, 0, canvas.width, canvas.height);  
}

不知道是否有幫助

來源

2016-09-14 01:27:25 Sam0

我不能空白畫布，因爲其他元素需要它。這個小提琴是爲了表明我做錯了什麼... – Wayne

循環中的多個圖像fabricjs

回答

相關問題