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

知识点：

1、绘制API的线条、填充样式的控制

2、在合适的代码位置，结束或者开始绘制，重设样式

3、注册点，绕中心点旋转

实例演示：

源代码和说明：

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