Question

我已经剥离了我的小提琴以显示我的问题。

我有一个我正在循环的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]); 
});
};

}

});
});

Answer 1

如果清除整个画布是可以接受的，那么您可以使用此查询中讨论的context - 这里的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);     
}

不知道是否有帮助

Answer 2

所有3张图片都添加为异步，并引用i，并且在添加所有图片时对i的引用为3。如果你看看你的'wh'数组，你有一堆未定义的，然后只有一个对象被添加到数组中。这就是为什么你只能删除一个对象。

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

循环fabricjs中的多个图像

2 个答案: