Thursday 8 July 2021

Fabric JS group selection and scaling messing up individual object position attributes

I am trying to achieve a function so that every object on the canvas scales down in size equally and center them on the canvas (in order to add some space / padding around the canvas)

However as soon as I define the selection variable, the position of the object completely changes, without changing position visually. Most top and left attributes become negative, I found out that their new position represent their distance from the center of the group of objects.

This causes persistent effects on the canvas, when I call selection.addWithUpdate() the bounding box appears in the same place, but the object controls (resize and rotation dots) are still on the incorrect position. I tried using selection.setCoords() to reset the controls, but it had no effect.

When I loop through every object and console.log the obj.left and obj.top I get the mostly negative values, as previously mentioned, i.e. the position of the object controls.

var selection = new fabric.ActiveSelection(canvas.getObjects(), { canvas: canvas });
selection.scaleToHeight(0.8)
selection.center();

canvas.renderAll()
selection.addWithUpdate()
selection.setCoords()

enter image description here



from Fabric JS group selection and scaling messing up individual object position attributes

No comments:

Post a Comment