canvas draw functions
parent
f65caa3ae6
commit
23083a6ef1
|
@ -969,3 +969,22 @@ GameLib.Utils.UpperCaseUnderscore = function(word) {
|
||||||
|
|
||||||
return str;
|
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 offset
|
||||||
* @param tabIndex
|
* @param tabIndex
|
||||||
* @param texts
|
* @param texts
|
||||||
|
* @param textBaseline
|
||||||
* @constructor
|
* @constructor
|
||||||
*/
|
*/
|
||||||
GameLib.API.Canvas = function(
|
GameLib.API.Canvas = function(
|
||||||
|
@ -22,7 +23,8 @@ GameLib.API.Canvas = function(
|
||||||
height,
|
height,
|
||||||
offset,
|
offset,
|
||||||
tabIndex,
|
tabIndex,
|
||||||
texts
|
texts,
|
||||||
|
textBaseline
|
||||||
) {
|
) {
|
||||||
if (GameLib.Utils.UndefinedOrNull(id)) {
|
if (GameLib.Utils.UndefinedOrNull(id)) {
|
||||||
id = GameLib.Utils.RandomId();
|
id = GameLib.Utils.RandomId();
|
||||||
|
@ -69,6 +71,11 @@ GameLib.API.Canvas = function(
|
||||||
}
|
}
|
||||||
this.texts = texts;
|
this.texts = texts;
|
||||||
|
|
||||||
|
if (GameLib.Utils.UndefinedOrNull(textBaseline)) {
|
||||||
|
textBaseline = 'middle';
|
||||||
|
}
|
||||||
|
this.textBaseline = textBaseline;
|
||||||
|
|
||||||
GameLib.API.Component.call(
|
GameLib.API.Component.call(
|
||||||
this,
|
this,
|
||||||
GameLib.Component.CANVAS,
|
GameLib.Component.CANVAS,
|
||||||
|
|
|
@ -26,7 +26,8 @@ GameLib.Canvas = function(
|
||||||
apiCanvas.height,
|
apiCanvas.height,
|
||||||
apiCanvas.offset,
|
apiCanvas.offset,
|
||||||
apiCanvas.tabIndex,
|
apiCanvas.tabIndex,
|
||||||
apiCanvas.texts
|
apiCanvas.texts,
|
||||||
|
apiCanvas.textBaseline
|
||||||
);
|
);
|
||||||
|
|
||||||
this.offset = new GameLib.Vector2(
|
this.offset = new GameLib.Vector2(
|
||||||
|
@ -42,6 +43,8 @@ GameLib.Canvas = function(
|
||||||
'texts' : [GameLib.D3.Text]
|
'texts' : [GameLib.D3.Text]
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
this.context = null;
|
||||||
};
|
};
|
||||||
|
|
||||||
GameLib.Canvas.prototype = Object.create(GameLib.Component.prototype);
|
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.setAttribute('style', 'left: ' + this.offset.x + 'px;top: ' + this.offset.y + 'px');
|
||||||
|
|
||||||
//this.instance.style.visibility = 'hidden';
|
|
||||||
|
|
||||||
if (this.autoUpdateSize) {
|
if (this.autoUpdateSize) {
|
||||||
/**
|
/**
|
||||||
* Update our size from the instance size
|
* Update our size from the instance size
|
||||||
|
@ -77,10 +78,6 @@ GameLib.Canvas.prototype.createInstance = function() {
|
||||||
this.instance.height = this.height;
|
this.instance.height = this.height;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.writeText();
|
|
||||||
|
|
||||||
//document.body.appendChild(this.instance);
|
|
||||||
|
|
||||||
GameLib.Component.prototype.createInstance.call(this);
|
GameLib.Component.prototype.createInstance.call(this);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -146,6 +143,14 @@ GameLib.Canvas.prototype.updateInstance = function(property) {
|
||||||
return;
|
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);
|
GameLib.Component.prototype.updateInstance.call(this, property);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -167,26 +172,28 @@ GameLib.Canvas.prototype.toApiObject = function() {
|
||||||
this.tabIndex,
|
this.tabIndex,
|
||||||
this.texts.map(function(text){
|
this.texts.map(function(text){
|
||||||
return GameLib.Utils.IdOrNull(text)
|
return GameLib.Utils.IdOrNull(text)
|
||||||
})
|
}),
|
||||||
|
this.textBaseline
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
GameLib.Canvas.prototype.writeText = function() {
|
GameLib.Canvas.prototype.writeText = function() {
|
||||||
|
|
||||||
if (this.texts.length > 0) {
|
this.clear();
|
||||||
var context = this.instance.getContext('2d');
|
|
||||||
context.textBaseline = "middle";
|
|
||||||
context.clearRect(0, 0, this.width, this.height);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.texts.map(
|
this.texts.map(
|
||||||
|
|
||||||
function(text){
|
function(text){
|
||||||
|
|
||||||
|
if (!this.context) {
|
||||||
|
this.context = this.instance.getContext('2d');
|
||||||
|
}
|
||||||
|
|
||||||
text.parentCanvas = this;
|
text.parentCanvas = this;
|
||||||
|
|
||||||
context.fillStyle = text.fillStyle;
|
this.context.fillStyle = text.fillStyle;
|
||||||
context.font = text.font;
|
this.context.font = text.font;
|
||||||
context.fillText(text.value, text.offset.x, text.offset.y);
|
this.context.fillText(text.value, text.offset.x, text.offset.y);
|
||||||
|
|
||||||
if (this.parentTexture && this.parentTexture.instance) {
|
if (this.parentTexture && this.parentTexture.instance) {
|
||||||
this.parentTexture.instance.needsUpdate = true;
|
this.parentTexture.instance.needsUpdate = true;
|
||||||
|
@ -195,3 +202,134 @@ GameLib.Canvas.prototype.writeText = function() {
|
||||||
}.bind(this)
|
}.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