egret 绘制蒙板遮罩倒计时
我们常看到技能图标上面有一个灰色半透明的倒计时，这个怎么做呢，下面请看代码
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 }
今天有点赶了，先写这么点，明天功能任务完成了再更新博客
