Rotate image around center point of it's container

Question

I have Image component inside some container with clipAndEnableScrolling property set to true. I need a static method which gets this Image, rotation angle and rotates Image around center point of container without loosing any previous transformations. The best method I've created adds error after few rotations.

I thing it must work like this

        public static function rotateImageAroundCenterOfViewPort(image:Image, value:int):void
    {
        // Calculate rotation and shifts
        var bounds:Rectangle = image.getBounds(image.parent);
        var angle:Number = value - image.rotation;
        var radians:Number = angle * (Math.PI / 180.0);
        var shiftByX:Number = image.parent.width / 2 - bounds.x;
        var shiftByY:Number = image.parent.height / 2 - bounds.y;
        // Perform rotation
        var matrix:Matrix = new Matrix();
        matrix.translate(-shiftByX, -shiftByY);
        matrix.rotate(radians);
        matrix.translate(+shiftByX, +shiftByY);
        matrix.concat(image.transform.matrix);
        image.transform.matrix = matrix;
    }

but it doesn't. Looks like I can't understand how transformation works(

Answer 1

Here's the solution I've found:

public static function rotateImageAroundCenterOfViewPort(image:Image, value:int):void
{
    // Calculate rotation and shifts
    var center:Point = new Point(image.parent.width / 2, image.parent.height / 2);
    center = image.parent.localToGlobal(center);
    center = image.globalToLocal(center);
    var angle:Number = value - image.rotation;
    var radians:Number = angle * (Math.PI / 180.0);
    var shiftByX:Number = center.x;
    var shiftByY:Number = center.y;
    // Perform rotation
    var matrix:Matrix = new Matrix();           
    matrix.translate(-shiftByX, -shiftByY);
    matrix.rotate(radians);
    matrix.translate(+shiftByX, +shiftByY);
    matrix.concat(image.transform.matrix);
    image.transform.matrix = matrix;
    image.rotation = Math.round(image.rotation);
}

Teste only with the angles like 90, 180 etc. (I don't need any else).

Answer 2

If you are trying to rotate the object around it's center, I think you'll want some more like this:

var matrix:Matrix = image.transform.matrix;
var rect:Rectangle = image.getBounds( insertParentObject );
//translate matrix to center
matrix.translate(- ( rect.left + ( rect.width/2 ) ), - ( rect.top + ( rect.height/2 ) ) ); 

matrix.rotate(radians); 

//translate back
matrix.translate(rect.left + ( rect.width/2 ), rect.top + ( rect.height/2 ) ); 
image.transform.matrix = matrix;

Also here is a link to the same SO question with varying answers including the one I provided:

Flex/ActionScript - rotate Sprite around its center

As discussed in the comments if you are looking to rotate an object around a point (that is the center of your container), here's a function that I think would work:

//pass rotateAmount as the angle you want to rotate in degrees
private function rotateAround( rotateAmount:Number, obj:DisplayObject, origin:Point, distance:Number = 100 ):void {
    var radians:Number = rotateAmount * Math.PI / 180;
    obj.x = origin.x + distance * Math.cos( radians );
    obj.y = origin.y + distance * Math.sin( radians );
}

Then you just call it:

rotateAround( rotateAmount, image, new Point( container.width/2, container.height/2 ) );

The last parameter distance you can pass whatever you like, so for example if I wanted a distance of the image vector length:

var dx:Number = spr.x - stage.stageWidth/2;
var dy:Number = spr.y - stage.stageHeight/2;
var dist:Number = Math.sqrt(dx * dx + dy * dy);
rotateAround( rotateAmount, image, new Point( container.width/2, container.height/2 ), dist );