TangIDE development skills-progress bar of Custom Resource loading window and tangide development skills

TangIDE development skills-progress bar of Custom Resource loading window and tangide development skills

All developers who use TangIDE to develop games know that You can edit resource loading windows like normal windows and add various controls and animation effects, but the progress bar is relatively monotonous, now, the progress bar is composed of two small pictures by default. When loading, the progress bar is drawn based on the nine cells. If you don't want to use the nine cells, you want to replace them with two horizontal long charts, in the onSystemInit event of the resource loading window, you can rewrite the drawBgImageH method of the progress bar (here, H indicates a horizontal progress bar) to change the way the image is drawn.

Var me = this; var win = this. getWindow (); // display the object win. find ("resource loading progress bar "). 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 ;}

It may be clearer than the original drawBgImageH method.

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;}

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.