使用 Fabric.js 中的对象创建剪贴蒙版答案

【问题标题】：Create a clipping mask using an object in Fabric.js使用 Fabric.js 中的对象创建剪贴蒙版
【发布时间】：2020-08-08 11:58:56
【问题描述】：

我正在尝试使用 Fabric 创建 T 恤编辑器。我将衬衫设置为画布上的背景图像。现在我试图在 T 恤中间找到一个区域，作为剪贴蒙版。我只希望该区域内的对象可见。

这是我的代码：http://jsfiddle.net/mtb2p3Lx/4/

var canvas = new fabric.Canvas('c');

// set background
fabric.Image.fromURL('https://qstomizr.s3.amazonaws.com/11102-9LDAQLKA1585254870.5083.jpg', (img) => {
  canvas.setBackgroundImage(img, null, {
    originX: 'center',
    originY: 'center',
    top: canvas.getCenter().top,
    left: canvas.getCenter().left,
    stroke: 'black',
    strokeWidth: 1,
  });

  canvas.renderAll();
});


// set masking area
var area = new fabric.Rect({
  originX: 'center',
  originY: 'center',
  top: this.canvas.getCenter().top,
  left: this.canvas.getCenter().left + 10,
  width: 250,
  height: 300,
  selectable: false,
  fill: 'transparent',
  stroke: 'black',
  strokeWidth: 2,
});

canvas.add(area)


// set example rect
var rect = new fabric.Rect({
  originX: 'center',
  originY: 'center',
  top: this.canvas.getCenter().top + 50,
  left: this.canvas.getCenter().left + 150,
  height: 100,
  width: 100,
  fill: 'pink',
});

canvas.add(rect)

我尝试将剪辑路径添加到area rect，还尝试使用globalCompositeOperation，但如果不牺牲背景图像，我无法得到任何工作。

有没有办法让透明区域矩形充当画布中其他对象的剪贴蒙版？

【问题讨论】：

标签： fabricjs

【解决方案1】：

正如您在此网站上看到的 https://printio.ru/tees/new_v2。为了实现背景图像，使用了img 没有setBackgroundImage 的标签。我在这里为你举个例子

https://jsfiddle.net/RamanNikitsenka/4suna7yo/1/

【讨论】：