rotating centered content

Question

Ok, so I've been trying to get this concept to work for the day now and have had zero luck. I am not so good with math, so any help will be appreciated. I am trying to rotate a centered container from it's center. The problem with this code is when I use the rotatePicture method, it doesn't rotate from the center, instead it rotates from the box's top-left corner. Here's the code...

 import mx.effects.Rotate;

 private function init():void
 {
  calculateCoordinates();
 }

 private function rotateBox():void
 {
  var m:Matrix            = myBox.transform.matrix;
  var centerX:Number        = myBox.width / 2;
  var centerY:Number        = myBox.height / 2;

  var centerPoint:Point    = new Point(centerX, centerY);
  var transformPoint:Point= m.transformPoint(centerPoint);


  m.translate(-transformPoint.x, -transformPoint.y);
  m.rotate(90 * Math.PI / 180);

  m.translate(transformPoint.x, transformPoint.y);

  myBox.transform.matrix = m;   

  this.callLater(calculateCoordinates);
  //calculateCoordinates();

 }

 private function calculateCoordinates():void
 {
  var x : Number = (myBox.parent.width - myBox.width) / 2;
     x = x < 0 ? 0 : x;
     var y : Number = (myBox.parent.height - myBox.height) / 2;
     y = y < 0 ? 0 : y;
     myBox.move(x, y);
 }

Answer 1

Ok, this was a bit tricky and i'm working out a couple of details, but in case anyone had a similar issue, I found the general answer. Just took a movie break to refresh the brain...

I had to place a variable for how many turns the canvas had rotated which was easy since I was restricting the degrees to only 90. Then I place in a switch statement that tested the turns variable and recalculated the (x,y) coordinates based off of the turns. Since I knew that the Rotate class would create a cooler effect and end with the same result, I ended up using that instead.

Cheers!

Answer 2

personally, i'd wrap the container in another sprite, position it so its center is at (0,0) in that sprites coordinate space, and then just rotate the sprite ... it's simple and robust ...

greetz

back2dos

Answer 3

Hi Adrian, I don't know what your background is, but in my experience this is a classic case of "out-thinking yourself".

You've written quite a bit of code to do something that is actually native to the Flash display API's.

Since you seem to be using Flex I'll just tell you that the simple way to achieve this is to dynamically reposition your display clip contents so that the center of your contents is at the 0,0 point of your clip.

This gets harder the more content you have, but if you just have something like an image or a button or what have you, it's really easy to just calculate the height and width, then divide by 2 and subtract.

Then the rotation property will work just fine.

In Flash it's even easier because you can just make a new clip, bind your class to the clip, and place all yours contents in the Flash authoring tool positioned properly for rotation to work as expected.

Yeah, what Back2Dos said.