Flex / ActionScript - вращать Sprite вокруг его центра

Question

Я создал Sprite в Actionscript и отобразил его на Flex Canvas. Предположим:

var fooShape:Sprite = new FooSpriteSubclass();

fooCanvas.rawChildren.addChild(myshape);

//Sprite shape renders on screen

fooShape.rotation = fooNumber;

Это повернет мою форму, но, кажется, повернет ее вокруг левого верхнего угла точка его родительского контейнера (холст).

Как я могу заставить Спрайт вращаться вокруг своей центральной точки? Я мог бы, очевидно, написать код для расчета вращения, а затем сделать его заново, но я думаю, что есть должен быть встроенным способом сделать это, и, конечно, не хотят «изобретать велосипед» если возможно.

Я использую FlexBuilder и поэтому не имею доступа к полной версии Flash API.

Большое спасибо!

Answer 1

Следующие шаги, необходимые для вращения объектов на основе опорной точки (с использованием * * +1001 Matrix объекта и GetBounds):

1. Матричный перевод (перемещение в исходную точку)
2. Матрица вращения
3. Матричный перевод (в исходное положение)

Например, чтобы повернуть объект на 90 градусов вокруг его центра:

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

Ключевые используемые методы:

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

Answer 2

Не повезло с другими примерами. Этот работал для меня. Я использовал его на 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 3

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

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

Использование:

Вы можете использовать вышеуказанную функцию, как описано ниже,

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

Это вам поможет

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

Answer 4

Альтернативное решение - поместить ваш объект в другое представление, переместить его так, чтобы центр изображения находился в верхнем левом углу контейнера, а затем повернуть контейнер.

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;

Одной из проблем может быть то, что ширина изображения неизвестна в момент его создания, поэтому вы можете захотеть найти способ обойти это. (Зашифруйте его или посмотрите, работает ли myImage.preditionalWidth)

Answer 5

На самом деле мне пришлось добавить этот код, чтобы вышеуказанные решения работали для меня.

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

Без этого через некоторое время повернутый объект медленно перемещается куда-то прямо вверху.

Answer 6

Если вы хотите вращаться вокруг центра, просто отцентрируйте ресурс внутри вашего спрайта, установив для внутренних активов x и y половину ширины и высоты ресурса. Это помехи центрируют ваш контент и позволяют ему вращаться вокруг центральной точки.

Пример загруженных ресурсов во время выполнения выглядит следующим образом:

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