如何在Fabric.js画布中将背景图像设置为文本对象

Question

我搜索了很多，但没有找到任何解决方案将背景图像添加到布料画布上的Fabric文本对象。

参考：http://fabricjs.com/docs/

Answer 1

您需要使用fabric Pattern 对象并将其设置为文本对象的 fill 属性才能实现此目的。

以下是执行此操作的示例代码：

var text = new fabric.Text('Your Text', {
    fontSize: 250,
    left: 50,
    top: 0,
    lineHeight: 1,
    originX: 'left',
    fontFamily: 'Helvetica',
    fontWeight: 'bold'
  });
canvas.add(text);

function textBackground(url) {
    fabric.util.loadImage(url, function(img) {
      text.fill = new fabric.Pattern({
        source: img,
        repeat: 'repeat' // repeat, repeat-x, repeat-y or no-repeat
      });
      canvas.renderAll();
    });
}

textBackground('SOMEIMAGE.png');

在fabricjs网站上有一个演示：Patterns Demo