class ProgressBar extends egret.Sprite{public background:egret.Bitmap;public bar:egret.Bitmap;public barMask:egret.Rectangle;/*** 進度條參數 defaultWidth 默認寬 defaultHeight 默認高* */private defaultWidth = 300;private defaultHeight = 60;private offsetW = 14;public constructor(_bg:string, _bar:string) {super();this.background = new egret.Bitmap(RES.getRes(_bg));this.bar = new egret.Bitmap(RES.getRes(_bar));this.addChild(this.background);this.addChild(this.bar);this.setContentSize(this.defaultWidth,this.defaultHeight);this.bar.x = (this.background.width - this.bar.width) / 2+this.offsetW/2;this.bar.y = (this.background.height - this.bar.height) / 2;this.barMask = new egret.Rectangle(0, 0, this.bar.width, this.bar.height);this.bar.mask = this.barMask;}/*** 設置背景 在進度條創建完成后調用*/public setBackground(_bg){this.removeChild(this.background);this.background = new egret.Bitmap(RES.getRes(_bg));}/*** 設置Bar 在進度條創建完成后調用*/public setBar(_bar){this.removeChild(this.bar);this.bar = new egret.Bitmap(RES.getRes(_bar));}/*** 設置進度*/public setProgress(_percent) {this.barMask = new egret.Rectangle(0, 0, _percent * this.bar.width-this.offsetW, this.bar.height);this.bar.mask = this.barMask;}/*** 設置位置*/public setPositon(_x,_y){this.x = _x;this.y = _y;}/*** 設置大小 九宮格*/public setContentSize(_width,_height){this._setWidth(_width);this._setHeight(_height);}private _setWidth(_width){this.width = _widththis.background.width = this.width;this.bar.width = this.width;}private _setHeight(_height){this.height = _heightthis.background.height = this.heightthis.bar.height = this.height} } // // // Copyright (c) 2014-present, Egret Technology. // All rights reserved. // Redistribution and use in source and binary forms, with or without // modification, are permitted provided that the following conditions are met: // // * Redistributions of source code must retain the above copyright // notice, this list of conditions and the following disclaimer. // * Redistributions in binary form must reproduce the above copyright // notice, this list of conditions and the following disclaimer in the // documentation and/or other materials provided with the distribution. // * Neither the name of the Egret nor the // names of its contributors may be used to endorse or promote products // derived from this software without specific prior written permission. // // THIS SOFTWARE IS PROVIDED BY EGRET AND CONTRIBUTORS "AS IS" AND ANY EXPRESS // OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES // OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. // IN NO EVENT SHALL EGRET AND CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, // INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT // LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;LOSS OF USE, DATA, // OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF // LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING // NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, // EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. // //class Main extends eui.UILayer {private pBar:eui.ProgressBar;private progress:ProgressBar;private curProgress = 0;protected createChildren(): void {super.createChildren();egret.lifecycle.addLifecycleListener((context) => {// custom lifecycle plugin})egret.lifecycle.onPause = () => {egret.ticker.pause();}egret.lifecycle.onResume = () => {egret.ticker.resume();}//inject the custom material parser//注入自定義的素材解析器let assetAdapter = new AssetAdapter();egret.registerImplementation("eui.IAssetAdapter", assetAdapter);egret.registerImplementation("eui.IThemeAdapter", new ThemeAdapter());this.runGame().catch(e => {console.log(e);})}private async runGame() {await this.loadResource()this.createGameScene();const result = await RES.getResAsync("description_json")this.startAnimation(result);await platform.login();const userInfo = await platform.getUserInfo();console.log(userInfo);}private async loadResource() {try {const loadingView = new LoadingUI();this.stage.addChild(loadingView);await RES.loadConfig("resource/default.res.json", "resource/");await this.loadTheme();await RES.loadGroup("preload", 0, loadingView);this.stage.removeChild(loadingView);}catch (e) {console.error(e);}}private loadTheme() {return new Promise((resolve, reject) => {// load skin theme configuration file, you can manually modify the file. And replace the default skin.//加載皮膚主題配置文件,可以手動修改這個文件。替換默認皮膚。let theme = new eui.Theme("resource/default.thm.json", this.stage);theme.addEventListener(eui.UIEvent.COMPLETE, () => {resolve();}, this);})}private textfield: egret.TextField;/*** 創建場景界面* Create scene interface*/protected createGameScene(): void {console.log("Hello World");let bg = this.createBitmapByName("playerview_bg22_jpg");this.addChild(bg);let wudingBg = this.createBitmapByName("commonview_titlebg2_png");this.addChild(wudingBg);let title = this.createBitmapByName("user_png");this.addChild(title);title.x = 200;title.y = 0;let roleBody = this.createBitmapByName("user_body_full_31032_png");this.addChild(roleBody);roleBody.x = -100;roleBody.y = 100;let roleHead = this.createBitmapByName("user_head2_wxhexie2_png");this.addChild(roleHead);roleHead.x = 185;roleHead.y = 30;let quanshiBg = this.createBitmapByName("playerview_canvas012_png");this.addChild(quanshiBg)quanshiBg.x = 100;quanshiBg.y = 500;let quanshiLabel = new egret.TextField();quanshiLabel.textColor = 0xf5deb3;quanshiLabel.textAlign = "center";quanshiLabel.text = "權勢：123456678";quanshiLabel.size = 23;quanshiLabel.x = 135;quanshiLabel.y = 510;this.addChild(quanshiLabel);let nameLabel = new egret.TextField();nameLabel.textColor = 0xf5deb3;nameLabel.textAlign = "center";nameLabel.text = "藏香梅子";nameLabel.size = 23;nameLabel.x = 450;nameLabel.y = 100;this.addChild(nameLabel);let id1Label = new egret.TextField();id1Label.textColor = 0xf5deb3;id1Label.textAlign = "center";id1Label.text = "編號： 12345678";id1Label.size = 23;id1Label.x = 400;id1Label.y = 150;this.addChild(id1Label);let id2Label = new egret.TextField();id2Label.textColor = 0xf5deb3;id2Label.textAlign = "center";id2Label.text = "編號： 暫無幫會";id2Label.size = 23;id2Label.x = 400;id2Label.y = 200;this.addChild(id2Label);let id3Label = new egret.TextField();id3Label.textColor = 0xf5deb3;id3Label.textAlign = "center";id3Label.text = "編號： 暫無職位";id3Label.size = 23;id3Label.x = 400;id3Label.y = 250;this.addChild(id3Label);let VIPLabel = new egret.TextField();VIPLabel.textColor = 0xf5deb3;VIPLabel.textAlign = "center";VIPLabel.text = "會員： VIP4";VIPLabel.size = 23;VIPLabel.x = 400;VIPLabel.y = 300;this.addChild(VIPLabel);let renWangLabel = new egret.TextField();renWangLabel.textColor = 0xf5deb3;renWangLabel.textAlign = "center";renWangLabel.text = "人望： 0";renWangLabel.size = 23;renWangLabel.x = 400;renWangLabel.y = 350;this.addChild(renWangLabel);let upBtn = new eui.Button();upBtn.horizontalCenter = 0;upBtn.verticalCenter = 0;this.addChild(upBtn);upBtn.x = 700;upBtn.y = 700;// upBtn.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onUpBtnClick, this);upBtn.addEventListener(egret.TouchEvent.TOUCH_TAP,this.btnTouchHandler,this);upBtn.icon = RES.getRes("up_png");let closeBtn = new eui.Button();this.addChild(closeBtn);closeBtn.x = 550;closeBtn.y = 0;closeBtn.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onCloseBtnClick, this);closeBtn.icon = RES.getRes("commonview_closebtn12_png");// 傳入 進度條紋理名稱 進度條背景紋理名稱this.createProgressBar();// this.initProgressBar();}private createProgressBar(){// 傳入 進度條紋理名稱 進度條背景紋理名稱this.progress = new ProgressBar('progBg_png','progBar_png');//設置進度 0-1this.progress.setContentSize(400,60)this.progress.setPositon(200,700);this.progress.setProgress(0.1)this.stage.addChild(this.progress)}/*** 根據name關鍵字創建一個Bitmap對象。name屬性請參考resources/resource.json配置文件的內容。* Create a Bitmap object according to name keyword.As for the property of name please refer to the configuration file of resources/resource.json.*/private createBitmapByName(name: string): egret.Bitmap {let result = new egret.Bitmap();let texture: egret.Texture = RES.getRes(name);result.texture = texture;return result;}/*** 描述文件加載成功，開始播放動畫* Description file loading is successful, start to play the animation*/private startAnimation(result: Array<any>): void {let parser = new egret.HtmlTextParser();let textflowArr = result.map(text => parser.parse(text));let textfield = this.textfield;let count = -1;let change = () => {count++;if (count >= textflowArr.length) {count = 0;}let textFlow = textflowArr[count];// 切換描述內容// Switch to described contenttextfield.textFlow = textFlow;let tw = egret.Tween.get(textfield);tw.to({ "alpha": 1 }, 200);tw.wait(2000);tw.to({ "alpha": 0 }, 200);tw.call(change, this);};change();}private onCloseBtnClick(e: egret.TouchEvent) {this.removeChildren();}private onUpBtnClick(e: egret.TouchEvent) {console.log("up levels");this.timestart();}private initProgressBar():void{this.pBar = new eui.ProgressBar();//1-默認加載方向從左到右；//2-設置加載進度從下到上；// this.pBar.direction = eui.Direction.BTT;this.pBar.maximum = 200;this.pBar.minimum = 0;//1-this.pBar.width = 200;this.pBar.height = 40;//2-// this.pBar.width = 40;// this.pBar.height = 200;this.pBar.value = 10;this.addChild(this.pBar);this.pBar.x = 220;this.pBar.y = 650;//用timer來加載進度// var timer:egret.Timer = new egret.Timer(10,0);// timer.addEventListener(egret.TimerEvent.TIMER,this.timestart,this);// timer.start();}private timestart():void{this.pBar.value += 1;if(this.pBar.value >= this.pBar.maximum){this.pBar.value = 0;}} private btnTouchHandler(event:egret.TouchEvent):void {this.curProgress += 0.1;if(this.curProgress > 1){this.curProgress = 1;}this.progress.setProgress(this.curProgress)} }

?

總結

以上是生活随笔為你收集整理的egret 自定义进度条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。