diff --git a/examples/example 10 - Text/index.html b/examples/example 10 - Text/index.html
index f32895a..ad061dd 100644
--- a/examples/example 10 - Text/index.html
+++ b/examples/example 10 - Text/index.html
@@ -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;
diff --git a/examples/example 10 - Text/index.html b/examples/example 10 - Text/index.html
index f32895a..ad061dd 100644
--- a/examples/example 10 - Text/index.html
+++ b/examples/example 10 - Text/index.html
@@ -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;
diff --git a/src/pixi/Text.js b/src/pixi/Text.js
index 415f01e..2051e0f 100644
--- a/src/pixi/Text.js
+++ b/src/pixi/Text.js
@@ -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 @@
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 @@
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 @@
{
// 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 @@
body.appendChild(dummy);
result = dummy.offsetHeight;
- PIXI.Text.heightCache[fontStyle] = result
+ PIXI.Text.heightCache[fontStyle] = result;
body.removeChild(dummy);
}
@@ -179,6 +182,6 @@
this.texture.destroy();
}
-}
+};
PIXI.Text.heightCache = {};