actionscript-3flashapache-flexmatrix-transform

Rotate image around center point of it's container


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(


Solution

  • 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).