Question

i wrote the following code for drawing a rotate rectangle

var s:UIComponent = new UIComponent();    
s.graphics.lineStyle(1, 0x0000FF);
s.graphics.drawRect(50, 50, 200, 200);
s.rotation = 30;
template.addChild(s);

where template is a canvas. Its rotate nicely but the problem is the position is not in right place. i.e. it is not in (50,50) after rotate. How can i solve this problem?

Thanks in advance.

Answer 1

What you’re seeing is the default rotation around the origin in Flex (in your case the X,Y coordinates of 50,50) I am assuming that you want to rotate around the center (as I recently had to do). There is the jury rig way to do it, by adjusting the origin point based on rotation angle. Then there is the rotate effect:

import mx.effects.Rotate;

var s:UIComponent = new UIComponent();    
var rotator:Rotate = new Rotate(s);

s.graphics.lineStyle(1, 0x0000FF);
s.graphics.drawRect(50, 50, 200, 200);

rotator.angleFrom = 0;
rotator.angleTo = 30;
rotator.originX = s.width/2;
rotator.originY = s.height/2;
template.addChild(s);
rotator.play();

Now I’ve noticed some problems with this that required me to set the width and height of the rotated object again after the play() method, but other than that I get the ideal rotation situation.

Another downside to this is that it’s an effect, which means it visually rotates the object. I will post back when I correct that, if you don’t want to see the object rotate.

The Answer is duration
just by adding rotator.duration = 1 before play it happens so quick the user won’t see it. 1 being 1 millisecond. I tried 0, but that resulted in no rotation occurring. Obviously if you want to see the effect in action you can increase that length of time by using any value in milliseconds.