mehrere Bilder in einer Schleife fabricjs

Question

Ich habe meine Fiddle zurückgenommen, um mein Problem zu zeigen.

Ich habe einen Rectagle, dass ich Schleife bin, so gibt es einen anderen Namen mit mehreren Instanzen. Ich kann die Rechtecke hinzufügen und entfernen. Mein Problem ist, dass ich dieses Rechteck durch ein Bild ersetze, und ich kann es in die Schleife in Ordnung bringen, aber es wird nur 1 Bild entfernen und nicht alle. Ich denke, ich mache etwas falsch mit dem Namen, aber ich kann das Holz nicht durch die Bäume sehen.

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

Alle 3 Ihrer Bilder hilft sind Asynchron mit einem Verweis auf i und die Bezugnahme auf i hinzugefügt 3 ist, wenn alle Bilder hinzugefügt werden. Wenn Sie sich Ihr "wh" -Array anschauen, haben Sie eine Reihe von undefinierten und dann nur ein Objekt, das zum Array hinzugefügt wurde. Aus diesem Grund können Sie nur ein Objekt löschen.

this JSFiddle ruft nur eine neue ID im Callback ab, die das Array korrekt aufruft und dann gelöscht werden kann, da Sie nun alle richtigen Referenzen haben.

Answer 2

wenn es akzeptabel ist dies die ganze Leinwand zu löschen, dann können Sie die context -fiddle hier verwenden https://fiddle.jshell.net/2xozu3wk/ wie in dieser Abfrage diskutiert How to undraw, hide, remove, or delete an image from an html canvas? Ich denke, mit einer Ausnahme alle Ihre Bilder verpflichtet, das wird Leinwand und Bilder malen Pixel auf eine Weise, die nicht so einfach zu säubern ist. Alternativ können Sie die Arbeitsfläche leeren und Elemente, die Sie beibehalten möchten, wiederherstellen, aber auf ein Flimmern vorbereitet sein?

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

wissen nicht, ob das