TangIDE开发技巧之自定义资源加载窗口进度条

用TangIDE开发游戏的朋友都知道，你可以像编辑普通的窗口一样编辑资源加载窗口，加入各种丰富的控件和动画效果，但是进度条相对比较单调，现在进度条默认是两张小图，加载时按九宫格来绘制，如果你不想用九宫格，想用两张水平长图替代它们，那么你可以在资源加载窗口的onSystemInit事件下，重写进度条控件(UIProgressBar)的drawBgImageH方法（这里的H表示水平形状的进度条），改变图片的绘制方式。

var me = this; var win = this.getWindow(); //显示对象 win.find("资源加载进度条").drawBgImageH = function(canvas) { var image = null; var h = this.h >> 1; var y = (this.h - h)>> 1; var r = this.roundRadius ? this.roundRadius : 0; image = this.getHtmlImageByType(UIElement.IMAGE_DEFAULT); if(image) { canvas.drawImage(image, 0, 0, image.width, image.height, 0, 0, this.w, image.height); } else { canvas.beginPath(); canvas.translate(0, y); drawRoundRect(canvas, this.w, h, r); canvas.translate(0, -y); canvas.fillStyle = this.style.fillColor; canvas.fill(); } var fgImage = this.getHtmlImageByType(UIElement.IMAGE_NORMAL_FG); if(fgImage && image) { y = Math.abs(fgImage.height - image.height) >> 1; canvas.drawImage(fgImage, 0, 0, Math.round(fgImage.width * this.value), fgImage.height, 0, y, Math.round(this.w * this.value), fgImage.height); } else { var w = Math.round(this.w * this.value); if(w > 2 * r) { canvas.beginPath(); canvas.translate(0, y); drawRoundRect(canvas, w, h, r); canvas.fillStyle = this.style.lineColor; canvas.fill(); } } return; }

对比原始的drawBgImageH方法可能看的更清楚

UIProgressBar.prototype.drawBgImageH = function(canvas) { var image = null; var h = this.h >> 1; var y = (this.h - h)>> 1; var r = this.roundRadius ? this.roundRadius : 0; image = this.getHtmlImageByType(UIElement.IMAGE_DEFAULT); if(image) { drawNinePatchEx(canvas, image, 0, 0, image.width, image.height, 0, y, this.w, h); } else { canvas.beginPath(); canvas.translate(0, y); drawRoundRect(canvas, this.w, h, r); canvas.translate(0, -y); canvas.fillStyle = this.style.fillColor; canvas.fill(); } var w = Math.round(this.w * this.value); image = this.getHtmlImageByType(UIElement.IMAGE_NORMAL_FG); if(image) { drawNinePatchEx(canvas, image, 0, 0, image.width, image.height, 0, y, w, h); } else { if(w > 2 * r) { canvas.beginPath(); canvas.translate(0, y); drawRoundRect(canvas, w, h, r); canvas.fillStyle = this.style.lineColor; canvas.fill(); } } return; }