More work on Text Metrics.

Author: photonstorm

v3/src/checksum.js

@@ -1,4 +1,4 @@
 var CHECKSUM = {
-build: '82df6ea0-29e5-11e7-b20f-b54acd53d89d'
+build: '0f38b2a0-2a25-11e7-8a74-77857ab38da8'
 };
 module.exports = CHECKSUM;

v3/src/gameobjects/text/MeasureText.js

@@ -9,8 +9,7 @@ var CanvasPool = require('../../dom/CanvasPool');
 */
 var MeasureText = function (textStyle, testString)
 {
-    if (testString === undefined) { testString = '|MÉq'; }
-    // if (testString === undefined) { testString = 'ABCDEFG'; }
+    if (testString === undefined) { testString = '|MÉqgy'; }
 
     /**
      * @property {HTMLCanvasElement} canvas - The canvas element that the text is rendered.
@@ -22,6 +21,9 @@ var MeasureText = function (textStyle, testString)
      */
     var context = canvas.getContext('2d');
 
+    //   DEBUG :)
+    // document.body.appendChild(canvas);
+
     textStyle.syncFont(canvas, context);
 
     var width = Math.ceil(context.measureText(testString).width);
@@ -38,8 +40,7 @@ var MeasureText = function (textStyle, testString)
 
     context.font = textStyle.font;
 
-    // context.textBaseline = 'alphabetic';
-    context.textBaseline = 'middle';
+    context.textBaseline = 'alphabetic';
     context.fillStyle = '#000';
     context.fillText(testString, 0, baseline);
 
@@ -68,6 +69,9 @@ var MeasureText = function (textStyle, testString)
     var idx = 0;
     var stop = false;
 
+    context.fillStyle = '#00ff00';
+    context.fillRect(0, baseline, width, 1);
+
     // ascent. scan from top to bottom until we find a non red pixel
     for (i = 0; i < baseline; i++)
     {
@@ -76,6 +80,8 @@ var MeasureText = function (textStyle, testString)
             if (imagedata[idx + j] !== 255)
             {
                 stop = true;
+                context.fillStyle = '#ffff00';
+                context.fillRect(0, i, width, 1);
                 break;
             }
         }
@@ -103,6 +109,8 @@ var MeasureText = function (textStyle, testString)
             if (imagedata[idx + j] !== 255)
             {
                 stop = true;
+                context.fillStyle = '#ffffff';
+                context.fillRect(0, i, width, 1);
                 break;
             }
         }
@@ -117,11 +125,11 @@ var MeasureText = function (textStyle, testString)
         }
     }
 
-    output.descent = (i - baseline) + 6;
+    output.descent = (i - baseline);
     output.fontSize = output.ascent + output.descent;
 
-    CanvasPool.remove(canvas);
-
+    //  DEBUG
+    // CanvasPool.remove(canvas);
     console.log(output);
 
     return output;

v3/src/gameobjects/text/static/Text.js

@@ -221,7 +221,7 @@ var Text = new Class({
 
         style.syncFont(canvas, context);
 
-        context.textBaseline = 'middle';
+        context.textBaseline = 'alphabetic';
 
         //  Apply padding
         context.translate(padding.x, padding.y);