Merge pull request #10574 from ahocevar/text-background

Text rendering improvements

src/ol/render/canvas.js

@@ -4,7 +4,6 @@
 import {getFontParameters} from '../css.js';
 import {createCanvasContext2D} from '../dom.js';
 import {clear} from '../obj.js';
-import {create as createTransform} from '../transform.js';
 import {executeLabelInstructions} from './canvas/Executor.js';
 import BaseObject from '../Object.js';
 import EventTarget from '../events/Target.js';
@@ -383,9 +382,6 @@ export function rotateAtOffset(context, rotation, offsetX, offsetY) {
 }
 
 
-export const resetTransform = createTransform();
-
-
 /**
  * @param {CanvasRenderingContext2D} context Context.
  * @param {import("../transform.js").Transform|null} transform Transform.
@@ -401,30 +397,21 @@ export const resetTransform = createTransform();
  */
 export function drawImageOrLabel(context,
   transform, opacity, labelOrImage, originX, originY, w, h, x, y, scale) {
-  let alpha;
-  if (opacity != 1) {
-    alpha = context.globalAlpha;
-    context.globalAlpha = alpha * opacity;
-  }
+  context.save();
+
   if (transform) {
     context.setTransform.apply(context, transform);
   }
 
-  const isLabel = !!(/** @type {*} */ (labelOrImage).contextInstructions);
-
-  if (isLabel) {
+  if ((/** @type {*} */ (labelOrImage).contextInstructions)) {
+    // label
     context.translate(x, y);
     context.scale(scale, scale);
     executeLabelInstructions(/** @type {import("./canvas/Executor.js").Label} */ (labelOrImage), context);
   } else {
+    // image
     context.drawImage(/** @type {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement} */ (labelOrImage), originX, originY, w, h, x, y, w * scale, h * scale);
   }
 
-  if (opacity != 1) {
-    context.globalAlpha = alpha;
-  }
-
-  if (transform || isLabel) {
-    context.setTransform.apply(context, resetTransform);
-  }
+  context.restore();
 }

src/ol/render/canvas/Executor.js

@@ -173,6 +173,12 @@ class Executor {
      * @type {Object<string, Object<string, number>>}
      */
     this.widths_ = {};
+
+    /**
+     * @private
+     * @type {Object<string, Label>}
+     */
+    this.labels_ = {};
   }
 
   /**
@@ -183,6 +189,10 @@ class Executor {
    * @return {Label} Label.
    */
   createLabel(text, textKey, fillKey, strokeKey) {
+    const key = text + textKey + fillKey + strokeKey;
+    if (this.labels_[key]) {
+      return this.labels_[key];
+    }
     const strokeState = strokeKey ? this.strokeStates[strokeKey] : null;
     const fillState = fillKey ? this.fillStates[fillKey] : null;
     const textState = this.textStates[textKey];
@@ -239,6 +249,7 @@ class Executor {
         contextInstructions.push('fillText', [lines[i], x + leftRight * widths[i], 0.5 * (strokeWidth + lineHeight) + i * lineHeight]);
       }
     }
+    this.labels_[key] = label;
     return label;
   }