Strategies for off-centered object rotation

[theredsox]

Peeking at the source code for rotate(), I turned that into an animation. Then wanted to tweak it to support off-centered rotation. I came up with this JSFiddle. It takes a rectangle, an offset, and for every click of the button rotates the rectangle 90 degrees around the initial offset point. I'm curious:

• Is there a better way to do this than calculating the center point of the rectangle for each angle the animation triggers on?
• Is there an offset property I could set, like rotatingPointOffset, but for programmatic rotation?
• Can transformations handle it? Looking at the boss/minion tutorial, they rotate around the boss without doing raw calculations. Though I don't understand that magic yet to adapt it for my case.
• An old SO from 2018 describes using object.centeredRotation = false and transformation stuff. In the latest version, would it be something like call object.calcTransformMatrix(), change the angle in the matrix, and then call something to pull out a new center point to set in the animation onchange?

What I have looks like it will work, so not a huge deal, but guessing there is a better way and would like to learn. Any recommendations are appreciated.

[theredsox]

Ok, so actually implementing the Fiddle solution in my app shows that it doesn't fully work. Hitting the same issue as other less elegant approaches I've tried. Certain pivot offsets don't adjust properly for the whole rotation. See Fiddle for pivot offset (-50, -25). Often when they don't work fully, 2 of the 4 rotation positions seem off. Is it a geometry thing I'm screwing up?

I feel like the issue lies in lines 44-56. Too simplistic for every combo of center position, pivot position, and angle. Because top and left change perspectives as the object rotates, it is confusing for me to determine what change is needed in that area. Any ideas?

[theredsox]

Continuing with the fun, the Fiddle was still not working in certain cases like offset (50, 25) 😢. Two more changes 1) Wrong equation in determineOffsetAngle(), needed atan2() to get an angle between 0 and 360. 2) I've been confusing the center of the fabric object with the center of the arc. So was feeding the points into the equations in the wrong order.

Here's a set of working Fiddle tests covering a point in each quadrant:
Offset (50, 25)
Offset (-50, -25)
Offset (50, -25)
Offset (-50, 25)

So hopefully this at least functions when fed into my game 🤞.

[asturur]

Hi @theredsox rotation is a mix of changing angle and changing the position of the object.
originX and originY will go away at some point ( next major version read here: #9736 )
https://jsfiddle.net/asturur/o1w5uczn/7/
This fiddle should be easily translatable to your current fabricjs version and is very simple compared to yours and does not use target.originX and target.originY.

Regarding your question if transformations can hanlde this, i do not think so, the transformation code is so much dependent by continuous events like mouse, triggering them programmatically is probably unnecessary complex.

[asturur]

This is made thinking at the offset point relative to the rect center, but if the offset point is absolute on the canvas and external to the rect it works anyway, just some extra math is required

[theredsox]

Hi @asturur, thanks for your example. Much easier strategy, acting upon the object relatively. I like that it makes the current angle in the animation irrelevant. My offset/pivot point is always internal to the object so that should work as-is.

[asturur]

even if it was external would work, until is an offset it will work.
If you want to rotate around point 5, 5 on the canvas indipendently from where the object is ( for example ) , then you have to do some different work