動態繪製時鐘

知識點:

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


效果:見原文地址:http://www.68design.net/Web-Guide/Flash/53122-1.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章