Fabricjs 重复

Question

我一直在学习 fabricJS，因为我正在学习它，所以我已经分别创建了 90 个矩形。下面的代码显示了 90 个中的 2 个。

    var land1 = new fabric.Rect({
    fill: 'green',
    left: 725,
    top: 225,
    width: 25,
    height: 25,    
    perPixelTargetFind: true,
    hasBorders: true, 
    hasControls: false,
    hasRotatingPoint: false,
});

var land2 = new fabric.Rect({
    fill: 'green',
    left: 725,
    top: 225,
    width: 25,
    height: 25,    
    perPixelTargetFind: true,
    hasBorders: true, 
    hasControls: false,
    hasRotatingPoint: false,
});

并根据下拉菜单选择使用 canvas.remove(land1,land2 或 canvas.add(land1,land2。

我尝试在谷歌上搜索如何将 1 个矩形重复 90 次，这样我只需要有 1 个地块。但是我确实尝试了这个但没有用（可能是因为我写错了）。

    for (var i = 0; i < 91; i++) {
var land + i = new fabric.Rect({
        fill: 'green',
        left: 725,
        top: 225,
        width: 25,
        height: 25,    
        perPixelTargetFind: true,
        hasBorders: true, 
        hasControls: false,
        hasRotatingPoint: false,
    });

任何人都可以指出正确的方向来完成此任务并同时执行 canvas.add。我的fiddleJSfiddle

Answer 1

您可以使用 javascript 数组来做到这一点例如

var land = [];
for (var i = 0; i < 91; i++) {
var land[i] = new fabric.Rect({
        fill: 'green',
        left: 725,
        top: 225,
        width: 25,
        height: 25,    
        perPixelTargetFind: true,
        hasBorders: true, 
        hasControls: false,
        hasRotatingPoint: false,
    });

}

Fabricjs 重复

Fabricjs repeat

javascript

canvas

canvasjs