動作3：圍繞內部點旋轉多個形狀

Question

我在AS3上遇到了麻煩，必須將其用於我的一個小型研究項目。

AS3項目將創建許多隨機放置的正方形，它們都將圍繞其中心點旋轉。

我設法弄清楚了如何使用此便捷的演練在內部對其進行旋轉。

但是我在將這種方法應用於在for循環中使用隨機選擇的階段點創建的所有正方形時遇到了麻煩。 只有第一個創建的對象會旋轉

這是有問題的代碼：

for(var i=0; i<10; i++)
{
    var square:Shape = new Shape();
    this.addChild(square);
    var posX = Math.floor(Math.random() * stage.stageWidth) + 50;
    var posY = Math.floor(Math.random() * stage.stageHeight) + 50;
    square.x=posX;
    square.y=posY;
    var curSquareAng:Number=0;
    var squareRotCenter:Point=new Point(0,0);
    drawShapes();
    var squareMat:Matrix=square.transform.matrix.clone();
}

this.addEventListener(Event.ENTER_FRAME, onEnter);

function onEnter(e:Event):void {
    curSquareAng = (curSquareAng+2)%360;
    rotateSquare(curSquareAng);
}

function rotateSquare(deg:Number):void {
    var mat:Matrix= squareMat.clone();  
    MatrixTransformer.rotateAroundInternalPoint(mat,squareRotCenter.x, squareRotCenter.y, deg);
    square.transform.matrix = mat;
}

我意識到我可能必須為每個正方形的初始中心點創建一個數組，然后遍歷它們。 但是，我完全不知道該怎么做。 您可能會告訴我我不熟悉AS3，並且非常感謝您可以為這位初學者提供幫助。 ：P

Answer 1

您需要基於形狀創建自己的類，然后將其充滿表示旋轉中心點，當前角度以及其他任何您希望正方形包含的屬性，然后提供類update方法來完成您的工作僅在onEnter函數中onEnter 。 然后，您將可以更輕松地控制正方形的功能。 這種技術稱為“封裝”。

附帶一提，如果您希望正方形圍繞（0,0）的內部點旋轉，則可以設置其rotation屬性以實現所需的效果。 對於其他方面，應使用演練或其等效項。

public class Square extends Shape {
    public var rotationCenter:Point=new Point();
    private var currentAngle:Number=0;
    public var rotationSpeed:Number=2; // degrees per frame
    private var baseMatrix:Matrix;
    public function Square() {
        // draw the shape on "this.graphics"
        this.graphics.beginFill(0xffff00,1);
        this.graphics.moveTo(-20,-20);
        this.graphics.lineTo(20,-20);
        this.graphics.lineTo(20,20);
        this.graphics.lineTo(20,-20);
        this.graphics.lineTo(-20,-20);
        this.graphics.endFill();
        // if not set in declaration, set internal vars
        baseMatrix=this.transform.matrix; // likely identity matrix, but let's initialize anyway
    }
    public function storeMatrix():void {
        // you are positioning a square after you create it, so probably you want its new location to be transformed
        // that one's matrix will no longer be an identity, so go capture
        baseMatrix=this.transform.matrix;
    }
    public function update():void {
        // should be called once per frame
        currentAngle=(currentAngle+rotationSpeed)%360;
        var mat:Matrix= baseMatrix.clone();
        MatrixTransformer.rotateAroundInternalPoint(mat,rotationCenter.x, rotationCenter.y, currentAngle);
        this.transform.matrix = mat;
    }
}

現在，您將必須維護一組正方形以使其分別旋轉：

var squares:Array=[];
for (var i:int=0;i<10;i++) {
    var square:Square=new Square();
    var posX = Math.floor(Math.random() * stage.stageWidth) + 50;
    var posY = Math.floor(Math.random() * stage.stageHeight) + 50;
    square.x=posX;
    square.y=posY;
    // after you position, give it a rotation point
    square.rotationCenter.x=Math.random()*40-20;
    square.rotationCenter.y=Math.random()*40-20; // -20 to 20, should do for this example
    // now fix the position so your square will know that it should rotate 
    // its *current* transform matrix
    square.storeMatrix();
    // even if it's actually unchanged by changing X or Y
    // also, should you desire to scale some square, you should do that prior to calling this
    // now add the square to an array
    squares.push(square);
}
addEventListener(Event.ENTER_FRAME,onEnter);
function onEnter(e:Event):void {
    for (var i:int=0;i<squares.length;i++) squares[i].update();
    // simple, isn't it? Each square will know what to do.
}

Answer 2

沒關系。 感謝Vesper使我走上正確的道路，感謝您的投入（不一定通過您的方式，但我的發言可以幫助我到達目的地），我設法解決了我的問題。

我想通過矩陣路徑使它變得有些復雜，而是使用形狀數組在正方形中循環並增加旋轉。 我來到的解決方案有點簡單，但是可以完成工作。

    public var rotationSpeed:Number=2; // degrees per frame
    public var square:Array = new Array(  );
    public function Square() {

        for (var i:int=0;i<10;i++) {
            square[i] = new Shape();
            var posX = Math.floor(Math.random() * stage.stageWidth) + 50;
            var posY = Math.floor(Math.random() * stage.stageHeight) + 50;
            square[i].graphics.lineStyle();
            var rgb = Math.random() * 0xFFFFFF;
            square[i].graphics.beginFill(rgb);
            // -50 determines where the spin will center from.
            square[i].graphics.drawRect(-50,-50,100,100);
            square[i].graphics.endFill();
            square[i].x = posX;
            square[i].y = posY;
            addChild(square[i]);
        }
        addEventListener(Event.ENTER_FRAME,onEnter);
    }

    private function onEnter(e:Event):void {
        for (var i:int=0; i < square.length; i++) {
            getChildAt(i).rotation += rotationSpeed;
        }
    }