Flex/ActionScript - obracaj Sprite wokół jego centrum.

Question

Utworzyłem Sprite w Actionscript i renderowałem go do Flex Canvas. Załóżmy:

var fooShape:Sprite = new FooSpriteSubclass(); 

fooCanvas.rawChildren.addChild(myshape); 

//Sprite shape renders on screen 

fooShape.rotation = fooNumber; 

To będzie obracać mój kształt, ale wydaje się obracać wokół górnej lewej punkcie jego kontenera nadrzędnego (płótno).

Jak zmusić Sprite do obracania się wokół własnego punktu centralnego? Oczywiście mogę napisać kod, aby obliczyć obrót, a następnie go ponownie renderować, ale myślę, że musi być wbudowanym sposobem, aby to zrobić, a na pewno nie chce "wymyślić koła" , jeśli to możliwe.

Używam FlexBuilder, a zatem nie mam dostępu do pełnego Flash API.

Dziękuję bardzo!

Answer 1

Jeśli chcesz obrócić się wokół środka, po prostu wyśrodkuj zasób w swoim duszku, ustawiając wewnętrzne zasoby x i y na połowę szerokości i wysokości zasobu. Ta pomyłka wycentruje treść i pozwoli obrócić się wokół punktu środkowego.

Przykładem środków uruchomieniowych ładowany jest następujący:

var loader:Loader = new Loader(): 
var request:URLRequest = new URLRequest(path/to/asset.ext); 
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, _onLoaderComplete); 
loader.load(request); 

private function _onLoaderComplete(e:Event):void 
{ 
    var mc:MovieClip = e.target.content as MovieClip; 
    mc.x = -mc.width * 0.5; 
    mc.y = -mc.height * 0.5; 
    mc.rotation = 90; 
    addChild(mc); 
} 

Answer 2

następujące etapy wymagane do obracania przedmioty w oparciu o punkt odniesienia (stosując Matrix przedmiotu i getBounds): tłumaczenie

1. Matrix (przejście do punktu odniesienia)
2. Obrót macierzy
3. Przesunięcie macierzy (powrót do pierwotnej pozycji)

Na przykład obrócić obiektu o 90 stopni wokół jego centrum:

// Get the matrix of the object 
var matrix:Matrix = myObject.transform.matrix; 

// Get the rect of the object (to know the dimension) 
var rect:Rectangle = myObject.getBounds(parentOfMyObject); 

// Translating the desired reference point (in this case, center) 
matrix.translate(- (rect.left + (rect.width/2)), - (rect.top + (rect.height/2))); 

// Rotation (note: the parameter is in radian) 
matrix.rotate((90/180)*Math.PI); 

// Translating the object back to the original position. 
matrix.translate(rect.left + (rect.width/2), rect.top + (rect.height/2)); 

kluczy stosowanych metod:

• Matrix.rotate
• Matrix.translate
• DisplayObject.getBounds

Answer 3

nie miał dużo szczęścia z innymi przykładami. Ten pracował dla mnie. Użyłem go na UIComponent.

http://www.selikoff.net/2010/03/17/solution-to-flex-image-rotation-and-flipping-around-center/

private static function rotateImage(image:Image, degrees:Number):void { 
// Calculate rotation and offsets 
var radians:Number = degrees * (Math.PI/180.0); 
var offsetWidth:Number = image.contentWidth/2.0; 
var offsetHeight:Number = image.contentHeight/2.0; 

// Perform rotation 
var matrix:Matrix = new Matrix(); 
matrix.translate(-offsetWidth, -offsetHeight); 
matrix.rotate(radians); 
matrix.translate(+offsetWidth, +offsetHeight); 
matrix.concat(image.transform.matrix); 
image.transform.matrix = matrix; 

}

Answer 4

Właściwie musiałem dodać ten kod, aby powyższe rozwiązania dla mnie pracować.

private var _rotateCount = 0; 
var _origginalMatrix:Matrix=new Matrix(); 
......... 
if (_rotateCount++ >= 360/angleDegrees) 
{ 
    myObject.transform.matrix = _origginalMatrix; 
    _rotateCount = 0; 
      return; 
} 

var matrix:Matrix = myObject.transform.matrix; 
.... 

Bez tego po pewnym czasie obrócony obiekt powoli przesuwa się gdzieś na prawo od góry.

Answer 5

Alternatywnym rozwiązaniem jest umieszczenie obiektu wewnątrz innego widoku, przesunięcie go tak, aby środek obrazu znajdował się w lewym górnym rogu pojemnika, a następnie obracanie pojemnika.

import spark.components.*; 

var myContainer:View = new View(); 
var myImage:Image = new Image(); 

myContainer.addElement(myImage); 
myImage.x = myImage.width/-2; 
myImage.y = myImage.height/-2; 

addElement(myContainer); 

myContainer.rotation = whateverAngle; 

Jednym problemem może być to, że szerokość obrazu nie jest znany w momencie jego utworzenia, więc warto znaleźć sposób wokół tego. (Zakodować je lub sprawdzić, czy myImage.preliminaryWidth działa)

Answer 6

/** 
* Rotates the object based on its center 
* Parameters: @obj => the object to rotate 
* @ rotation => angle to rotate 
* */ 
public function RotateAroundCenter(obj:Object, rotation:Number):void 
{ 

var bound:Rectangle = new Rectangle(); 
// get the bounded rectangle of objects 
bound = obj.getRect(this); 

// calculate mid poits 
var midx1:Number = bound.x + bound.width/2; 
var midy1:Number = bound.y + bound.height/2; 

// assign the rotation 
obj.rotation = rotation; 

// assign the previous mid point as (x,y) 
obj.x = midx1; 
obj.y = midy1; 

// get the new bounded rectangle of objects 
bound = obj.getRect(this); 

// calculate new mid points 
var midx2:Number = bound.x + bound.width/2; 
var midy2:Number = bound.y + bound.height/2; 

// calculate differnece between the current mid and (x,y) and subtract 
//it to position the object in the previous bound. 
var diff:Number = midx2 - obj.x; 
obj.x -= diff; 
diff = midy2 - obj.y; 
obj.y -= diff; 
} 

////////////////// 

Zastosowanie:

można użyć powyższej funkcji, jak opisano poniżej,

var img:Canvas = new Canvas() 
RotateAroundCenter(img, rotation); 

Pomoże Ci

REF: http://subashflash.blogspot.in/2010/08/rotation-of-object-based-on-center.html