Fabric.js来自用户选择的动态Rect clipPath

Question

我尝试使用FabricJS实现以下行为

• 1个带有各种对象的画布。
• 1矩形作为覆盖层，宽度/高度与不透明的画布相同。它“隐藏”其他对象。
• 基于用户选择的N矩形（鼠标：向上/鼠标：向下）

我的方法是创建一个组，用作覆盖Rect的反向clipPath。它可以工作，但是“孔”在第一个之后没有正确定位。每当我添加一个新的时，它的位置都会正确，但其他所有动作都将正确定位。我试图玩originX，originY或absolutePositioned，但我不知道。我想这与组中的中心位置有关，但是我找不到如何在每个添加项上都具有正确的位置。

有帮助吗？

 var zone = new fabric.Rect(Object.assign({ opacity: 1, strokeWidth: 0 }, this.selection))
    // relative to the center of the overlay.
    zone.left = zone.left - (this.canvas.width / 2)
    zone.top = zone.top - (this.canvas.height / 2)
    this.zones.push(zone)
    const clipPath = new fabric.Group(this.zones)
    clipPath.inverted = true
    this.createOverlay({
      clipPath: clipPath
    })
    this.selection = {}

这里举一个例子：https://codepen.io/jraez/pen/vYNQJNE

Answer 1

我找到了解决方案。clipPath中的区域是相对的顶部/左侧，但必须在每次“显示”中重新计算因此，我创建了一个带有翻译的顶部/左侧的克隆图，并将绝对坐标保留在堆栈中。

this.zones.forEach(function(zone) {
      var clone = fabric.util.object.clone(zone)
      clone.set({ 
        left: zone.left - self.canvas.width/2,
        top: zone.top - self.canvas.height/2 
      })
      map.push(clone)
    })
    const clipPath = new fabric.Group(map)