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

multiline text

Browse source
This commit is contained in:
Krzysztof Opalka 2013-05-03 17:50:10 +02:00
parent 48e8931edc
commit e02b813e80
2 changed files with 51 additions and 15 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 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;

60
src/pixi/Text.js
View file

@ -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 @@ PIXI.Text.prototype.setText = function(text)
* @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.setStyle = function(fontStyle, fillStyle, strokeStyle, strok
*/
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 @@ PIXI.Text.prototype.updateText = function()
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()