Rotation, positioning and changing anchor points

I’m in a situation where I want to rotate a dispay object, but the center of rotation is changing.

From my earlier experience with these kind of things rotation around a certain point is done with a translation/rotatio/translation (back) operation, but as far as I know the only way to change the center of the rotation is to change the anchor point of the object. 

But changing the anchor point will also change the positioning of the object on screen.

Do I have to calculate the repositioning of the object on screen and actually modify the .x and .y of the object to adjust for the repositioned anchor points? Or is there a more elegant/obvious way of doing this?

Hi @runewinse,

There are various ways to handle this, including the usage of “:localToContent()”. See the following function which takes any valid anchor point values (0 to 1 in either case) and then moves and re-shifts the object based on that:

[lua]

local square = display.newRect( 200, 0, 100, 100 )

local function reShiftAnchor()

   local ax = 1

   local ay = 0

   local sx, sy = square:localToContent( square.width*ax, square.height*ay )

   square.anchorX = ax

   square.anchorY = ay

   square.x = sx - (square.width/2)

   square.y = sy - (square.height/2)

   transition.to( square, { time=2000, rotation=360 } )

end

timer.performWithDelay( 500, reShiftAnchor, 1 )

[/lua]

Of course this function could be made more flexible, accepting an object and anchor points passed to it. This is just to exhibit the functionality. Please test it out by changing the values of “ax” and “ay” and see how it all works.

Best regards,

Brent

I have no idea wy this works, but using a very similar function seems to make rotate around the correct point - so thanks!

Hi @runewinse,

There are various ways to handle this, including the usage of “:localToContent()”. See the following function which takes any valid anchor point values (0 to 1 in either case) and then moves and re-shifts the object based on that:

[lua]

local square = display.newRect( 200, 0, 100, 100 )

local function reShiftAnchor()

   local ax = 1

   local ay = 0

   local sx, sy = square:localToContent( square.width*ax, square.height*ay )

   square.anchorX = ax

   square.anchorY = ay

   square.x = sx - (square.width/2)

   square.y = sy - (square.height/2)

   transition.to( square, { time=2000, rotation=360 } )

end

timer.performWithDelay( 500, reShiftAnchor, 1 )

[/lua]

Of course this function could be made more flexible, accepting an object and anchor points passed to it. This is just to exhibit the functionality. Please test it out by changing the values of “ax” and “ay” and see how it all works.

Best regards,

Brent

I have no idea wy this works, but using a very similar function seems to make rotate around the correct point - so thanks!