Aligning Objects While Scaling

[iamprich]

I am attempting to align objects to each other on object:scaling. I currently have the functionality working on object:moving, which uses the https://github.com/fabricjs/fabric.js/blob/master/lib/aligning_guidelines.js logic as a starting point.

While scaling, aligning right to right works fine. If I try to align left to left, however, the scaling object keeps moving back and forth.

I've attached a simple example below. The behavior can be replicated by:

• Dragging the left side of the red rectangle so that the left is aligned with the blue rectangle's left.
  • You will see/feel the red rectangle move back and forth rather than "snapping" into place.
• Dragging the right side of the red rectangle so that the right is aligned with the blue rectangle's right.
  • You will see/feel the red rectangle "snap" to align with the blue rectangle.

https://jsfiddle.net/rm94wcbd/4/

If anyone has any ideas on how to get this to work it would be much appreciated!

[asturur]

I have been trying to do this by myself and i did not have much time to finish it.
Something to pinpoing in your approach is that you are using the scaling event but using width as a limit. That will break things i suppose.

i would try to do it using Acoords, this will better scale to situation in which the objects are rotated by 90 degree or smaller angles.

The point is that for each object you likely have the 4 corner that represent 4 snapping points, once you find your snapping point, you calculate how much you are far from that point and increase or decrease scale of the exact amount to get there.

That will give you some code that will work better in more generic situations