1. 程式人生 > >egret 繪制蒙板遮罩倒計時

egret 繪制蒙板遮罩倒計時

num UNC ddc splay radi 用法 pla math col

我們常看到技能圖標上面有一個灰色半透明的倒計時,這個怎麽做呢,下面請看代碼

 1 /** 技能倒計時 */
 2 class SkillMask {
 3 
 4     private shape:egret.Shape;
 5     private radius:number;//半徑
 6     private cenPoint:egret.Point;//圓心坐標
 7     private txt:egret.TextField;
 8     private static START_ANGLE: number = -Math.PI / 2;//開始角度
 9     private static END_ANGLE: number = Math.PI * 3 / 2;//
結束角度 10 11 private countNum:number;//計時 12 private timeStamp:number;//記錄開始的時間戳 13 private totalTime:number;//倒計時縂時間 14 private callBack:Function;//結束回調函數 15 private thisObj:Object;//回調攜帶的this 16 private param:any;//回調參數 17 18 public constructor(target:egret.DisplayObjectContainer, radius:number) {
19 if(!target){ 20 console.error("技能模板參數有誤"); 21 return; 22 } 23 let shape = new egret.Shape(); 24 this.shape = shape; 25 target.addChild(shape); 26 let txt = new egret.TextField(); 27 this.txt = txt; 28 txt.size = 30;
29 txt.textColor = 0xffffff; 30 txt.textAlign = egret.HorizontalAlign.CENTER; 31 txt.verticalAlign = egret.VerticalAlign.MIDDLE; 32 txt.text = "0"; 33 txt.width = target.width; 34 txt.y = (target.height - txt.height)/2; 35 txt.text = ""; 36 target.addChild(txt); 37 this.cenPoint = new egret.Point(target.width/2, target.height/2); 38 this.radius = radius; 39 } 40 41 /** 42 * @param totalTime 倒計時縂時間(毫秒) 43 * @param completeFunc 倒計時結束回調函數 44 * @param thisObj 回調函數攜帶的this對象 45 * @param param 回調攜帶的參數(非必須) 46 */ 47 public start(totalTime:number, completeFunc:Function, thisObj:Object, param?:any){ 48 if(totalTime<0){ 49 console.error("start函數參數有誤"); 50 return; 51 } 52 egret.stopTick(this.onTick, this); 53 this.totalTime = totalTime; 54 this.callBack = completeFunc; 55 this.thisObj = thisObj; 56 this.param = param; 57 this.timeStamp = egret.getTimer(); 58 this.countNum = 0; 59 //可以采用項目中通用的計時器,這裏暫時用這個 60 egret.startTick(this.onTick, this); 61 } 62 63 private onTick(timeStamp:number):boolean{ 64 let nowTime = egret.getTimer(); 65 this.countNum += nowTime-this.timeStamp; 66 this.timeStamp = nowTime; 67 console.log(timeStamp); 68 if(this.countNum>this.totalTime){ 69 this.txt.text = ""; 70 this.shape.graphics.clear(); 71 egret.stopTick(this.onTick, this); 72 if(this.callBack){ 73 this.callBack.call(this.thisObj, this.param); 74 } 75 }else{ 76 let startAngle = SkillMask.START_ANGLE + (this.countNum/this.totalTime)*Math.PI*2; 77 let endAngle = SkillMask.END_ANGLE; 78 this.drawCircle(startAngle, endAngle); 79 this.txt.text = "" + Math.ceil((this.totalTime-this.countNum)/1000); 80 } 81 return true; 82 } 83 84 /** 繪製圓弧 */ 85 private drawCircle(startAngle:number, endAngle:number){ 86 let shape = this.shape; 87 let point = this.cenPoint; 88 89 shape.graphics.clear(); 90 shape.graphics.beginFill(0x0,0.5); 91 shape.graphics.moveTo(point.x, point.y);//移到圓心點 92 shape.graphics.lineTo(point.x, 0);//畫開始縣 93 shape.graphics.drawArc(point.x, point.y, this.radius, startAngle, endAngle, false);//默認順時針畫 94 shape.graphics.lineTo(point.x,point.y); 95 shape.graphics.endFill(); 96 } 97 }

用起來也是非常的方便

 1 ///圓弧API的高級用法
 2 class Main extends egret.DisplayObjectContainer {
 3     public constructor() {
 4         super();
 5         this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
 6     }
 7 
 8     private onAddToStage(e: egret.Event): void {
 9         var panel = new egret.Sprite();
10         panel.graphics.beginFill(0xff0000);
11         panel.graphics.drawArc(150, 150, 150, -Math.PI/2, 3*Math.PI / 2, false);
12         panel.graphics.endFill();
13         this.addChild(panel);
14         let mask = new SkillMask(panel, 150);
15         mask.start(5000,null,null);
16     }
17 }

今天有點趕了,先寫這麽點,明天功能任務完成了再更新博客

egret 繪制蒙板遮罩倒計時