循环中的多个图像

multiple images in a loop fabricjs

本文关键字：图像 循环      更新时间：2023-09-26

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

我有一个矩形，我正在循环，所以它给出了不同的名称与多个实例。我可以很好地添加和删除矩形。我的问题是，我用一个图像替换这个矩形，我可以让它循环，但它只会删除一个图像，而不是所有的。我想我的名字起错了，但是我不能透过树木看到森林。

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

所有3个图像都与i的引用同步添加，当添加所有图像时，i的引用为3。如果你看你的" wh "数组你有一堆未定义的然后只有一个对象被添加到数组中。这就是为什么你只能删除一个对象。

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

如果清除整个画布是可以接受的，那么你可以使用context -fiddle在这里https://fiddle.jshell.net/2xozu3wk/在这个查询中讨论如何从html画布中绘制，隐藏，删除或删除图像?我认为除了一张图片外，你的所有图片都是在画布上绘制的，而图片以一种不太容易清理的方式绘制像素。或者，您可以清空画布并恢复您希望保留的元素，但要为闪烁做好准备?

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

不知道是否有帮助

相关文章：