Flex/ActionScript - faire pivoter Sprite autour de son centre

Question

J'ai créé un Sprite dans Actionscript et l'ai rendu sur une toile Flex. On suppose:

var fooShape:Sprite = new FooSpriteSubclass(); 

fooCanvas.rawChildren.addChild(myshape); 

//Sprite shape renders on screen 

fooShape.rotation = fooNumber; 

Cela tourne ma forme, mais semble tourner autour du point supérieur gauche de son conteneur parent (la toile).

Comment puis-je forcer le Sprite à tourner autour de son propre point central? Je pourrais évidemment écrire le code pour calculer la rotation, et ensuite le rendre à nouveau, mais je pense que doit être un moyen intégré de le faire, et certainement ne pas vouloir «réinventer la roue» si possible. J'utilise FlexBuilder et je n'ai donc pas accès à l'API Flash complète.

Merci beaucoup!

Answer 1

Si vous souhaitez effectuer une rotation autour du centre, centrez simplement l'actif dans votre sprite en définissant les ressources internes x et y sur la moitié de la largeur et de la hauteur de l'actif. Cette opération centre votre contenu et lui permet de pivoter autour d'un point central.

Un exemple d'actif chargé d'exécution est le suivant:

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

Les étapes suivantes sont nécessaires pour faire tourner les objets en fonction d'un point de référence (en utilisant l'objet Matrix et getBounds):

1. traduction Matrix (déplacement au point de référence)
2. Rotation de la matrice
3. Traduction de la matrice (retour à la position d'origine)

Par exemple, pour faire pivoter un objet de 90 degrés autour de son centre:

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

Les principales méthodes utilisées:

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

Answer 3

n'a pas eu beaucoup de chance avec les autres exemples. Celui-ci a travaillé pour moi. Je l'ai utilisé sur un 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

En fait, je dû ajouter ce code pour développer des solutions ci-dessus fonctionnent pour moi.

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

Sans que, après un long moment, l'objet pivoté se déplace lentement vers le haut.

Answer 5

Une solution alternative est de mettre votre objet dans un autre, orientez pour que le centre de l'image est au coin supérieur gauche du conteneur, puis tourner le récipient.

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; 

Une question peut-être que la largeur de l'image ne sait pas au moment où il est créé, vous voudrez peut-être trouver un moyen de contourner cela. (Il en dur les, ou si myImage.preliminaryWidth fonctionne)

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

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

Utilisation:

vous pouvez utiliser la fonction ci-dessus comme décrit ci-dessous,

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

Cela vous aidera à

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