Question

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

示例：

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

画布覆盖图像使T恤看起来自然起皱。此叠加图像大部分是透明的
添加了T恤精确形状的背景图片，这样可以让T恤看起来很蓝。
添加了canvas.clipTo功能，将画布剪裁为矩形
添加了用户添加的图像（着名的Fabric pug）

我希望用户添加的图像（哈巴狗）仅限于矩形区域。

我不想要剪辑区域影响的背景图片（蓝色T恤形状）。

有一种简单的方法可以实现这一目标吗？我真的不想在每个用户层上添加clipTo而不是一个整洁的全局clipTo。

您可以使用JS小提琴演示问题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)'
}));

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

here's a fiddle

Answer 2

一个（sorta hacky）解决方案：在canvas元素上设置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

您是否尝试裁剪面料Group？你可以把整个衬衫做成帆布。中心图形将是一个组，您可以将其剪切到所需的位置。白色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);
};

看到我做的这个jsfiddle：https://jsfiddle.net/uvepfag5/4/

Answer 4

我发现剪辑相当慢，所以我倾向于使用globalCompositeOperation进行屏蔽。

如果您确实需要使用剪辑，请将其与保存和恢复结合使用。

// ctx is canvas context 2d
// pug is the image to be clipped

// draw your background
ctx.save(); // save state
ctx.rect(100,100,100,100); // set the clip area
ctx.clip(); // apply the clip 
ctx.drawImage(pug,x,y); // draw the clipped image
ctx.restore(); // remove the clipping
// draw the other layers.

或者你可以

// draw background
ctx.globalCompositeOperation = "xor";  // set up the mask
ctx.fillRect(100,100,100,100); // draw the mask, could be an image. 
                               // Alpha will effect the amount of masking,
                               // not available with clip 
ctx.globalCompositeOperation = "destination-over";
ctx.drawImage(pug,x,y); // draw the image that is masked                        
ctx.globalCompositeOperation = "source-over";
// draw the stuff that needs to be over everything.

复合操作的优点是您可以控制每像素级别的裁剪，包括通过像素alpha值裁剪的数量

FabricJS阻止canvas.clipTo剪切canvas.backgroundImage

4 个答案: