javascript - 循环中的多个图像fabricjs

Question

我已经脱掉我的 fiddle 来显示我的问题。

我有一个正在循环的矩形，因此它为多个实例提供了不同的名称。我可以很好地添加和删除矩形。我的问题是，我用图像替换这个矩形，我可以让它循环正常，但它只会删除 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 个图像均通过对 i 的引用异步添加，添加所有图像时对 i 的引用为 3。如果您查看“wh”数组，您会看到一堆未定义的值，然后只有 1 个对象添加到数组中。这就是为什么您只能删除一个对象。

this JSFiddle只是在回调中获取一个新的 id，该 id 正确设置了数组，然后可以将它们删除，因为您现在将拥有所有正确的引用。