圍繞中心旋轉flex圖形對象

Question

我試圖創建一個旋轉的弧形動畫。 即使嘗試了所有這些示例，我也無法圍繞中心旋轉它。 它圍繞左上角旋轉。

private function init():void
        {
            var hgroup:Group=new Group();
            this.addElement(hgroup);

            arc1=new Graphic();
            arc1.graphics.lineStyle(12,0xff0000,1,false,"normal",CapsStyle.SQUARE);
            draw_arc(arc1,CENTER,CENTER,70,14,288,1);

            hgroup.addElement(arc1);

            var matrix:Matrix = arc1.transform.matrix; 
            var rect:Rectangle = arc1.getBounds(arc1.parent); 
            matrix.translate(- (rect.left + (rect.width/2)), - (rect.top + (rect.height/2))); 
            matrix.rotate((90/180)*Math.PI); 
            matrix.translate(rect.left + (rect.width/2), rect.top + (rect.height/2));

            var rot:Rotate = new Rotate();
            rot.angleBy = 360;
            rot.duration = 1000;
            rot.target = arc1;
            rot.play();

        }

        public function draw_arc(movieclip:Sprite,center_x:Number,center_y:Number,radius:Number,angle_from:Number,angle_to:Number,precision:Number):void {
            var angle_diff:Number=angle_to-angle_from;
            var steps:Number=Math.round(angle_diff*precision);
            var angle:Number=angle_from;
            var px:Number=center_x+radius*Math.cos(angle*deg_to_rad);
            var py:Number=center_y+radius*Math.sin(angle*deg_to_rad);
            movieclip.graphics.moveTo(px,py);
            for (var i:Number=1; i<=steps; i++) {
                angle=angle_from+angle_diff/steps*i;
                movieclip.graphics.lineTo(center_x+radius*Math.cos(angle*deg_to_rad),center_y+radius*Math.sin(angle*deg_to_rad));
            }
        }

Answer 1

您需要此屬性：

rot.autoCenterTransform="true"

請參閱文檔底部的示例： http : //help.adobe.com/zh_CN/FlashPlatform/reference/actionscript/3/spark/effects/Rotate.html

Answer 2

我遇到了類似的問題（帶有旋轉的箭頭），並按以下方式修復了它：

<s:Group width="0" height="0" verticalCenter="0" right="14">
    <s:Graphic id="arrow" rotation="90" rotation.selectedStates="0">
        <s:Path data="M 0 0 L 5 5 L 0 10 Z" left="-2.5" top="-5">
            <s:fill>
                <s:SolidColor id="arrowFill"/>
            </s:fill>
        </s:Path>
    </s:Graphic>
</s:Group>

容器Group的大小設置為0因為它僅用作其包含的圖形的定位點。 該Group的位置是旋轉中心點。 Graphic的Path的位置應使其錨點位於其中心（即，寬度為5px，高度為10px，因此將其重新定位為左側2.5px，頂部5px）。

實際的旋轉通過完成States和Transformations在這里，而是一個Effect做同樣的事情。

Answer 3

我以前使用過這種解決方案； 它運作良好，非常簡單：

http://www.chadupton.com/blog/2008/02/rotate-on-center-in-adobe-flex/

Answer 4

要在中心旋轉圖像，您必須指定此屬性

rot.autoCenterTransform="true";
rot.applyChangesPostLayout = false;