CODEWITHSUNDEEP
fabricjs
JRaez
JRaez

Reputation: 1

Fabric.js dynamic Rect clipPath from user selection

I try to achieve the following behavior with FabricJS

My approach was to create a group that acts as an inverted clipPath for the overlay Rect. It works but "holes" are not positioned correctly after the first one. Each time I add a new one, it's correctly positioned but all other moves. I tried to play with originX, originY or absolutePositioned but I can't figure out. I guess it's related to the center positioning in a group but I don't find how to have the correct position on each add.

Any help?

 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 = {}

Here an example: https://codepen.io/jraez/pen/vYNQJNE

Upvotes: 0

Views: 1441

Answers (1)

JRaez
JRaez

Reputation: 1

I found myself the solution. The zone in the clipPath as relative top/left but it has to be recalculated on each 'reveal' So I create a map of clones with translated top/left and keep in the stack the absolute coordinates.

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)

Upvotes: 0

Related Questions