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

我想在由Fabric支持的Canvas中设置一个全局clipTo，它将影响所有用户添加的图层。我想要一个背景图像和一个重叠图像，它们不受此剪贴蒙版的影响。

例子:



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

Canvas 覆盖图像使T恤看起来自然起皱。该覆盖图像大部分是透明的

添加了与T恤形状完全相同的背景图像，该图像应使T恤看起来呈蓝色

添加了canvas.clipTo函数，该函数将 Canvas 裁剪为矩形

添加了用户添加的图像(著名的Fabric哈巴狗)

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

我是而不是想要背景图像(蓝色T恤形状)受剪辑区域影响。

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

您可以玩显示问题here的JS fiddle 。

最佳答案

我带着同样的需求来到这里，最终找到了我正在研究的解决方案。也许有帮助:

对于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)'
}));

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

here's a fiddle

关于javascript - FabricJS阻止canvas.clipTo裁剪canvas.backgroundImage，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32996942/