我尝试使用FabricJS实现以下行为
我的方法是创建一个组,用作覆盖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 = {}
答案 0 :(得分:0)
我找到了解决方案。 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)