eui-eui.Range

環形範圍顯示物件(可作為環形 loading bar)

建立繼承於 Range 的組件, CircleRange.ts 如下

class CircleRange extends eui.Range {

    // 用於繪製環形
    private shape: egret.Shape;

    protected createChildren() {
        super.createChildren();
        this.shape = new egret.Shape;
        this.addChild(this.shape);
        // range 相關參數設置
        this.minimum = 0;
        this.maximum = 100;
        this.value = 0;
    }

    /** 覆寫更新機制 */
    protected updateSkinDisplayList() {
        const currentValue = this.value;
        const maxValue = this.maximum;
        const minValue = this.minimum;
        // 計算百分比
        const ratio = currentValue / maxValue - minValue;
        this.shape.graphics.clear();
        // 線條風格設置
        this.shape.graphics.lineStyle(40, 0x00FF00, .7, true, null, egret.CapsStyle.NONE);
        // 繪製弧形
        this.shape.graphics.drawArc(0, 0, 100, -90 / 180 * Math.PI, (360 * ratio - 90) / 180 * Math.PI);
    }

}

主場景部分

class Main extends eui.UILayer {

    protected createChildren(): void {
        super.createChildren();
        egret.lifecycle.onPause = () => egret.ticker.pause();
        egret.lifecycle.onResume = () => egret.ticker.resume();
        egret.registerImplementation('eui.IAssetAdapter', new AssetAdapter());
        egret.registerImplementation('eui.IThemeAdapter', new ThemeAdapter());
        this.runGame();
    }

    private async loadResource() {
        let loadingView = this.stage.addChild(new LoadingUI()) as LoadingUI;
        await RES.loadConfig('resource/default.res.json', 'resource/');
        await new Promise(resolve => new eui.Theme('resource/default.thm.json', this.stage).once(eui.UIEvent.COMPLETE, resolve, this));
        await RES.loadGroup('preload', 0, loadingView);
        this.stage.removeChild(loadingView);
    }

    private async runGame() {
        await this.loadResource();
        // --- Edwin 給你最乾淨的程式碼, 從這行以下開始寫喔 ---

        // 建立環形範圍顯示物件
        const cr = new CircleRange;
        // 置中於畫面
        cr.horizontalCenter = 0;
        cr.verticalCenter = 0;
        // 顯示於舞台
        this.addChild(cr);
        // 動畫
        egret.Tween.get(cr).set({value:0}).to({value:100},2000);

    }

}