旋转精灵从其原始位置移动精灵

Question

我正在对精灵进行简单的旋转，但是有一种奇怪的行为，即精灵不会绕着它的左上角旋转。我想我正在测试类的左上角而不是精灵子。我想围绕它的左上角旋转矩形（有点像钟针）。代码很短，所以我会让代码+图片解释我的问题：

package
{
    import flash.display.Sprite;

    public class test extends Sprite
    {
        public function test()
        {
            var mySprite:Sprite = new Sprite();
            mySprite.graphics.beginFill(0x000000);
            mySprite.graphics.drawRect(100,100,6,120);
            mySprite.graphics.endFill();
            this.addChild(mySprite);
            mySprite.rotation = 45;
        }

    }
}

看起来太简单了搞砸了，这里结果很好。红线在主键上方供参考。第一张图片我设置mySprite.rotation=0，第二张是上面显示的代码：

我已经阅读了很多关于在固定点附近旋转的内容，我尝试使用动画片段代替精灵，我甚至复制粘贴tutorial on rotation并且没有任何效果。为什么会出现这种情况？我该如何解决？

编辑：谢谢大家，您的所有建议都以不同的方式帮助了我，所有这些都是正确的，所以+1，我只选择我在代码中选择使用的解决方案。

Answer 1

如果要从中心旋转，请尝试以下操作：

var mySprite:Sprite = new Sprite();
mySprite.x = mySprite.y = 100;
mySprite.graphics.beginFill(0x000000);
mySprite.graphics.drawRect(-3,-60,6,120);
mySprite.graphics.endFill();
this.addChild(mySprite);
mySprite.rotation = 45;

Answer 2

精灵在左上角旋转，但你左上角没有任何图形。条形图呈现在（100,100）中。试试这个：

var mySprite:Sprite = new Sprite();
mySprite.graphics.beginFill(0x000000);
mySprite.graphics.drawRect(0,0,6,120); // render in 0, 0
mySprite.graphics.endFill();
mySprite.x = 100; // move it 
mySprite.y = 100;
this.addChild(mySprite);
mySprite.rotation = 45;

Answer 3

您正在围绕mySprites注册点旋转矩形，该点与其x / y坐标（当前设置为0,0）相同。您可以绘制矩形，然后通过设置精灵xy。

将其移动到正确的位置

var mySprite:Sprite = new Sprite();
mySprite.graphics.beginFill(0x000000);
mySprite.graphics.drawRect(-3, -60, 6, 120);
mySprite.graphics.endFill();
mySprite.x = 100;
mySprite.y = 100;
addChild(mySprite);
mySprite.rotation = 45;

那应该有用。要查看问题是如何发生的，请编译以下代码，您将能够看到原始条的移动。

for (var i:int = 0; i <= 45; i+=5) {
     var mySprite:Sprite = new Sprite();
     mySprite.graphics.beginFill(0x000000,0.5);
     mySprite.graphics.drawRect(100, 100, 6, 120);
     mySprite.graphics.endFill();
     addChild(mySprite);
     mySprite.rotation = i;
}