Merge pull request #2322 from AnalyticalGraphicsInc/font-outlines

Improve font rendering and outlines
CesiumGS · Dec 17, 2014 · 890357c · 890357c
2 parents 1cd10af + 018d15f
commit 890357c
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 21 deletions.
diff --git a/Apps/SampleData/simple.czml b/Apps/SampleData/simple.czml
@@ -251,15 +251,14 @@
           255,0,0,255
         ]
       },
-      "font":"21pt Lucida Console",
+      "font":"11pt Lucida Console",
       "horizontalOrigin":"LEFT",
       "outlineColor":{
         "rgba":[
           0,0,0,255
         ]
       },
       "outlineWidth":2,
-      "scale":0.5,
       "show":true,
       "style":"FILL_AND_OUTLINE",
       "text":"Pennsylvania",
@@ -332,7 +331,7 @@
           0,255,255,255
         ]
       },
-      "font":"21pt Lucida Console",
+      "font":"11pt Lucida Console",
       "horizontalOrigin":"LEFT",
       "outlineColor":{
         "rgba":[
@@ -345,7 +344,6 @@
           12,0
         ]
       },
-      "scale":0.5,
       "show":true,
       "style":"FILL_AND_OUTLINE",
       "text":"AGI",
@@ -385,7 +383,7 @@
           0,255,0,255
         ]
       },
-      "font":"21pt Lucida Console",
+      "font":"11pt Lucida Console",
       "horizontalOrigin":"LEFT",
       "outlineColor":{
         "rgba":[
@@ -398,7 +396,6 @@
           12,0
         ]
       },
-      "scale":0.5,
       "show":true,
       "style":"FILL_AND_OUTLINE",
       "text":"Geoeye 1",
@@ -1374,7 +1371,7 @@
           255,0,255,255
         ]
       },
-      "font":"21pt Lucida Console",
+      "font":"11pt Lucida Console",
       "horizontalOrigin":"LEFT",
       "outlineColor":{
         "rgba":[
@@ -1387,7 +1384,6 @@
           12,0
         ]
       },
-      "scale":0.5,
       "show":true,
       "style":"FILL_AND_OUTLINE",
       "text":"ISS",
@@ -2026,7 +2022,7 @@
           255,255,0,255
         ]
       },
-      "font":"21pt Lucida Console",
+      "font":"11pt Lucida Console",
       "horizontalOrigin":"LEFT",
       "outlineColor":{
         "rgba":[
@@ -2039,7 +2035,6 @@
           6,-4
         ]
       },
-      "scale":0.5,
       "show":true,
       "style":"FILL_AND_OUTLINE",
       "text":"Molniya 1-92",

diff --git a/CHANGES.md b/CHANGES.md
@@ -9,6 +9,7 @@ Change Log
 * Deprecated
   * `Rectangle.intersectWith` was deprecated in Cesium 1.5. It will be removed in Cesium 1.6. Use `Rectangle.intersection`, which is the same but returns `undefined` when two rectangles do not intersect.
   * `Rectangle.isEmpty` was deprecated in Cesium 1.5. It will be removed in Cesium 1.6.
+* Dramatically improve the quality of font outlines.
 * Improved polygon loading performance.
 * Fixed upsampleQuantizedTerrainMesh rounding errors that had occasionally led to missing terrain skirt geometry in upsampled tiles.
 * Improved GeoJSON loading performance.

diff --git a/Source/Core/writeTextToCanvas.js b/Source/Core/writeTextToCanvas.js
@@ -13,6 +13,8 @@ define([
         DeveloperError) {
     "use strict";
 
+    var imageSmoothingEnabledName;
+
     /**
      * Writes the given text into a new canvas.  The canvas will be sized to fit the text.
      * If text is blank, returns undefined.
@@ -42,13 +44,33 @@ define([
 
         options = defaultValue(options, defaultValue.EMPTY_OBJECT);
         var font = defaultValue(options.font, '10px sans-serif');
+        var stroke = defaultValue(options.stroke, false);
+        var fill = defaultValue(options.fill, true);
+        var strokeWidth = defaultValue(options.strokeWidth, 1);
 
         var canvas = document.createElement('canvas');
-        canvas.width = canvas.height = 1;
+        canvas.width = 1;
+        canvas.height = 1;
         canvas.style.font = font;
 
         var context2D = canvas.getContext('2d');
+
+        if (!defined(imageSmoothingEnabledName)) {
+            if (defined(context2D.imageSmoothingEnabled)) {
+                imageSmoothingEnabledName = 'imageSmoothingEnabled';
+            } else if (defined(context2D.mozImageSmoothingEnabled)) {
+                imageSmoothingEnabledName = 'mozImageSmoothingEnabled';
+            } else if (defined(context2D.webkitImageSmoothingEnabled)) {
+                imageSmoothingEnabledName = 'webkitImageSmoothingEnabled';
+            } else if (defined(context2D.msImageSmoothingEnabled)) {
+                imageSmoothingEnabledName = 'msImageSmoothingEnabled';
+            }
+        }
+
         context2D.font = font;
+        context2D.lineJoin = 'round';
+        context2D.lineWidth = strokeWidth;
+        context2D[imageSmoothingEnabledName] = false;
 
         // textBaseline needs to be set before the measureText call. It won't work otherwise.
         // It's magic.
@@ -59,29 +81,27 @@ define([
         canvas.style.visibility = 'hidden';
         document.body.appendChild(canvas);
 
-        var stroke = defaultValue(options.stroke, false);
-        var fill = defaultValue(options.fill, true);
-        var strokeWidth = defaultValue(options.strokeWidth, 1) * 2;
-
-        context2D.lineWidth = strokeWidth;
         var dimensions = measureText(context2D, text, stroke, fill);
+        dimensions.computedWidth = Math.max(dimensions.width, dimensions.bounds.maxx - dimensions.bounds.minx);
         canvas.dimensions = dimensions;
 
         document.body.removeChild(canvas);
         canvas.style.visibility = '';
 
         var baseline = dimensions.height - dimensions.ascent;
-        canvas.width = dimensions.width;
+        canvas.width = dimensions.computedWidth;
         canvas.height = dimensions.height;
         var y = canvas.height - baseline;
 
-        // font must be explicitly set again after changing width and height
+        // Properties must be explicitly set again after changing width and height
         context2D.font = font;
+        context2D.lineJoin = 'round';
+        context2D.lineWidth = strokeWidth;
+        context2D[imageSmoothingEnabledName] = false;
 
         if (stroke) {
             var strokeColor = defaultValue(options.strokeColor, Color.BLACK);
             context2D.strokeStyle = strokeColor.toCssColorString();
-            context2D.lineWidth = strokeWidth;
             context2D.strokeText(text, 0, y);
         }
 

diff --git a/Source/Scene/LabelCollection.js b/Source/Scene/LabelCollection.js
@@ -223,7 +223,7 @@ define([
         for (glyphIndex = 0; glyphIndex < glyphLength; ++glyphIndex) {
             glyph = glyphs[glyphIndex];
             dimensions = glyph.dimensions;
-            totalWidth += dimensions.width;
+            totalWidth += dimensions.computedWidth;
             maxHeight = Math.max(maxHeight, dimensions.height);
         }
 
@@ -258,7 +258,7 @@ define([
                 glyph.billboard._setTranslate(glyphPixelOffset);
             }
 
-            glyphPixelOffset.x += dimensions.width * scale * resolutionScale;
+            glyphPixelOffset.x += dimensions.computedWidth * scale * resolutionScale;
         }
     }