flash 绘图API：太极

前几天想起了一个图案，于是有了一个灵感，把笔记录起来，但是遇到一些问题不能实现到太极图的绘制，请教我大学的同学，他用c++ 绘制一次我看，终于实现了一个太极图的绘制。开始的时候，以下面的图作为绘制，采取几个圆绘制就可以实现到，但是发现填充颜色的时候出现问题，不得不得改变一个思路，同学的讲解之后，原来技巧就是在将大圆变成两边的扇形，从这个得到一个启发，运用扇形绘制得到一半的圆。那么解决到填充图像的问题。关键地方实现到一个扇形。通过Api绘制。但是as3 自带API并没有绘制扇形的方法，经过网上查询资料丰富，顺手牵羊修改了一下。

初始的思路要知道怎样绘制一个扇形：我们简单写了一下，实现到扇形的效果就可以。

view plaincopy to clipboardprint?

1. function pie(g:Graphics,startAngle:Number,endAngle:Number,radius:Number,color:uint):void
2.     { 
3.         g.lineStyle(1); 
4.         g.moveTo(0,0); 
5.         g.beginFill(color); 
6. for (var i:Number=startAngle; i<=endAngle; i++) 
7.         { 
8.             var angle:Number = i*Math.PI/180; 
9.             var pointX:Number=Math.cos(angle)*radius; 
10.             var pointY:Number=Math.sin(angle)*radius; 
11.             g.lineTo(pointX, pointY); 
12.         } 
13.         g.lineTo(0,0); 
14.         g.endFill(); 
15.     } 

里面参数有分别图形对象，开始角，结束的角度，半径，颜色填充值。这样就基本能够实现到我们预想到效果。

这种通过描点的方式来实现扇形效果。

实现完成之后，我们继续按下面的图案来描写圆，一共是5个圆，最大的圆是由两个扇形完成，其他即通过绘图api drawCircl 填充。

填充颜色的时候，关键一点是对颜色处理，这样才能实现太极图案。

太极图行类：

按上面的思路图进行绘制。

view plaincopy to clipboardprint?

1. package  
2. { 
3. //绘制太极
4.     import flash.display.Sprite; 
5.     import flash.events.*; 
6.     import flash.display.Graphics; 
7.     import flash.geom.Point; 
9. public class TaiJi extends Sprite 
10.     { 
11. private var shape:Sprite=new Sprite(); 
12. private var contain:Sprite=new Sprite(); 
13. private var shape2:Sprite=new Sprite(); 
14. private var shape3:Sprite=new Sprite(); 
15. private var R:int;//半径
16. private var startX:Number=0; 
17. private var startY:Number=0; 
18. public function TaiJi(R:int) 
19.         { 
20. this.R=R;        
21.             addChild(shape); 
22.             shape.x=startX; 
23.             shape.y=startY; 
24.             addChild(shape2); 
25.             addChild(shape3); 
26.             creatSprite(); 
27.         } 
28. private function creatSprite():void
29.         { 
30.             pie(shape.graphics,90,270,R,0x000000);////绘制扇形左边
31.             pie(shape.graphics,270,450,R,0xffffff);//绘制扇形右边
33.             shape2.graphics.beginFill(0xffffff);//绘制下圆
34.             shape2.graphics.drawCircle(startX,startY+R/2,R/2); 
35.             shape2.graphics.endFill(); 
37.             shape2.graphics.beginFill(0x000000);//绘制上圆
38.             shape2.graphics.drawCircle(startX,startY-R/2,R/2); 
39.             shape2.graphics.endFill(); 
41.             shape3.graphics.beginFill(0xffffff); 
42.             shape3.graphics.drawCircle(startX,startY-R/2,R/4); 
43.             shape3.graphics.endFill(); 
45.             shape3.graphics.beginFill(0x000000); 
46.             shape3.graphics.drawCircle(startX,startY+R/2,R/4); 
47.             shape3.graphics.endFill(); 
50.         } 
51. //绘制扇形
52. private function pie(g:Graphics,startAngle:Number,endAngle:Number,radius:Number,color:uint):void
53.         { 
54.             g.lineStyle(1); 
55.             g.moveTo(0,0); 
56.             g.beginFill(color); 
57. for (var i:Number=startAngle; i<=endAngle; i++) 
58.             { 
59.                 var angle:Number = i*Math.PI/180; 
60.                 var pointX:Number=Math.cos(angle)*radius; 
61.                 var pointY:Number=Math.sin(angle)*radius; 
62.                 g.lineTo(pointX, pointY); 
63.             } 
64.             g.lineTo(0,0); 
65.             g.endFill(); 
66.         } 
67.     } 
68. } 

测试代码：代码当中添加一个发光滤镜效果。

view plaincopy to clipboardprint?

1. package  
2. { 
3. //绘制太极
4.     import flash.display.MovieClip; 
5.     import flash.events.*; 
6.     import flash.display.Bitmap; 
7.     import flash.display.BitmapData; 
8.     import flash.geom.*; 
9.     import flash.filters.GlowFilter;//添加一个发光滤镜
10. public class Main2 extends MovieClip 
11.     { 
12. private var R:int=120; 
13. private var contain:MovieClip=new MovieClip(); 
14. public function Main2() 
15.         { 
16.             creatSprite(); 
17.         } 
18. private function creatSprite():void
19.         { 
20.             addChild(contain); 
21.             var sprite:TaiJi=new TaiJi(R);//创建一个太极对象
22.             contain.addChild(sprite); 
23.             contain.x=stage.stageWidth/2; 
24.             contain.y=stage.stageHeight/2; 
25.             var glow:GlowFilter=new GlowFilter(0xFFFFFF,0.3,60,60,3);//发光滤镜
26.             var array:Array=new Array(); 
27.             array.push(glow); 
28.             contain.filters=array; 
29.         } 
30.     } 
31. } 

为了添加一些效果，我们还可以为其图像添加滤镜效果，导入滤镜包。使用GlowFilter 对其添加滤镜光

var glow:GlowFilter=new GlowFilter(0xFFFFFF,0.3,60,60,3);//发光滤镜
var array:Array=new Array();
array.push(glow);
contain.filters=array;

发光滤镜，这样能够实现到不错的效果。

同样为了添加有趣的意思，我们上网搜索一些手的图片，然后再配合两首诗句的制作，这样看起来更加酷。

第二个版本的效果图。