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!