/
MeasureText.js
129 lines (104 loc) · 3.06 KB
/
MeasureText.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
/**
* @author Richard Davey <rich@photonstorm.com>
* @copyright 2019 Photon Storm Ltd.
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
*/
var CanvasPool = require('../../display/canvas/CanvasPool');
/**
* Calculates the ascent, descent and fontSize of a given font style.
*
* @function Phaser.GameObjects.Text.MeasureText
* @since 3.0.0
*
* @param {Phaser.GameObjects.TextStyle} textStyle - The TextStyle object to measure.
*
* @return {Phaser.Types.GameObjects.Text.TextMetrics} An object containing the ascent, descent and fontSize of the TextStyle.
*/
var MeasureText = function (textStyle)
{
// @property {HTMLCanvasElement} canvas - The canvas element that the text is rendered.
var canvas = CanvasPool.create(this);
// @property {HTMLCanvasElement} context - The context of the canvas element that the text is rendered to.
var context = canvas.getContext('2d');
textStyle.syncFont(canvas, context);
var width = Math.ceil(context.measureText(textStyle.testString).width * textStyle.baselineX);
var baseline = width;
var height = 2 * baseline;
baseline = baseline * textStyle.baselineY | 0;
canvas.width = width;
canvas.height = height;
context.fillStyle = '#f00';
context.fillRect(0, 0, width, height);
context.font = textStyle._font;
context.textBaseline = 'alphabetic';
context.fillStyle = '#000';
context.fillText(textStyle.testString, 0, baseline);
var output = {
ascent: 0,
descent: 0,
fontSize: 0
};
if (!context.getImageData(0, 0, width, height))
{
output.ascent = baseline;
output.descent = baseline + 6;
output.fontSize = output.ascent + output.descent;
CanvasPool.remove(canvas);
return output;
}
var imagedata = context.getImageData(0, 0, width, height).data;
var pixels = imagedata.length;
var line = width * 4;
var i;
var j;
var idx = 0;
var stop = false;
// ascent. scan from top to bottom until we find a non red pixel
for (i = 0; i < baseline; i++)
{
for (j = 0; j < line; j += 4)
{
if (imagedata[idx + j] !== 255)
{
stop = true;
break;
}
}
if (!stop)
{
idx += line;
}
else
{
break;
}
}
output.ascent = baseline - i;
idx = pixels - line;
stop = false;
// descent. scan from bottom to top until we find a non red pixel
for (i = height; i > baseline; i--)
{
for (j = 0; j < line; j += 4)
{
if (imagedata[idx + j] !== 255)
{
stop = true;
break;
}
}
if (!stop)
{
idx -= line;
}
else
{
break;
}
}
output.descent = (i - baseline);
output.fontSize = output.ascent + output.descent;
CanvasPool.remove(canvas);
return output;
};
module.exports = MeasureText;