FabricJS防止canvas.clipTo裁剪canvas.backgroundImage

Question

我想在我的织物驱动画布中设置一个全局clipTo，它将影响所有用户添加的层。我想要一个背景图像和覆盖图像，这是不受此剪辑掩码影响。

示例：

​

​

下面是这张照片中发生的事情：

1. 帆布覆盖图像使t恤看起来自然起皱。这个覆盖图像大部分是透明的。
2. 增加了一幅与t恤的确切形状相符的背景图像，这将使t恤看起来像蓝色的。
3. 添加了一个canvas.clipTo函数，它将画布剪辑成矩形形状。
4. 添加了用户添加的图像(著名的织物帕格)。

我希望用户添加的图像(帕格)被限制在矩形区域。

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

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

您可以使用显示问题这里的JS小提琴。

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上的ctx函数中。

这里有把小提琴

Answer 2

一种解决方案:在画布元素上设置CSS背景图像，如https://jsfiddle.net/qpnvo3cL/所示

<canvas id="c" width="500" height="500"></canvas>
<style>
  background: url('http://fabricjs.com/assets/jail_cell_bars.png') no-repeat;
</style>
<script>
  var canvas = window._canvas = new fabric.Canvas('c');
  canvas.clipTo = function(ctx) {
      ctx.rect(100,100,100,100);
  }
</script>

Answer 3

你试过裁剪织物组吗？你可以把整件衬衫做成一张帆布。中间的图形将是一个组，你剪辑到你想要的地方。白色T恤和蓝色覆盖当然是，而不是的一部分。

下面是一个剪辑组的示例：

var rect = new fabric.Rect({width:100, height: 100, fill: 'red' });
var circle = new fabric.Circle({ radius: 100, fill: 'green' });
var group1 = new fabric.Group([ circle, rect ], { left: 100, top: 100 });
canvas.add(group1);

group1.clipTo = function(ctx) {
    ctx.rect(50,50,200,200);
};

看看我做的这个小玩意：https://jsfiddle.net/uvepfag5/4/