fabric.js 如何为Rect设置背景图片

在 Fabric.js 中，您可以为 fabric.Rect 对象设置背景图片。要设置背景图片，您需要创建一个新的 fabric.Pattern 对象，并将其设置为 fabric.Rect 对象的 fill 属性。

例如，以下代码将一个背景图片应用到 fabric.Rect 对象上：

var img = new Image();
img.src = 'path/to/image.png';

// 等待图像加载完成
img.onload = function() {
  // 创建一个新的 Pattern 对象
  var pattern = new fabric.Pattern({
    source: img,
    repeat: 'repeat'
  });

  // 创建一个新的 Rect 对象
  var rect = new fabric.Rect({
    width: 200,
    height: 200,
    fill: pattern
  });

  // 添加 Rect 对象到画布上
  canvas.add(rect);
};

在这个例子中，我们创建一个新的 Image 对象，并将其加载完成后创建一个新的 fabric.Pattern 对象。然后，我们使用 fabric.Rect 构造函数创建一个新的矩形对象，并将其 fill 属性设置为我们刚刚创建的 fabric.Pattern 对象。最后，我们将矩形对象添加到画布上。

在 fabric.Pattern 构造函数中，我们需要指定 source 属性为我们加载的图像，以及 repeat 属性为 ‘repeat’，以指定图像如何平铺到矩形上。

本作品采用《CC 协议》，转载必须注明作者和本文链接