diff --git a/src/game-lib-a-2-utils.js b/src/game-lib-a-2-utils.js index 61a86e9..a624fc1 100644 --- a/src/game-lib-a-2-utils.js +++ b/src/game-lib-a-2-utils.js @@ -968,4 +968,23 @@ GameLib.Utils.UpperCaseUnderscore = function(word) { str = str.replace(new RegExp('^_'),''); return str; +}; + +/** + * Returns Left Padded Text - ex. length 5, padchar 0, string abc = '00abc' + * @param length + * @param padChar + * @param string + * @returns {string} + * @constructor + */ +GameLib.Utils.PaddedText = function(length, padChar, string) { + + var pad = ""; + + for (var x = 0; x < length; x++) { + pad[x] = padChar; + } + + return pad.substring(0, pad.length - string.length) + string; }; \ No newline at end of file diff --git a/src/game-lib-api-canvas.js b/src/game-lib-api-canvas.js index d393c7b..d74dcf9 100644 --- a/src/game-lib-api-canvas.js +++ b/src/game-lib-api-canvas.js @@ -10,6 +10,7 @@ * @param offset * @param tabIndex * @param texts + * @param textBaseline * @constructor */ GameLib.API.Canvas = function( @@ -22,7 +23,8 @@ GameLib.API.Canvas = function( height, offset, tabIndex, - texts + texts, + textBaseline ) { if (GameLib.Utils.UndefinedOrNull(id)) { id = GameLib.Utils.RandomId(); @@ -69,6 +71,11 @@ GameLib.API.Canvas = function( } this.texts = texts; + if (GameLib.Utils.UndefinedOrNull(textBaseline)) { + textBaseline = 'middle'; + } + this.textBaseline = textBaseline; + GameLib.API.Component.call( this, GameLib.Component.CANVAS, diff --git a/src/game-lib-canvas.js b/src/game-lib-canvas.js index c159155..3d4abb4 100644 --- a/src/game-lib-canvas.js +++ b/src/game-lib-canvas.js @@ -26,7 +26,8 @@ GameLib.Canvas = function( apiCanvas.height, apiCanvas.offset, apiCanvas.tabIndex, - apiCanvas.texts + apiCanvas.texts, + apiCanvas.textBaseline ); this.offset = new GameLib.Vector2( @@ -42,6 +43,8 @@ GameLib.Canvas = function( 'texts' : [GameLib.D3.Text] } ); + + this.context = null; }; GameLib.Canvas.prototype = Object.create(GameLib.Component.prototype); @@ -61,8 +64,6 @@ GameLib.Canvas.prototype.createInstance = function() { this.instance.setAttribute('style', 'left: ' + this.offset.x + 'px;top: ' + this.offset.y + 'px'); - //this.instance.style.visibility = 'hidden'; - if (this.autoUpdateSize) { /** * Update our size from the instance size @@ -77,10 +78,6 @@ GameLib.Canvas.prototype.createInstance = function() { this.instance.height = this.height; } - this.writeText(); - - //document.body.appendChild(this.instance); - GameLib.Component.prototype.createInstance.call(this); }; @@ -146,6 +143,14 @@ GameLib.Canvas.prototype.updateInstance = function(property) { return; } + if (property === 'textBaseLine') { + if (!this.context) { + this.context = this.instance.getContext('2d'); + } + this.context.textBaseline = this.textBaseline; + return; + } + GameLib.Component.prototype.updateInstance.call(this, property); }; @@ -167,26 +172,28 @@ GameLib.Canvas.prototype.toApiObject = function() { this.tabIndex, this.texts.map(function(text){ return GameLib.Utils.IdOrNull(text) - }) + }), + this.textBaseline ); }; GameLib.Canvas.prototype.writeText = function() { - if (this.texts.length > 0) { - var context = this.instance.getContext('2d'); - context.textBaseline = "middle"; - context.clearRect(0, 0, this.width, this.height); - } + this.clear(); this.texts.map( + function(text){ + if (!this.context) { + this.context = this.instance.getContext('2d'); + } + text.parentCanvas = this; - context.fillStyle = text.fillStyle; - context.font = text.font; - context.fillText(text.value, text.offset.x, text.offset.y); + this.context.fillStyle = text.fillStyle; + this.context.font = text.font; + this.context.fillText(text.value, text.offset.x, text.offset.y); if (this.parentTexture && this.parentTexture.instance) { this.parentTexture.instance.needsUpdate = true; @@ -194,4 +201,135 @@ GameLib.Canvas.prototype.writeText = function() { }.bind(this) ); -}; \ No newline at end of file +}; + +GameLib.Canvas.prototype.clear = function() { + + if (!this.context) { + this.context = this.instance.getContext('2d'); + } + + this.context.clearRect(0, 0, this.width, this.height); +}; + +GameLib.Canvas.prototype.filledRectangle = function( + x, + y, + width, + height, + fillStyle +) { + + if (!this.context) { + this.context = this.instance.getContext('2d'); + } + + if (fillStyle) { + this.context.fillStyle = fillStyle; + } + + this.context.fillRect(x, y, width, height); +}; + +GameLib.Canvas.prototype.outlineRectangle = function( + x, + y, + width, + height, + lineWidth, + strokeStyle +) { + + if (!this.context) { + this.context = this.instance.getContext('2d'); + } + + if (lineWidth) { + this.context.lineWidth = lineWidth; + } + + if (strokeStyle) { + this.context.strokeStyle = strokeStyle; + } + + this.context.fillRect(x, y, width, height); +}; + +GameLib.Canvas.prototype.line = function( + x, + y, + endX, + endY, + lineWidth, + strokeStyle +) { + + if (!this.context) { + this.context = this.instance.getContext('2d'); + } + + if (lineWidth) { + this.context.lineWidth = lineWidth; + } + + if (strokeStyle) { + this.context.strokeStyle = strokeStyle; + } + + this.context.beginPath(); + this.context.moveTo(x, y); + this.context.lineTo(endX, endY); + this.context.stroke(); +}; + +GameLib.Canvas.prototype.text = function( + text, + x, + y, + font, + fillStyle +) { + + if (!this.context) { + this.context = this.instance.getContext('2d'); + } + + if (font) { + this.context.font = font; + } + + if (fillStyle) { + this.context.fillStyle = fillStyle; + } + + this.context.fillText(text, x, y); +}; + +GameLib.Canvas.prototype.image = function( + image, + x, + y, + width, + height, + sx, + sy, + swidth, + sheight +) { + + if (!this.context) { + this.context = this.instance.getContext('2d'); + } + + if (sx && sy && swidth && sheight) { + this.context.drawImage(image, sx, sy, swidth, sheight, x, y, width, height); + return; + } + + if (width && height) { + this.context.drawImage(image, x, y, width, height); + return; + } + + this.context.drawImage(image, x, y); +};