diff --git a/examples/example 10 - Text/index.html b/examples/example 10 - Text/index.html
index 6e04d9d..f32895a 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 text!", "50px Snippet", "white");
+ var textSample = new PIXI.Text("Pixi.js can has\nmultiline text!", "50px Snippet", "white", "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", "#FFFFFF", 6);
+ var spinningText = new PIXI.Text("I'm fun!", "bold 60px Podkova", "#cc00ff", "center", "#FFFFFF", 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", "#a4410e", 7);
+ var countingText = new PIXI.Text("COUNT 4EVAR: 0", "bold italic 60px Arvo", "#3e1707", "center", "#a4410e", 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 6e04d9d..f32895a 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 text!", "50px Snippet", "white");
+ var textSample = new PIXI.Text("Pixi.js can has\nmultiline text!", "50px Snippet", "white", "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", "#FFFFFF", 6);
+ var spinningText = new PIXI.Text("I'm fun!", "bold 60px Podkova", "#cc00ff", "center", "#FFFFFF", 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", "#a4410e", 7);
+ var countingText = new PIXI.Text("COUNT 4EVAR: 0", "bold italic 60px Arvo", "#3e1707", "center", "#a4410e", 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 4970eb7..415f01e 100644
--- a/src/pixi/Text.js
+++ b/src/pixi/Text.js
@@ -10,17 +10,18 @@
* @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)
*/
-PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness)
+PIXI.Text = function(text, fontStyle, fillStyle, textAlign, strokeStyle, strokeThickness)
{
this.canvas = document.createElement("canvas");
this.context = this.canvas.getContext("2d");
//document.body.appendChild(this.canvas);
this.setText(text);
- this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness);
+ this.setStyle(fontStyle, fillStyle, textAlign, strokeStyle, strokeThickness);
this.updateText();
@@ -50,13 +51,15 @@
* @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)
*/
-PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness)
+PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, textAlign, strokeStyle, strokeThickness)
{
this.fontStyle = fontStyle || "bold 20pt Arial";
this.fillStyle = fillStyle;
+ this.textAlign = textAlign || "left";
this.strokeStyle = strokeStyle;
this.strokeThickness = strokeThickness || 0;
@@ -68,12 +71,27 @@
*/
PIXI.Text.prototype.updateText = function()
{
-// console.log(this.text);
this.context.font = this.fontStyle;
-
- this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width;
- this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height;
+ //split text into lines
+ var lines = this.text.split("\n");
+
+ //calculate text width
+ var lineWidths = [];
+ var maxLineWidth = 0;
+ for (var i = 0; i < lines.length; i++)
+ {
+ var lineWidth = this.context.measureText(lines[i]).width;
+ lineWidths[i] = lineWidth;
+ maxLineWidth = Math.max(maxLineWidth, lineWidth);
+ }
+ this.canvas.width = maxLineWidth + this.strokeThickness;
+
+ //calculate text height
+ var lineHeight = this.determineFontHeight("font: " + this.fontStyle + ";") + this.strokeThickness;
+ this.canvas.height = lineHeight * lines.length;
+
+ //set canvas text styles
this.context.fillStyle = this.fillStyle;
this.context.font = this.fontStyle;
@@ -82,11 +100,29 @@
this.context.textBaseline="top";
- if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2);
- if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2);
-
-
-// console.log("//")
+ //draw lines line by line
+ for (var i = 0; i < lines.length; i++)
+ {
+ var linePosition = new PIXI.Point(this.strokeThickness / 2, this.strokeThickness / 2 + i * lineHeight);
+ if(this.textAlign == "right")
+ {
+ linePosition.x += maxLineWidth - lineWidths[i];
+ }
+ else if(this.textAlign == "center")
+ {
+ linePosition.x += (maxLineWidth - lineWidths[i]) / 2;
+ }
+
+ if(this.strokeStyle && this.strokeThickness)
+ {
+ this.context.strokeText(lines[i], linePosition.x, linePosition.y);
+ }
+
+ if(this.fillStyle)
+ {
+ this.context.fillText(lines[i], linePosition.x, linePosition.y);
+ }
+ }
}
PIXI.Text.prototype.updateTransform = function()