如何使用fabric js仅通过覆盖矩形打孔？

Posted 2023-03-23

【中文标题】如何使用fabric js仅通过覆盖矩形打孔？

【英文标题】：how to make a hole through only overlay Rectangle using fabric js?

【发布时间】：2020-03-01 17:43:32

【问题描述】：

我正在使用 Fabric js 版本 1.7.22 开发图像裁剪器。 通常，每个裁剪器都会在图像上显示黑色透明覆盖层（图像看起来很暗淡），并且还显示一个 Rect。 （裁剪图像看起来充满颜色的区域）。

我们可以使用带有背景图像和fabric.Rect 对象的fabric js 创建此功能。

我的问题是，当我将GlobalCompositeOperation 与destination-out 属性一起用于fabric.Rect 对象时。它会在画布上打洞。

简单来说：

当我将globalCompositeOperation 添加到destination-out 时，它也会在画布上打洞。

画布的预期结果：

画布的当前结果：

我制作了一个代码笔用于演示： https://codepen.io/mayurkukadiya0/pen/zYYWOGL?editors=0110

我发现一个 codepen 也可以做同样的事情，但是他们添加了多个画布以在单独的图层中显示图像并在单独的图层中进行矩形和覆盖 有没有办法做到这一点，而无需在画布后面添加外部任何画布或 css 图像？ 这是参考：https://codepen.io/s0nnyv123/pen/eravaN

【参考方案1】：

尝试使用setOverlayImage

这里是demonstration，基于您的代码笔

var canvas = new fabric.Canvas('canvas', preserveObjectStacking: 'true');
canvas.setHeight(300);
canvas.setWidth(300);

canvas.setOverlayImage('https://images.pexels.com/videos/856973/free-video-856973.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500', canvas.renderAll.bind(canvas), 
    top: 0,
    left: 0,
    width: 300,
    height:300,
    lockMovementX: true,
    lockMovementY: true,
    lockRotation: true,
    selectable: false,
   globalCompositeOperation: 'destination-atop',
);

var overlay = new fabric.Rect(
    left: 0,
    top: 0,
    width: 300,
    height: 300,
    fill: '#00000050',
    selectable: false,
    globalCompositeOperation: 'source-over'
);
canvas.add(overlay);

var rect = new fabric.Rect(
     left: 100,
     top: 100,
     width: 100,
     height: 100,
     fill: '#451245',
     globalCompositeOperation: 'destination-out'
);
canvas.add(rect);
canvas.renderAll();