关于javascript:fabricjs-如何为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’，以指定图像如何平铺到矩形上。