再学AS3（三）——动态绘制钟表

再学AS3（三）——动态绘制钟表
知识点：
1、动态画圆：实际上圆的边线就是无数个小圆点的集合，也就是这些小圆点一个一个地显示便形成了大圆的边线。下面是小圆点的坐标 
X=Math.cos(j1 / 180 * Math.PI) * 100 + w;
Y=Math.sin(j1 / 180 * Math.PI) * 100 + h;
j1++;
且坐标随着j1的改变而改变。
2、进一步学习TIMER类；
3、动态画直线（让直线一点一点地显示出来）；下面是动态绘制的秒针语句：
秒针.graphics.lineStyle(1.5,0x00CCCC);
秒针.graphics.moveTo(0,0);
秒针.graphics.lineTo(0,-j4);
j4++;
秒针.x=w;
秒针.y=h;
4、注意钟表中指针的坐标设定（不然就与实际指针走的方向不一致），见第3点中。
5、使绘制的钟表居于舞台中央，首先设定变量值，如下：
var w:Number=stage.stageWidth/2;
var h:Number=stage.stageHeight/2;
然后再调用。（否则你改变舞台的大小时就会错位）

var w:Number=stage.stageWidth/2;
var h:Number=stage.stageHeight/2;
var 半径:Sprite= new Sprite();
addChild(半径);
var 外圆:Sprite= new Sprite();
addChild(外圆);
var 内圆:Sprite= new Sprite();
addChild(内圆);
var 表格:Sprite= new Sprite();
addChild(表格);
var 时针:Sprite= new Sprite();
addChild(时针);
var 分针:Sprite= new Sprite();
addChild(分针);
var 秒针:Sprite= new Sprite();
addChild(秒针);
//画圆心
var yx:Sprite=new Sprite;
yx.graphics.beginFill(0x00CCCC);
yx.graphics.drawCircle(w,h,5);
yx.graphics.endFill();
addChild(yx);
//申明变量
var X:Number=0;
var Y:Number=0;
var X1:Number=0;
var Y1:Number=0;
var X2:Number=0;
var Y2:Number=0;
var j1:uint= 0;
var j2:uint=0;
var j3:uint=0;
var j4:uint=0;
var j5:uint=0;
var j6:uint=0;
var 画外圆计时:Timer=new Timer(10,360);
var 画内圆计时:Timer=new Timer(10,360);
var 画表格计时:Timer=new Timer(200,12);
var 画秒针计时:Timer=new Timer(10,90);
var 画分针计时:Timer=new Timer(10,75);
var 画时针计时:Timer=new Timer(10,60);
画外圆计时.start();
画外圆计时.addEventListener(TimerEvent.TIMER,画外圆);
画外圆计时.addEventListener(TimerEvent.TIMER_COMPLETE,画外圆完成);
function 画外圆(event:TimerEvent):void {
 X=Math.cos(j1 / 180 * Math.PI) * 100 + w;
 Y=Math.sin(j1 / 180 * Math.PI) * 100 + h;
 j1++;
 外圆.graphics.beginFill(0xAAAAAA);
 外圆.graphics.drawCircle(X, Y, 1.5);
 外圆.graphics.endFill();
}
function 画外圆完成(event:TimerEvent):void {
 画内圆计时.start();
 画内圆计时.addEventListener(TimerEvent.TIMER,画内圆);
 画内圆计时.addEventListener(TimerEvent.TIMER_COMPLETE,画内圆完成);
}
function 画内圆(event:TimerEvent):void {
 X1=Math.cos(j2 / 180 * Math.PI) * 92 + w;
 Y1=Math.sin(j2 / 180 * Math.PI) * 92 + h;
 j2++;
 内圆.graphics.beginFill(0x999999);
 内圆.graphics.drawCircle(X1, Y1, 1.5);
 内圆.graphics.endFill();
 半径.graphics.lineStyle(3,0x000000);
 半径.graphics.moveTo(w,h);
 半径.graphics.lineTo(X1,Y1);
}
function 画内圆完成(event:TimerEvent):void {
 画表格计时.start();
 画表格计时.addEventListener(TimerEvent.TIMER,画表格);
 画表格计时.addEventListener(TimerEvent.TIMER_COMPLETE,画表格完成);
}
function 画表格(event:TimerEvent):void {
 X2=Math.cos(j3 / 180 * Math.PI) * 80 + w;
 Y2=Math.sin(j3 / 180 * Math.PI) * 80 + h;
 j3+=30;
 表格.graphics.beginFill(0x00CCCC);
 表格.graphics.drawCircle(X2, Y2, 2);
 表格.graphics.endFill();
}
function 画表格完成(event:TimerEvent):void {
 画秒针计时.start();
 画秒针计时.addEventListener(TimerEvent.TIMER,画秒针);
 画秒针计时.addEventListener(TimerEvent.TIMER_COMPLETE,画秒针完成);
}
function 画秒针(event:TimerEvent):void {
 //画秒针
 秒针.graphics.lineStyle(1.5,0x00CCCC);
 秒针.graphics.moveTo(0,0);
 秒针.graphics.lineTo(0,-j4);
 j4++;
 秒针.x=w;
 秒针.y=h;
}
function 画秒针完成(event:TimerEvent):void {
 画分针计时.start();
 画分针计时.addEventListener(TimerEvent.TIMER,画分针);
 画分针计时.addEventListener(TimerEvent.TIMER_COMPLETE,画分针完成);
}
function 画分针(event:TimerEvent):void {
 //画分针
 分针.graphics.lineStyle(3,0x00AAAA);
 分针.graphics.moveTo(0,0);
 分针.graphics.lineTo(0,-j5);
 j5++;
 分针.x=w;
 分针.y=h;
}
function 画分针完成(event:TimerEvent):void {
 画时针计时.start();
 画时针计时.addEventListener(TimerEvent.TIMER,画时针);
}
function 画时针(event:TimerEvent):void {//画时针
 时针.graphics.lineStyle(4,0x008888);
 时针.graphics.moveTo(0,0);
 时针.graphics.lineTo(0,-j6);
 j6++;
 时针.x=w;
 时针.y=h;
}
//画针动起来
stage.addEventListener(Event.ENTER_FRAME,gx);
function gx(e:Event):void {
 var sj:Date=new Date();
 var hm:uint=sj.getMilliseconds();
 var m:uint=sj.getSeconds();
 var f:uint=sj.getMinutes();
 var s:uint=sj.getHours();
 秒针.rotation =(m+hm/1000)*6;
 分针.rotation =f* 6+m*0.1;
 时针.rotation =s * 30 +f * 0.5;
}

 

动态画表.swf(2.06 KB)