Question

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

我有一个for语句，在fabric js canvas上创建并添加多个Rect。我需要为每个创建的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

我的假设是你对所有矩形使用相同的变量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

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

面料js。无法为多个rects进行模式填充

1 个答案: