javascript - Fabric.js "reverse"和 "layered"剪裁/剪裁

Question

在this question的回答中, this fiddle进行“正常”裁剪，即灰色区域矩形外的图像将被裁剪，只保留灰色矩形区域内的图像。

“正常”裁剪的关键代码使用函数“clipTo”:

object.clipTo = function (ctx) {
    ctx.rect(
        -(eWidth / 2) + left, 
        -(eHeight / 2) + top, 
        parseInt(width * eScaleX), 
        parseInt(eScaleY * height)
    );
} 

我想要实现的是进行“reverse”裁剪，即灰色矩形内的图像将被裁剪，只保留灰色矩形区域外的图像。

这是第一部分。第二部分是做“layered”裁剪，即具有较低z-index值的对象(object A)将被裁剪对象 (object B) 具有较高的 z-index 值并与 object A 重叠。对象 A 的重叠区域将被裁剪。

这可行吗？我花了很多时间，但找不到解决方案，也没有自己实现。

提前致谢。

Answer 1

如本例所示使用反向剪辑路径组

      let clip_rect = new fabric.Rect({ left: 220, top: 150, width: 70, height: 50 });
      let g = new fabric.Group([clip_rect]);
      g.inverted = true
      g.absolutePositioned = true

      object.clipTo = g