|
@@ -138,20 +138,19 @@ class FontBuilder {
|
|
|
var ctx = bmp.getContext2d();
|
|
var ctx = bmp.getContext2d();
|
|
|
ctx.font = '${this.font.size}px ${this.font.name}';
|
|
ctx.font = '${this.font.size}px ${this.font.name}';
|
|
|
ctx.textAlign = 'left';
|
|
ctx.textAlign = 'left';
|
|
|
- ctx.textBaseline = 'top'; // important!
|
|
|
|
|
|
|
+ // bottom textBaseline is the baseline with least difference between browsers
|
|
|
|
|
+ ctx.textBaseline = 'bottom'; // important!
|
|
|
|
|
|
|
|
font.lineHeight = 0;
|
|
font.lineHeight = 0;
|
|
|
var surf = 0;
|
|
var surf = 0;
|
|
|
var sizes = [];
|
|
var sizes = [];
|
|
|
// get approx height of font including descent
|
|
// get approx height of font including descent
|
|
|
var h = getFontHeight(this.font, 'MgO0pj');
|
|
var h = getFontHeight(this.font, 'MgO0pj');
|
|
|
- // arbritrary safety margin used to ensure that char doesn't get scrambled, probably due to messed up text metrics
|
|
|
|
|
- var xMarg = 10;
|
|
|
|
|
for( i in 0...options.chars.length ) {
|
|
for( i in 0...options.chars.length ) {
|
|
|
var textChar = options.chars.charAt(i);
|
|
var textChar = options.chars.charAt(i);
|
|
|
var w = Math.ceil(ctx.measureText(textChar).width) + 1;
|
|
var w = Math.ceil(ctx.measureText(textChar).width) + 1;
|
|
|
if( w == 1 ) continue;
|
|
if( w == 1 ) continue;
|
|
|
- surf += (w + (1 + xMarg)) * (h + 1);
|
|
|
|
|
|
|
+ surf += (w + 1) * (h + 1);
|
|
|
if( h > font.lineHeight )
|
|
if( h > font.lineHeight )
|
|
|
font.lineHeight = h;
|
|
font.lineHeight = h;
|
|
|
sizes[i] = { w:w, h:h };
|
|
sizes[i] = { w:w, h:h };
|
|
@@ -177,7 +176,7 @@ class FontBuilder {
|
|
|
bmp.height = height;
|
|
bmp.height = height;
|
|
|
ctx.font = '${this.font.size}px ${this.font.name}';
|
|
ctx.font = '${this.font.size}px ${this.font.name}';
|
|
|
ctx.textAlign = 'left';
|
|
ctx.textAlign = 'left';
|
|
|
- ctx.textBaseline = 'top'; // important!
|
|
|
|
|
|
|
+ ctx.textBaseline = 'bottom'; // important!
|
|
|
ctx.fillStyle = 'red';
|
|
ctx.fillStyle = 'red';
|
|
|
font.glyphs = new Map();
|
|
font.glyphs = new Map();
|
|
|
all = [];
|
|
all = [];
|
|
@@ -185,9 +184,11 @@ class FontBuilder {
|
|
|
for( i in 0...options.chars.length ) {
|
|
for( i in 0...options.chars.length ) {
|
|
|
var size = sizes[i];
|
|
var size = sizes[i];
|
|
|
if( size == null ) continue;
|
|
if( size == null ) continue;
|
|
|
- var w = size.w + xMarg;
|
|
|
|
|
|
|
+ var w = size.w;
|
|
|
var h = size.h;
|
|
var h = size.h;
|
|
|
- if( x + w > width ) {
|
|
|
|
|
|
|
+ if( h > lineH ) lineH = h;
|
|
|
|
|
+ // Whatever the first character is it will always have x and y value 0
|
|
|
|
|
+ if( x + w > width || i == 0) {
|
|
|
x = 0;
|
|
x = 0;
|
|
|
y += lineH + 1;
|
|
y += lineH + 1;
|
|
|
}
|
|
}
|
|
@@ -203,11 +204,11 @@ class FontBuilder {
|
|
|
ctx.globalAlpha = 1.0;
|
|
ctx.globalAlpha = 1.0;
|
|
|
ctx.fillStyle = 'white';
|
|
ctx.fillStyle = 'white';
|
|
|
ctx.fillText(options.chars.charAt(i), x, y);
|
|
ctx.fillText(options.chars.charAt(i), x, y);
|
|
|
- var t = new h2d.Tile(innerTex, x, y, w - 1, h - 1);
|
|
|
|
|
|
|
+ // Since we're using bottom textBaseline we need to subtract the height from the y position
|
|
|
|
|
+ var t = new h2d.Tile(innerTex, x, y-h, w - 1, h - 1);
|
|
|
all.push(t);
|
|
all.push(t);
|
|
|
- font.glyphs.set(options.chars.charCodeAt(i), new h2d.Font.FontChar(t,w - (1 + xMarg)));
|
|
|
|
|
|
|
+ font.glyphs.set(options.chars.charCodeAt(i), new h2d.Font.FontChar(t,w - 1));
|
|
|
// next element
|
|
// next element
|
|
|
- if( h > lineH ) lineH = h;
|
|
|
|
|
x += w + 1;
|
|
x += w + 1;
|
|
|
}
|
|
}
|
|
|
} while ( !done );
|
|
} while ( !done );
|
Sechgulo