Merge pull request #11587 from MoonE/fix-text-along-path-orientation

Determine orientation by actual text start and end x

src/ol/geom/flat/textpath.js

@@ -34,74 +34,114 @@ export function drawTextOnPath(
   cache,
   rotation
 ) {
-  const result = [];
+  let x2 = flatCoordinates[offset];
+  let y2 = flatCoordinates[offset + 1];
+  let x1 = 0;
+  let y1 = 0;
+  let segmentLength = 0;
+  let segmentM = 0;
+
+  function advance() {
+    x1 = x2;
+    y1 = y2;
+    offset += stride;
+    x2 = flatCoordinates[offset];
+    y2 = flatCoordinates[offset + 1];
+    segmentM += segmentLength;
+    segmentLength = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
+  }
+  do {
+    advance();
+  } while (offset < end - stride && segmentM + segmentLength < startM);
+
+  let interpolate = (startM - segmentM) / segmentLength;
+  const beginX = lerp(x1, x2, interpolate);
+  const beginY = lerp(y1, y2, interpolate);
+
+  const startOffset = offset - stride;
+  const startLength = segmentM;
+  const endM = startM + scale * measureAndCacheTextWidth(font, text, cache);
+  while (offset < end - stride && segmentM + segmentLength < endM) {
+    advance();
+  }
+  interpolate = (endM - segmentM) / segmentLength;
+  const endX = lerp(x1, x2, interpolate);
+  const endY = lerp(y1, y2, interpolate);
 
   // Keep text upright
   let reverse;
   if (rotation) {
-    const rotatedCoordinates = rotate(
-      flatCoordinates,
-      offset,
-      end,
-      stride,
-      rotation,
-      [flatCoordinates[offset], flatCoordinates[offset + 1]]
-    );
-    reverse =
-      rotatedCoordinates[0] >
-      rotatedCoordinates[rotatedCoordinates.length - stride];
+    const flat = [beginX, beginY, endX, endY];
+    rotate(flat, 0, 4, 2, rotation, flat, flat);
+    reverse = flat[0] > flat[2];
   } else {
-    reverse = flatCoordinates[offset] > flatCoordinates[end - stride];
+    reverse = beginX > endX;
   }
 
-  const numChars = text.length;
+  const PI = Math.PI;
+  const result = [];
+  const singleSegment = startOffset + stride === offset;
 
-  let x1 = flatCoordinates[offset];
-  let y1 = flatCoordinates[offset + 1];
-  offset += stride;
-  let x2 = flatCoordinates[offset];
-  let y2 = flatCoordinates[offset + 1];
-  let segmentM = 0;
-  let segmentLength = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
-  let angleChanged = false;
+  offset = startOffset;
+  segmentLength = 0;
+  segmentM = startLength;
+  x2 = flatCoordinates[offset];
+  y2 = flatCoordinates[offset + 1];
 
-  let index, previousAngle;
-  for (let i = 0; i < numChars; ++i) {
-    index = reverse ? numChars - i - 1 : i;
-    const char = text[index];
-    const charLength = scale * measureAndCacheTextWidth(font, char, cache);
-    const charM = startM + charLength / 2;
-    while (offset < end - stride && segmentM + segmentLength < charM) {
-      x1 = x2;
-      y1 = y2;
-      offset += stride;
-      x2 = flatCoordinates[offset];
-      y2 = flatCoordinates[offset + 1];
-      segmentM += segmentLength;
-      segmentLength = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
+  // All on the same segment
+  if (singleSegment) {
+    advance();
+
+    let previousAngle = Math.atan2(y2 - y1, x2 - x1);
+    if (reverse) {
+      previousAngle += previousAngle > 0 ? -PI : PI;
     }
-    const segmentPos = charM - segmentM;
+    const x = (endX + beginX) / 2;
+    const y = (endY + beginY) / 2;
+    result[0] = [x, y, (endM - startM) / 2, previousAngle, text];
+    return result;
+  }
+
+  let previousAngle;
+  for (let i = 0, ii = text.length; i < ii; ) {
+    advance();
     let angle = Math.atan2(y2 - y1, x2 - x1);
     if (reverse) {
-      angle += angle > 0 ? -Math.PI : Math.PI;
+      angle += angle > 0 ? -PI : PI;
     }
     if (previousAngle !== undefined) {
       let delta = angle - previousAngle;
-      angleChanged = angleChanged || delta !== 0;
-      delta +=
-        delta > Math.PI ? -2 * Math.PI : delta < -Math.PI ? 2 * Math.PI : 0;
+      delta += delta > PI ? -2 * PI : delta < -PI ? 2 * PI : 0;
       if (Math.abs(delta) > maxAngle) {
         return null;
       }
     }
     previousAngle = angle;
-    const interpolate = segmentPos / segmentLength;
+
+    const iStart = i;
+    let charLength = 0;
+    for (; i < ii; ++i) {
+      const index = reverse ? ii - i - 1 : i;
+      const len = scale * measureAndCacheTextWidth(font, text[index], cache);
+      if (
+        offset + stride < end &&
+        segmentM + segmentLength < startM + charLength + len / 2
+      ) {
+        break;
+      }
+      charLength += len;
+    }
+    if (i === iStart) {
+      continue;
+    }
+    const chars = reverse
+      ? text.substring(ii - iStart, ii - i)
+      : text.substring(iStart, i);
+    interpolate = (startM + charLength / 2 - segmentM) / segmentLength;
     const x = lerp(x1, x2, interpolate);
     const y = lerp(y1, y2, interpolate);
-    result[index] = [x, y, charLength / 2, angle, char];
+    result.push([x, y, charLength / 2, angle, chars]);
     startM += charLength;
   }
-  return angleChanged
-    ? result
-    : [[result[0][0], result[0][1], result[0][2], result[0][3], text]];
+  return result;
 }

src/ol/render/canvas/Executor.js

@@ -918,7 +918,9 @@ class Executor {
                   part = parts[c]; // x, y, anchorX, rotation, chunk
                   chars = /** @type {string} */ (part[4]);
                   label = this.createLabel(chars, textKey, '', strokeKey);
-                  anchorX = /** @type {number} */ (part[2]) + strokeWidth;
+                  anchorX =
+                    /** @type {number} */ (part[2]) +
+                    (textScale[0] < 0 ? -strokeWidth : strokeWidth);
                   anchorY =
                     baseline * label.height +
                     ((0.5 - baseline) * 2 * strokeWidth * textScale[1]) /