canvas draw functions
parent
f65caa3ae6
commit
23083a6ef1
|
@ -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;
|
||||
};
|
|
@ -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,
|
||||
|
|
|
@ -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)
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
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);
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue