圍繞其容器的中心點旋轉圖像

Question

我有一個容器內的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; 
    } 

但事實並非如此。貌似我不明白轉型的工作原理（

Answer 1

這裏的解決方案，我發現：

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只有像90,180等角度（我不需要任何其他）。

Answer 2

如果你想圍繞它的中心旋轉的對象，我想你會希望有更多像這樣一些：

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; 

而且這裏是一個鏈接

Flex/ActionScript - rotate Sprite around its center

正如意見，如果你正在尋找繞一個點的對象（也就是你的容器的中心）的討論，這裏是：相同的有不同的答案，包括我提供一個SO質疑一個函數我想會的工作：

//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，圖像，新的點（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);