Question

我在Actionscript中创建了一个Sprite并将其渲染为Flex Canvas。假设：

var fooShape:Sprite = new FooSpriteSubclass();

fooCanvas.rawChildren.addChild(myshape);

//Sprite shape renders on screen

fooShape.rotation = fooNumber;

这将旋转我的形状，但似乎围绕左上角旋转其父容器（画布）的点。

如何强制Sprite绕自己的中心点旋转？我显然可以编写代码来计算旋转，然后让它重新渲染，但我想在那里必须是内置的方式来做到这一点，当然不想'重新发明轮子' 如果可能的话。

我使用的是FlexBuilder，因此无法访问完整的Flash API。

非常感谢！

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

使用的关键方法：

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

实际上我必须添加此代码才能使上述解决方案适用于我。

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

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

一个问题可能是图像的宽度在创建时并不知道，因此您可能希望找到解决方法。（硬编码，或查看myImage.preliminWidth是否有效）

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

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

用法：

您可以使用上述功能，

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

这会对你有所帮助

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

Flex / ActionScript - 围绕其中心旋转Sprite

6 个答案: