Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2025-02-17 06:28:30 +00:00
Code Issues Projects Releases Packages Wiki Activity

Fixing measurement of text width that produced too narrow canvas

Browse source 
When using a style on characters (e.g. addColor), the length of the whole line with default style was measured ignoring the different width of the characters with added style. 

I've included the measureLine function, which does the same measurements as updateLine, but it does not render the line to canvas - it only returns the line length.

Now this function is used for measuring line of text if some style is added to it.
This commit is contained in:
TadejZupancic 2016-06-02 11:10:40 +02:00
parent 027725e702
commit 317c85db90
1 changed files with 91 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
src/gameobjects/Text.js
View file

@ -390,12 +390,23 @@ Phaser.Text.prototype.updateText = function () {
drawnLines = this.style.maxLines;
}
this._charCount = 0;
for (var i = 0; i < drawnLines; i++)
{
if (tabs === 0)
{
// Simple layout (no tabs)
var lineWidth = this.context.measureText(lines[i]).width + this.style.strokeThickness + this.padding.x;
var lineWidth = this.style.strokeThickness + this.padding.x;
if (this.colors.length > 0 || this.strokeColors.length > 0 || this.fontWeights.length > 0 || this.fontStyles.length > 0)
{
lineWidth += this.measureLine(lines[i]);
}
else
{
lineWidth += this.context.measureText(lines[i]).width;
}
// Adjust for wrapped text
if (this.style.wordWrap)
@ -415,7 +426,16 @@ Phaser.Text.prototype.updateText = function () {
for (var c = 0; c < line.length; c++)
{
var section = Math.ceil(this.context.measureText(line[c]).width);
var section = 0;
if (this.colors.length > 0 || this.strokeColors.length > 0 || this.fontWeights.length > 0 || this.fontStyles.length > 0)
{
section = this.measureLine(line[c]);
}
else
{
section = Math.ceil(this.context.measureText(line[c]).width);
}
if (c > 0)
{
@ -430,7 +450,14 @@ Phaser.Text.prototype.updateText = function () {
for (var c = 0; c < line.length; c++)
{
// How far to the next tab?
lineWidth += Math.ceil(this.context.measureText(line[c]).width);
if (this.colors.length > 0 || this.strokeColors.length > 0 || this.fontWeights.length > 0 || this.fontStyles.length > 0)
{
lineWidth += this.measureLine(line[c]);
}
else
{
lineWidth += Math.ceil(this.context.measureText(line[c]).width);
}
var diff = this.game.math.snapToCeil(lineWidth, tabs) - lineWidth;
@ -648,6 +675,67 @@ Phaser.Text.prototype.updateShadow = function (state) {
};
/**
* Measures a line of text character by character taking into the account the specified character styles.
*
* @method Phaser.Text#measureLine
* @private
* @param {string} line - The line of text to measure.
* @return {integer} length of the line.
*/
Phaser.Text.prototype.measureLine = function (line) {
var lineLength = 0;
for (var i = 0; i < line.length; i++)
{
var letter = line[i];
if (this.fontWeights.length > 0 || this.fontStyles.length > 0)
{
var components = this.fontToComponents(this.context.font);
if (this.fontStyles[this._charCount])
{
components.fontStyle = this.fontStyles[this._charCount];
}
if (this.fontWeights[this._charCount])
{
components.fontWeight = this.fontWeights[this._charCount];
}
this.context.font = this.componentsToFont(components);
}
if (this.style.stroke && this.style.strokeThickness)
{
if (this.strokeColors[this._charCount])
{
this.context.strokeStyle = this.strokeColors[this._charCount];
}
this.updateShadow(this.style.shadowStroke);
}
if (this.style.fill)
{
if (this.colors[this._charCount])
{
this.context.fillStyle = this.colors[this._charCount];
}
this.updateShadow(this.style.shadowFill);
}
lineLength += this.context.measureText(letter).width;
this._charCount++;
}
return Math.ceil(lineLength);
};
/**
* Updates a line of text, applying fill and stroke per-character colors or style and weight per-character font if applicable.
*