美文网首页
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