ループファブリック内の複数の画像

Question

私は私の問題を示すためにフィドルを取り除きました。

私はループしているので、複数のインスタンスで異なる名前を付けています。私は追加し、矩形を削除することができます。私の問題は、この矩形をイメージに置き換えて、ループするようにすることができますが、1つのイメージだけを削除し、すべて削除することはありません。私は名前に何か間違っていると思うが、私は木から木を見ることができない。

JSFiddle

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

} 

}); 
}); 

Answer 1

すべての3を助けた場合

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

は知りません。あなたの 'wh'配列を見ると、未定義の束があり、配列にオブジェクトが1つしか追加されません。そのため、1つのオブジェクトだけを削除することができます。

this JSFiddleは、配列を正しく設定したコールバックで新しいIDを取得してから、適切な参照がすべて設定されるため、削除できます。

Answer 2

それはこのクエリHow to undraw, hide, remove, or delete an image from an html canvas?で説明したように、これはあなたがここにhttps://fiddle.jshell.net/2xozu3wk/をcontext -fiddleを使用することができます全体のキャンバスをクリアするために許容可能だ場合、私はあなたのイメージのうちの1つを除くすべてがにコミットしていると思いますキャンバスとイメージは、あまり簡単にクリーンアップできない方法でピクセルをペイントします。代わりに、キャンバスを空白にして、保持したい要素を元に戻しても、ちらつきに備えておくことができます。それは、すべての画像が追加されたとき3であるiを参照するとiを参照して、非同期（async）追加されたあなたのイメージの