如何在 Fabric JS 中为画布设置重复背景图像？答案

【问题标题】：How to set repeating background image for a canvas in Fabric JS?如何在 Fabric JS 中为画布设置重复背景图像？
【发布时间】：2014-08-01 03:17:07
【问题描述】：

我想设置一张图片作为画布的背景图片。

canvas.setBackgroundImage 方法可以实现。

但它不会在整个背景中重复。

如何让它可重复？

我看过一些演示，其中使用模式为文本和形状设置重复的背景图像。

如何将此图案用于画布背景。？

【问题讨论】：

标签： fabricjs

【解决方案1】：

使用canvas.backgroundColor 和图案代替背景图片：

canvas.backgroundColor = new fabric.Pattern({source: image})

【讨论】：

【解决方案2】：

根据测试，与 Fabric.JS 捆绑在一起，即使没有通过 fabric.Pattern，也可以通过 backgroundColor setter 实现

var src = 'img/checker.png';

canvas.setBackgroundColor({source: src, repeat: 'repeat'}, function () {
  canvas.renderAll();
});

【讨论】：

【解决方案3】：

对于 Fabric 4.6，official sample code 运行良好：

const bgUrl = 'https://ossrs.net/wiki/images/figma-bg.png';
canvas.setBackgroundColor(
  {source: bgUrl, repeat: 'repeat'}, 
  canvas.renderAll.bind(canvas),
);

CodePen

【讨论】：