jeena/pixi.js
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

moved text style params to separated object

Browse source
This commit is contained in:
Krzysztof Opalka 2013-05-04 19:28:30 +02:00
parent e02b813e80
commit b848f34f69
2 changed files with 54 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

6
examples/example 10 - Text/index.html
View file

@ -58,20 +58,20 @@
requestAnimFrame( animate );
// creat some white text using the Snippet webfont
var textSample = new PIXI.Text("Pixi.js can has\nmultiline text!", "50px Snippet", "white", "center");
var textSample = new PIXI.Text("Pixi.js can has\nmultiline text!", {font: "50px Snippet", fill: "white", align: "center"});
textSample.anchor.x = 0.5;
textSample.position.x = 620/2;
textSample.position.y = 10;
// create a text object with a nice stroke
var spinningText = new PIXI.Text("I'm fun!", "bold 60px Podkova", "#cc00ff", "center", "#FFFFFF", 6);
var spinningText = new PIXI.Text("I'm fun!", {font: "bold 60px Podkova", fill: "#cc00ff", align: "center", stroke: "#FFFFFF", strokeThickness: 6});
// setting the anchor point to 0.5 will center align the text... great for spinning!
spinningText.anchor.x = spinningText.anchor.y = 0.5;
spinningText.position.x = 620/2;
spinningText.position.y = 400/2;
// create a text object that will be updated..
var countingText = new PIXI.Text("COUNT 4EVAR: 0", "bold italic 60px Arvo", "#3e1707", "center", "#a4410e", 7);
var countingText = new PIXI.Text("COUNT 4EVAR: 0", {font: "bold italic 60px Arvo", fill: "#3e1707", align: "center", stroke: "#a4410e", strokeThickness: 7});
countingText.position.x = 620/2;
countingText.position.y = 320;
countingText.anchor.x = 0.5;

99
src/pixi/Text.js
View file

@ -3,75 +3,78 @@
*/
/**
* A Text Object will create a line of text
* A Text Object will create a line(s) of text
* @class Text
* @extends Sprite
* @constructor
* @param text {String} The copy that you would like the text to display
* @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
* @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
* @param textAlign {String} an alignment of the multiline text ("left", "center" or "right"). Default is "left", can be null
* @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
* @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
* @param {String} text The copy that you would like the text to display
* @param {Object} [style] The style parameters
* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font
* @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
* @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
* @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
* @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
*/
PIXI.Text = function(text, fontStyle, fillStyle, textAlign, strokeStyle, strokeThickness)
PIXI.Text = function(text, style)
{
this.canvas = document.createElement("canvas");
this.context = this.canvas.getContext("2d");
//document.body.appendChild(this.canvas);
this.setText(text);
this.setStyle(fontStyle, fillStyle, textAlign, strokeStyle, strokeThickness);
this.setStyle(style);
this.updateText();
PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas));
PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas));
// need to store a canvas that can
}
};
// constructor
PIXI.Text.constructor = PIXI.Text;
PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype );
PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype);
/**
* Set the copy for the text object
* @methos setText
* @param text {String} The copy that you would like the text to display
* @param {String} text The copy that you would like the text to display
*/
PIXI.Text.prototype.setText = function(text)
{
this.text = text || " ";
this.dirty = true;
}
};
/**
* Set the style of the text
* @method setStyle
* @constructor
* @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
* @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
* @param textAlign {String} an alignment of the multiline text ("left", "center" or "right"). Default is "left", can be null
* @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
* @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
* @param {Object} [style] The style parameters
* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font
* @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
* @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
* @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
* @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
*/
PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, textAlign, strokeStyle, strokeThickness)
PIXI.Text.prototype.setStyle = function(style)
{
this.fontStyle = fontStyle || "bold 20pt Arial";
this.fillStyle = fillStyle;
this.textAlign = textAlign || "left";
this.strokeStyle = strokeStyle;
this.strokeThickness = strokeThickness || 0;
style = style || {};
style.font = style.font || "bold 20pt Arial";
style.fill = style.fill || "black";
style.align = style.align || "left";
style.strokeThickness = style.strokeThickness || 0;
this.style = style;
this.dirty = true;
}
};
/**
* @private
*/
PIXI.Text.prototype.updateText = function()
{
this.context.font = this.fontStyle;
this.context.font = this.style.font;
//split text into lines
var lines = this.text.split("\n");
@ -85,45 +88,45 @@ PIXI.Text.prototype.updateText = function()
lineWidths[i] = lineWidth;
maxLineWidth = Math.max(maxLineWidth, lineWidth);
}
this.canvas.width = maxLineWidth + this.strokeThickness;
this.canvas.width = maxLineWidth + this.style.strokeThickness;
//calculate text height
var lineHeight = this.determineFontHeight("font: " + this.fontStyle + ";") + this.strokeThickness;
var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness;
this.canvas.height = lineHeight * lines.length;
//set canvas text styles
this.context.fillStyle = this.fillStyle;
this.context.font = this.fontStyle;
this.context.fillStyle = this.style.fill;
this.context.font = this.style.font;
this.context.strokeStyle = this.strokeStyle;
this.context.lineWidth = this.strokeThickness;
this.context.strokeStyle = this.style.stroke;
this.context.lineWidth = this.style.strokeThickness;
this.context.textBaseline="top";
this.context.textBaseline = "top";
//draw lines line by line
for (var i = 0; i < lines.length; i++)
for (i = 0; i < lines.length; i++)
{
var linePosition = new PIXI.Point(this.strokeThickness / 2, this.strokeThickness / 2 + i * lineHeight);
if(this.textAlign == "right")
var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight);
if(this.style.align == "right")
{
linePosition.x += maxLineWidth - lineWidths[i];
}
else if(this.textAlign == "center")
else if(this.style.align == "center")
{
linePosition.x += (maxLineWidth - lineWidths[i]) / 2;
}
if(this.strokeStyle && this.strokeThickness)
if(this.style.stroke && this.style.strokeThickness)
{
this.context.strokeText(lines[i], linePosition.x, linePosition.y);
}
if(this.fillStyle)
if(this.style.fill)
{
this.context.fillText(lines[i], linePosition.x, linePosition.y);
}
}
}
};
PIXI.Text.prototype.updateTransform = function()
{
@ -141,8 +144,8 @@ PIXI.Text.prototype.updateTransform = function()
this.dirty = false;
}
PIXI.Sprite.prototype.updateTransform.call( this );
}
PIXI.Sprite.prototype.updateTransform.call(this);
};
/*
* http://stackoverflow.com/users/34441/ellisbben
@ -152,7 +155,7 @@ PIXI.Text.prototype.determineFontHeight = function(fontStyle)
{
// build a little refference dictionary so if the font style has been used return a
// cached version...
var result = PIXI.Text.heightCache[fontStyle]
var result = PIXI.Text.heightCache[fontStyle];
if(!result)
{
@ -164,7 +167,7 @@ PIXI.Text.prototype.determineFontHeight = function(fontStyle)
body.appendChild(dummy);
result = dummy.offsetHeight;
PIXI.Text.heightCache[fontStyle] = result
PIXI.Text.heightCache[fontStyle] = result;
body.removeChild(dummy);
}
@ -179,6 +182,6 @@ PIXI.Text.prototype.destroy = function(destroyTexture)
this.texture.destroy();
}
}
};
PIXI.Text.heightCache = {};