javascript - 织物 js。无法对多个矩形进行图案填充

Question

美好的一天，我希望有人能帮我解决这个问题。

我有一个 for 语句，它在 Fabric js Canvas 上创建和添加多个 Rect。我需要为每个创建的矩形设置纹理，因此我使用以下代码。

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'
  }));
});
 Выполнить 

由于某种原因，代码执行后，并非所有矩形都有纹理，而只有最后一个添加了纹理。

这真的让我发疯。

希望得到任何帮助

提前致谢。

Answer 1

我的假设是您对所有矩形使用相同的变量 rect，这就是为什么您只为最后一个对象提供模式。例如，您将添加 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

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