美文网首页
Egret白鹭引擎 H5时钟

Egret白鹭引擎 H5时钟

作者: VictoriaZsj | 来源:发表于2019-07-10 15:15 被阅读0次

//TypeScript和Egret

Main.ts


 class Main extends egret.DisplayObjectContainer {
    public stageW:number;
    public stageH:number;
    public pan:Pan;
    public SecPointer:SecPointer;
    public MinPointer:MinPointer;
    public HourPointer:HourPointer;
    public createMin:number=new Date().getMinutes(); 
    public createHour:number=new Date().getHours(); 
    public constructor() { 
    super();
    this.addEventListener(egret.Event.ADDED_TO_STAGE,       
    this.createGameScene, this);
    egret.setInterval(this.drawPointer,this,1000);
 }

 //创建时钟背景

 public createGameScene() {
 //绘制背景色**
    this.stageW=this.stage.stageWidth;
    this.stageH=this.stage.stageHeight;
    let bg=new egret.Shape();
    bg.graphics.beginFill(0xffffff);  
    bg.graphics.drawRect(0,0,this.stageW,this.stageH);
    bg.graphics.endFill(); 
    this.addChild(bg); 
 //绘制表盘
    this.pan=new Pan();
    this.pan.x = this.stageW/2; 
    this.pan.y = this.stageH/2;
    this.addChild(this.pan); 
    this.HourPointer=new HourPointer();
    this.HourPointer.x=this.stageW/2;
    this.HourPointer.y=this.stageH/2;
    this.addChild(this.HourPointer);
    this.HourPointer.initHour();
    this.MinPointer=new MinPointer(); 
    this.MinPointer.x=this.stageW/2; 
    this.MinPointer.y = this.stageH/2;
    this.addChild(this.MinPointer); 
    this.MinPointer.initMin();
    this.SecPointer=new SecPointer(); 
    this.SecPointer.x=this.stageW/2; 
    this.SecPointer.y=this.stageH/2;
    this.addChild(this.SecPointer);
    this.SecPointer.initSec();
 } 
 //调用指针
 public drawPointer(){ 
     this.SecPointer.initSec(); 
     let now =new Date();
     let nowSec:number=now.getSeconds();
     let nowMin:number=now.getMinutes(); 
     let nowHour:number=now.getHours()**//时针分针旋转判断**
     if (nowMin!=this.createMin){
         this.MinPointer.initMin(); 
         this.createMin==nowMin; 
     }
    if (nowHour!=this.createHour){
         this.HourPointer.initHour(); 
         this.createHour=nowHour; 
     } 
   }
 }

Sec.ts

 class SecPointer extends egret.Sprite{
    public mySec:egret.Shape;
    public constructor(){
    super();
    this.mySec=new egret.Shape(); 
    this.addChild(this.mySec);
 }

 public initSec(){ 
    let time:Date = new Date();
    this.mySec.graphics.clear(); 
    this.mySec.graphics.lineStyle(4,0xFFFFCC); 
    this.mySec.graphics.moveTo(0,0); 
    this.mySec.graphics.lineTo( 0,-150 ); 
    this.mySec.anchorOffsetY = 0;
    this.mySec.anchorOffsetX = 0;
    this.mySec.rotation=time.getSeconds()*6; 
    this.mySec.graphics.endFill(); 
   }
 }

* * *

Min.ts

 class MinPointer extends egret.Sprite{ 
    public myMin:egret.Shape;
    public constructor(){ 
    super();
    this.myMin=new egret.Shape();
    this.addChild(this.myMin); 
 }
 public initMin(){
    let time:Date = new Date(); 
    this.myMin.graphics.clear();
    this.myMin.graphics.lineStyle(6,0x0000FF);
    this.myMin.graphics.moveTo(0,0); 
    this.myMin.graphics.lineTo( 0, -125 );
    this.myMin.anchorOffsetY = 0; 
    this.myMin.anchorOffsetX = 0; 
    this.myMin.rotation=time.getMinutes()*6; 
    this.myMin.graphics.endFill();
  } 
}

Hour.ts

class HourPointer extends egret.Sprite{
    public myHour:egret.Shape; 
    public constructor(){
    super(); 
    this.myHour=new egret.Shape();
    this.addChild(this.myHour); 
 }
 public initHour(){ 
    let time:Date = new Date();
    let getHours=time.getHours();
 // 转化为12小时
    getHours=getHours>12?getHours-12:getHours; 
    this.myHour.graphics.clear(); 
    this.myHour.graphics.lineStyle(8,0xEE0000); 
    this.myHour.graphics.moveTo(0,0); 
    this.myHour.graphics.lineTo( 0,-100 ); 
    this.myHour.anchorOffsetY = 0; 
    this.myHour.anchorOffsetX = 0; 
    this.myHour.rotation=getHours*30; 
    this.myHour.graphics.endFill();  
   }  }

* * *

Pan.ts

 class Pan extends egret.Sprite{ 
     public mypan:egret.Shape; 
     public myscale1:egret.Shape; 
     public myscale2:egret.Shape; 
     public myHour:egret.Shape; 
     public mySec:egret.Shape; 
     public myMin:egret.Shape;
     public constructor(){ 
     super(); 
     this.Init();
 }
 public Init(){ 
     this.initCircle(); 
     this.initScale();
 }

 public initCircle(){ 
     this.mypan=new egret.Shape()
     this.mypan.graphics.beginFill(0xFF66CC); 
     this.mypan.graphics.drawCircle(0,0,240); 
     this.mypan.graphics.endFill(); 
     this.addChild(this.mypan); 
 }

 public initScale(){ 
   for(let j=0;j<60;j++){ 
     this.myscale1=new egret.Shape(); 
     this.myscale1.graphics.lineStyle(6,0x00ff00); 
     this.myscale1.graphics.moveTo(0,0); 
     this.myscale1.graphics.lineTo( 0, 15 );
// this.myscale1.y = -200;
     this.myscale1.graphics.endFill(); 
     this.myscale1.anchorOffsetY = 210;
     this.myscale1.rotation = j*6; 
     this.addChild(this.myscale1);
 }
   for(let i=0;i<12;i++){ 
     this.myscale2=new egret.Shape(); 
     this.myscale2.graphics.lineStyle(10,0x0066CC);
     this.myscale2.graphics.moveTo(0,0);
     this.myscale2.graphics.lineTo( 0, 35 );
     this.myscale2.graphics.endFill();
     this.myscale2.anchorOffsetY = 220;
     this.myscale2.rotation = i*30;//锚点就是轴心
     this.addChild(this.myscale2);
   }
  }
 }

文件目录


image

相关文章

网友评论

      本文标题:Egret白鹭引擎 H5时钟

      本文链接:https://www.haomeiwen.com/subject/nqfdcctx.html