0

我Image在某个容器中有组件，其clipAndEnableScrolling属性设置为 true。我需要一个静态方法来获取这个Image，旋转角度并Image围绕容器的中心点旋转，而不会丢失任何先前的转换。我创建的最佳方法在几次旋转后会增加错误。

我觉得它必须像这样工作

        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;
    }

但事实并非如此。看起来我无法理解转换是如何工作的（

4

2 回答 2

1

如果你试图围绕它的中心旋转对象，我想你会想要更多这样的：

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;

这里还有一个指向同一个 SO 问题的链接，其中有不同的答案，包括我提供的答案：

Flex/ActionScript - 围绕其中心旋转 Sprite

正如评论中所讨论的，如果您希望围绕一个点（即容器的中心）旋转一个对象，我认为这是一个可以工作的函数：

//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 );
}

然后你就叫它：

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

最后一个参数distance你可以传递任何你喜欢的参数，例如，如果我想要一个图像矢量长度的距离：

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 );
于 2014-01-20T14:19:45.377 回答
0

这是我找到的解决方案：

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);
}

仅使用 90、180 等角度进行测试（我不需要任何其他）。

于 2014-01-22T22:23:19.283 回答