白鹭引擎 - 绘制圆形的进度条 ( graphics )

时间:2023-03-09 18:48:32
白鹭引擎 - 绘制圆形的进度条 ( graphics )
class Main extends egret.DisplayObjectContainer {

    /**
* Main 类构造器, 初始化的时候自动执行, ( 子类的构造函数必须调用父类的构造函数 super )
* constructor 是类的构造函数, 类在实例化的时候调用
* egret.Event.ADDED_TO_STAGE, 在将显示对象添加到舞台显示列表时调度
*/
public constructor() {
super();
this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
} /**
* 1, egret.startTick(回调函数, this) 全局函数将以 60 帧速率回调函数
* -- egret.startTick 的回调函数返回 boolean 类型的值
* -- 如果为 true, 则立刻开始绘图, 如果为 false 则不绘图, 一般返回 true 就行
* -- egret.stopTick() 为 startTick 对应的停止方法
* 2, graphics.clear() 方法会清除显示对象的所有绘制过程, 重绘时需要重新设置所有属性
*/
private onAddToStage(event: egret.Event) { var shape:egret.Shape = new egret.Shape();
var angle:number = 0;
shape.x = 100;
shape.y = 100;
egret.startTick(function (timeStamp:number):boolean {
angle += 1;
changeGraphics(angle);
angle = angle % 360;
return true;
}, this);
function changeGraphics(angle) {
shape.graphics.clear();
shape.graphics.lineStyle(10, 0xffffff);
shape.graphics.drawArc(
50, 50, 50,
0, angle * Math.PI / 180, false
);
shape.graphics.endFill();
}
this.addChild(shape) }
}