Add new option to CanvasFont "getCharScale" which returns scale factor 0-1 for a code point (playcanvas#1307)

daredevildave · web-flow · commit 50e83c355b3c · 2018-08-21T09:52:56.000-07:00
Default CanvasFont scale works for most characters, for particular fonts or characters a custom scale may be required
Provide your own function that returns a scale 0-1 for a code point to customize
diff --git a/examples/canvas-font/index.html b/examples/canvas-font/index.html
@@ -41,7 +41,15 @@
                 fontName: "Arial",
                 fontSize: size,
                 width: 128,
-                height: 128
+                height: 128,
+                getCharScale: function (code) {
+                    // finger pointing up is a particular long character, use more scaling
+                    if (code === 0x261D) {
+                        return 0.8;
+                    } else {
+                        return -1; // use default scaler
+                    }
+                }
             });
 
             var asset = new pc.Asset("CanvasFont", "font", {});
@@ -87,7 +95,7 @@
 
             // some sample text
             var firstline = "ÉÅAå 東京 🐇🔥🂡 font";
-            var secondline = "😀😀😀🤢🤥🤝😻👍👨‍🎤😡💪🏿😍🤔💽🦀🍑👻😗😏😒👽👾🎃😺💩😈🤒💑👢🐭🦁🐸🐍🦐🐙";
+            var secondline = "☝😀😀😀🤢🤥🤝😻👍👨‍🎤😡💪🏿😍🤔💽🦀🍑👻😗😏😒👽👾🎃😺💩😈🤒💑👢🐭🦁🐸🐍🦐🐙";
             var thirdline = "Testing MSDF font";
 
             cf.createTextures(firstline);
diff --git a/src/framework/components/text/canvas-font.js b/src/framework/components/text/canvas-font.js
@@ -30,6 +30,7 @@ Object.assign(pc, function () {
      * @param {pc.Color} [options.color] The color the font will be rendered into the texture atlas as, defaults to white
      * @param {Number} [options.width] The width of each texture atlas, defaults to 2048
      * @param {Number} [options.height] The height of each texture atlas, defaults to 2048
+     * @param {Number} [options.getCharScale] A custom function which takes a codepoint and return scale value 0-1 to scale char down before rendering into atlas. Return -1 to use default scale value.
      */
     var CanvasFont = function (app, options) {
         this.type = "bitmap";
@@ -45,6 +46,8 @@ Object.assign(pc, function () {
         this.fontName = options.fontName || 'Arial';
         this.color = options.color || new pc.Color(1, 1, 1);
 
+        this._customGetCharScale = options.getCharScale || null;
+
         var w = options.width > MAX_TEXTURE_SIZE ? MAX_TEXTURE_SIZE : (options.width || DEFAULT_TEXTURE_SIZE);
         var h = options.height > MAX_TEXTURE_SIZE ? MAX_TEXTURE_SIZE : (options.height || DEFAULT_TEXTURE_SIZE);
 
@@ -190,7 +193,7 @@ Object.assign(pc, function () {
             var ch = symbols[i];
             var code = pc.string.getCodePoint(symbols[i]);
 
-            var fs = this.getCharScale(code) * this.fontSize;
+            var fs = this._getCharScale(code) * this.fontSize;
             ctx.font = this.fontWeight + ' ' + fs.toString() + 'px "' + this.fontName + '"';
             ctx.textAlign = TEXT_ALIGN;
             ctx.textBaseline = TEXT_BASELINE;
@@ -289,26 +292,33 @@ Object.assign(pc, function () {
     //
     // If we required we can allow a user-custom function here that users can
     // supply special cases for their character set
-    CanvasFont.prototype.getCharScale = function (code) {
-        var scale = 1.0;
+    CanvasFont.prototype._getCharScale = function (code) {
+        // if a custom scale function is available use it
+        // custom scale function can ignore chars by return -1
+        if (this._customGetCharScale) {
+            var scale = this._customGetCharScale(code);
+            if (scale >= 0) {
+                return scale;
+            }
+        }
 
         if (code >= 0x00C0 && code <= 0x00DD) {
             // capital letters with accents
-            scale = (this.fontSize - (this.fontSize / 8)) / this.fontSize;
+            return 0.875;
         } else if (code >= 0x1f000 && code <= 0x1F9FF) {
             // "emoji" misc. images and emoticon range of unicode
-            scale = (this.fontSize - (this.fontSize / 8)) / this.fontSize;
+            return 0.875;
         }
 
-        return scale;
+        return 1.0;
     };
 
     CanvasFont.prototype._addChar = function (json, char, charCode, x, y, w, h, xoffset, yoffset, xadvance, mapNum, mapW, mapH) {
         if (json.info.maps.length < mapNum + 1) {
             json.info.maps.push({ "width": mapW, "height": mapH });
         }
 
-        var scale = this.getCharScale(charCode) * this.fontSize / 32;
+        var scale = this._getCharScale(charCode) * this.fontSize / 32;
 
         json.chars[charCode] = {
             "id": charCode,
