用AS3绘图API来画一个旋转的太极图

知识点：

实例演示：

源代码和说明：

package
{
import flash.display.Graphics;
import flash.display.Shape;
import flash.display.Sprite;
import flash.events.Event;
import flash.geom.Point;

[SWF( frameRate = "60", width = "960", height = "600", backgroundColor = "0xcccccc" )]
public class TaiChi extends Sprite
{
private var container:Sprite; // 实现绕中心点旋转的容器
private var shape:Shape; // 太极图

public function TaiChi()
{
container = new Sprite();
addChild( container );
shape = new Shape();
container.addChild( shape );

draw( 480, 300, 200 );
animat();
}

public function draw( dx:Number, dy:Number, radius:Number ):void
{
shape.x = -radius;
shape.y = -radius;
container.x = dx;
container.y = dy;

shape.cacheAsBitmap = true;
var arcRadius:Number; // 圆弧半径
var smlRadius:Number; // 小圆半径
var center:Point = new Point( radius + 0, radius + 0 );

// 设置底层填充颜色（大圆背景色，也是一半“逗号形状”的背景色）
shape.graphics.beginFill( 0xffffff );

// 绘制一个大圆
drawArc( shape.graphics, center.x, center.y, radius, 0, 360 );

// 我们只需要填充大圆背景，然后去除填充，防止路径自动闭合
shape.graphics.endFill();

// 弧半径
arcRadius = radius >> 1;

// 小圆半径（小圆半径以弧半径一半，圆心正好位于弧线的圆心上）
smlRadius = arcRadius * 0.375;

// 填充半圆
shape.graphics.beginFill( 0x000000 );
drawArc( shape.graphics, center.x, center.y, radius, 0, 180 );

shape.graphics.beginFill( 0xffffff );
drawArc( shape.graphics, center.x, center.y, radius, 180, 360 );

// 左边的圆弧
shape.graphics.beginFill( 0x000000 );
drawArc( shape.graphics, center.x - arcRadius, center.y, arcRadius, 180, 360 );

// 右边的圆弧
shape.graphics.beginFill( 0xffffff );
drawArc( shape.graphics, center.x + arcRadius, center.y, arcRadius, 0, 180 );

// 两个小圆
shape.graphics.beginFill( 0x000000 );
shape.graphics.drawCircle( center.x + arcRadius, center.y, smlRadius );
shape.graphics.beginFill( 0xffffff );
shape.graphics.drawCircle( center.x - arcRadius, center.y, smlRadius );

// 结束绘制
shape.graphics.endFill();

// 大圆的线条
shape.graphics.lineStyle( 5, 0x000000, 1.0 );

// 绘制一个大圆，两个圆弧，两个小圆
drawArc( shape.graphics, center.x, center.y, radius, 0, 360 );
}

/**
* 绘制弧线
* @param g 绘图接口
* @param dx 弧心的X坐标
* @param dy 弧心的Y坐标
* @param radius 弧半径
* @param startAngle 开始角度
* @param endAngle 结束角度
*/
public function drawArc( g:Graphics, dx:Number, dy:Number, radius:Number, startAngle:Number, endAngle:Number ):void
{
if( startAngle == endAngle )
return;

for( var i:int = startAngle; i <= endAngle; i++ )
{
var px:Number = dx + radius * Math.cos( -i * Math.PI / 180 );
var py:Number = dy + radius * Math.sin( -i * Math.PI / 180 );

if( i == startAngle )
{
g.moveTo( px, py );
}

g.lineTo( px, py );
}
}

public function animat():void
{
addEventListener( Event.ENTER_FRAME, enterFrameHandler );
}

private function enterFrameHandler( event:Event ):void
{
container.rotation -= 5;
}
}
}