查看原图(大图)
前几天想起了
个图案
于是有了个灵感把笔记录起来但是遇到些问题不能实现到太极图
绘制请教我大学同学他用c
绘制次我看终于实现了个太极图绘制
开始时候以下面图作为绘制采取几个圆绘制就可以实现到但是发现填充颜色时候出现问题不得不得改变个思路同学讲解的后原来窍门技巧就是在将大圆变成两边扇形从这个得到个启发运用扇形绘制得到半圆那么解决到填充图像问题关键地方实现到个扇形通过Api绘制但是as3 自带API并没有绘制扇形思路方法经过网上查询资料丰富顺手牵羊修改了下
思路要知道怎样绘制个扇形:我们简单写了下实现到扇形效果就可以 1. function pie(g:Graphics,startAngle:Number,endAngle:Number,radius:Number,color:u
):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 poX:Number=Math.cos(angle)*radius;
10. var poY:Number=Math.sin(angle)*radius;
11. g.lineTo(poX, poY);
12. }
13. g.lineTo(0,0);
14. g.endFill
;
15. } 
查看原图(大图)
里面参数有分别图形对象
开始角结束角度半径颜色填充值这样就基本能够实现到我们预想到效果这种通过描点
方式来实现扇形效果实现完成的后
我们继续按下面图案来描写圆共是5个圆最大圆是由两个扇形完成其他即通过绘图api drawCircl 填充填充颜色
时候关键点是对颜色处理这样才能实现太极图案
查看原图(大图)
太极图行类:
按上面
思路图进行绘制 1. package
2. {
3. //绘制太极
4. import flash.display.Sprite;
5. import flash.events.*;
6. import flash.display.Graphics;
7. import flash.geom.Po;
8.
9. public 
TaiJi extends Sprite
10. {
11. private var shape:Sprite=
Sprite;
12. private var contain:Sprite= Sprite;
13. private var shape2:Sprite= Sprite;
14. private var shape3:Sprite= Sprite;
15. private var R:;//半径
16. private var startX:Number=0;
17. private var startY:Number=0;
18. public function TaiJi(R:)
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);//绘制扇形右边
32.
33. shape2.graphics.beginFill(0xffffff);//绘制下圆
34. shape2.graphics.drawCircle(startX,startY+R/2,R/2);
35. shape2.graphics.endFill;
36.
37. shape2.graphics.beginFill(0x000000);//绘制上圆
38. shape2.graphics.drawCircle(startX,startY-R/2,R/2);
39. shape2.graphics.endFill;
40.
41. shape3.graphics.beginFill(0xffffff);
42. shape3.graphics.drawCircle(startX,startY-R/2,R/4);
43. shape3.graphics.endFill;
44.
45. shape3.graphics.beginFill(0x000000);
46. shape3.graphics.drawCircle(startX,startY+R/2,R/4);
47. shape3.graphics.endFill;
48.
49.
50. }
51. //绘制扇形
52. private function pie(g:Graphics,startAngle:Number,endAngle:Number,radius:Number,color:u):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 poX:Number=Math.cos(angle)*radius;
61. var poY:Number=Math.sin(angle)*radius;
62. g.lineTo(poX, poY);
63. }
64. g.lineTo(0,0);
65. g.endFill;
66. }
67. }
68. } 测试代码:代码当中添加
个发光滤镜效果 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 Main2 extends MovieClip
11. {
12. private var R:=120;
13. private var contain:MovieClip= MovieClip;
14. public function Main2
15. {
16. creatSprite;
17. }
18. private function creatSprite:void
19. {
20. addChild(contain);
21. var sprite:TaiJi= TaiJi(R);//创建个太极对象
22. contain.addChild(sprite);
23. contain.x=stage.stageWidth/2;
24. contain.y=stage.stageHeight/2;
25. var glow:GlowFilter= GlowFilter(0xFFFFFF,0.3,60,60,3);//发光滤镜
26. var 
.gif' />:Array= Array;
27. .gif' />.push(glow);
28. contain.filters=.gif' />;
29. }
30. }
31. } 为了添加
些效果我们还可以为其图像添加滤镜效果导入滤镜包使用GlowFilter 对其添加滤镜光var glow:GlowFilter= GlowFilter(0xFFFFFF,0.3,60,60,3);//发光滤镜
var .gif' />:Array= Array;
.gif' />.push(glow);
contain.filters=.gif' />;发光滤镜
这样能够实现到不错效果同样为了添加有趣
意思我们上网搜索些手图片然后再配合两首诗句制作这样看起来更加酷第 2个版本
效果图
查看原图(大图)
最新评论