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

Я создал Sprite в ActionScript и передал его в Flex Canvas. Пусть:

var fooShape:Sprite = new FooSpriteSubclass();

fooCanvas.rawChildren.addChild(myshape);

//Sprite shape renders on screen

fooShape.rotation = fooNumber;

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

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

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

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

Ответы

Ответ 1

Для поворота объектов на основе контрольной точки требуются следующие шаги (используя Matrix object и getBounds):

  • Матричный перевод (переход к исходной точке)
  • Вращение матрицы
  • Матричный перевод (назад в исходное положение)


Например, чтобы повернуть объект на 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));




Ключевые методы:

Ответ 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;

}

Ответ 3

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

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

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

Ответ 4

Если вы хотите повернуть вокруг центра, просто центрируйте актив внутри вашего спрайта, установив внутренние активы 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);
}

Ответ 5

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

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;

Одна проблема может заключаться в том, что ширина изображения не известна в момент ее создания, поэтому вам может понадобиться найти способ обойти это. (Hardcode это или посмотрите, работает ли myImage.preliminary ReadWidth)

Ответ 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;
}

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

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

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

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

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

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