Changing the centre of rotation for a shape

Hi, I’m trying to use a button to rotate an image on click using rotateBy but I need it to rotate around a different centre. Could you please help?

Hi Scott,

You can group the image with a transparent shape, move the transparent shape to change the group center, and rotate the group.

Regards

Hi Toan,
Thanks for the reply, I also wanted the image to be movable, i.e. make it a drag source, and I can’t do this with a group object so it doesn’t quite work for me. Is there a way to use jquery to alter the centre of rotation directly?

Is there a way to group the object and button together and get them to move as a drag source and rotate together as one?

Hi Scott,

To alter the center of rotation, please use the script below

// rotation center point at 30% of object width, 50% of object height
$(prez.object('object_name').node).css('transform-origin', '30% 50%');

However, the HTML5 player assumes that the rotation center is always at the center of the object, so changing it may make other features related to transformation don’t work correctly.

You can group a button and another object, and set the group as a drag source.

Regards

Hi Toan,
I nearly have it working as I want as a dragable group object with 2 buttons that rotate the group object on click. The problem is the drag breaks after rotating the object (or sometimes just after clicking on it). This has nothing to do with the centre of rotation as it breaks with and without that.

Apologies, the drag breaking was due to the slide reaching the end of the timeline with no pause.

1 Like