javascript - FabricJS 防止 canvas.clipTo 剪裁 canvas.backgroundImage

Question

我想在我的 Fabric-powered Canvas 中设置一个全局 clipTo，这将影响所有用户添加的图层。我想要一个不受此剪辑蒙版影响的背景图像和叠加图像。

例子:

这是这张照片中发生的事情:

1. Canvas 叠加图像使 T 恤看起来自然起皱。此叠加图像大部分是透明的
2. 添加了与 T 恤形状完全相同的背景图片，这应该使 T 恤看起来是蓝色的
3. 添加了一个canvas.clipTo函数，将 Canvas 剪裁成矩形
4. 添加了用户添加的图像(著名的 Fabric 哈巴狗)

我希望将用户添加的图像(哈巴狗)限制在矩形区域。

我不希望剪辑区域影响背景图像(蓝色 T 恤形状)。

有没有简单的方法可以做到这一点？我真的不想在每个用户层上都添加一个 clipTo 而不是一个整洁的全局 clipTo。

您可以使用显示问题的 JS fiddle here .

Answer 1

我带着同样的需求来到这里，并最终为我的工作找到了解决方案。也许它有帮助:

对于 SVG 路径，在 clipTo 函数中，您可以在调用 render(ctx) 之前直接修改 ctx，并且这些更改适用于剪切路径 o 之外。像这样:

var clipPath = new fabric.Path("M 10 10 L 100 10 L 100 100 L 10 100", {
  fill: 'rgba(0,0,0,0)',
});

var backgroundColor = "rgba(0,0,0, 0.2)";

var opts = {
  controlsAboveOverlay: true,
  backgroundColor: 'rgb(255,255,255)',
  clipTo: function (ctx) {
    if (typeof backgroundColor !== 'undefined') {
      ctx.fillStyle = backgroundColor;
      ctx.fillRect(0, 0, 300, 150);
    }
    clipPath.render(ctx);
  }
}
var canvas = new fabric.Canvas('c', opts);

canvas.add(new fabric.Rect({
  width: 50,
  height: 50,
  left: 30,
  top: 30,
  fill: 'rgb(255,0,0)'
}));

您当然可以添加图像而不是颜色，或者您想要的任何其他操作。我发现的技巧是直接将它放在 ctx 的 clipTo 函数中。

here's a fiddle