时间戳

首页 > 解决方案 > 如何使用fabric js仅通过覆盖矩形打孔？

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

问题描述

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

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

我的问题是，当我使用GlobalCompositeOperationwithdestination-out属性来fabric.Rect反对时。它会在画布上打洞。

简单来说：

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

画布的预期结果： 在此处输入图像描述

画布的当前结果： 在此处输入图像描述

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

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

标签： fabricjscropglobalcompositeoperation

解决方案

尝试使用setOverlayImage

这是一个演示，基于您的codepen

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();

推荐阅读