面料js。无法为多个徽章制作图案填充

Question

美好的一天，我希望有人能够帮助我。

我有一个for语句，在fabric js canvas上创建并添加多个Rects。我需要为每个创建的矩形设置纹理，所以我使用下面的代码。

var rect = new fabric.Rect({ 
 
    width: 100, 
 
    height: 100, 
 
    selectable: true, 
 
    hasControls: false, 
 
    borderColor: 'red', 
 
    borderWidth: 2, 
 
    lockMovementX: true, 
 
    lockMovementY: true 
 
}); 
 

 
canvas.add(rect); 
 

 
fabric.util.loadImage('construct/css/img/patterns/1.jpg', function(img) { 
 
    rect.set('fill', new fabric.Pattern({ 
 
    source: img, 
 
    repeat: 'repeat' 
 
    })); 
 
}); 
 
Выполнить

出于某种原因，代码执行后，其并非所有rects质感，但只有最后一个加入。

这真是让我疯狂。

想知道关于提前这个

感谢任何帮助。

Answer 1

我的假设是你对所有的矩形都使用相同的变量矩形，这就是为什么你只有最后一个对象的图案。 例如，您将添加4个矩形：

for (var i = 0; i < 4; i++){ 
    var rect = new fabric.Rect({ 
    width: 100, 
    height: 100, 
    left: i * 110, 
    selectable: true, 
    hasControls: false, 
    borderColor: 'red', 
    borderWidth: 2, 
    lockMovementX: true, 
    lockMovementY: true 
    }); 

    canvas.add(rect); 
} 

然后，你将需要通过所有矩形环，并设置填补像模式：

fabric.util.loadImage('http://fabricjs.com/lib/pug.jpg', function(img) { 
    canvas.forEachObject(function(obj){ 
    obj.set('fill', new fabric.Pattern({ 
    source: img, 
    repeat: 'repeat' 
    })); 
    }); 

    canvas.renderAll(); 
}); 

工作代码here

警告：如果除矩形外还有其他对象，则需要通过检查对象类型来忽略它们，或者将某种自定义形状类型设置为矩形。