measureText fallback

CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+### 9.3.13 (2024-07-05)
+
+- Fallback for `Konva.Text.measureSize()` when 2d context doesn't return full data
+
 ### 9.3.12 (2024-06-20)
 
 - Fix stopped transforming when it was triggered by multi-touch

src/shapes/Text.ts

@@ -405,21 +405,30 @@ export class Text extends Shape<TextConfig> {
 
     metrics = _context.measureText(text);
     _context.restore();
+
+    // Scale the fallback values based on the provided fontSize compared to the sample size (100 in your new case)
+    const scaleFactor = fontSize / 100;
+
+    // Note, fallback values are from chrome browser with 100px font size and font-family "Arial"
     return {
-      // copy all text metrics data:
-      actualBoundingBoxAscent: metrics.actualBoundingBoxAscent,
-      actualBoundingBoxDescent: metrics.actualBoundingBoxDescent,
-      actualBoundingBoxLeft: metrics.actualBoundingBoxLeft,
-      actualBoundingBoxRight: metrics.actualBoundingBoxRight,
-      alphabeticBaseline: metrics.alphabeticBaseline,
-      emHeightAscent: metrics.emHeightAscent,
-      emHeightDescent: metrics.emHeightDescent,
-      fontBoundingBoxAscent: metrics.fontBoundingBoxAscent,
-      fontBoundingBoxDescent: metrics.fontBoundingBoxDescent,
-      hangingBaseline: metrics.hangingBaseline,
-      ideographicBaseline: metrics.ideographicBaseline,
+      actualBoundingBoxAscent:
+        metrics.actualBoundingBoxAscent ?? 71.58203125 * scaleFactor,
+      actualBoundingBoxDescent: metrics.actualBoundingBoxDescent ?? 0, // Remains zero as there is no descent in the provided metrics
+      actualBoundingBoxLeft:
+        metrics.actualBoundingBoxLeft ?? -7.421875 * scaleFactor,
+      actualBoundingBoxRight:
+        metrics.actualBoundingBoxRight ?? 75.732421875 * scaleFactor,
+      alphabeticBaseline: metrics.alphabeticBaseline ?? 0, // Remains zero as it's typically relative to the baseline itself
+      emHeightAscent: metrics.emHeightAscent ?? 100 * scaleFactor,
+      emHeightDescent: metrics.emHeightDescent ?? -20 * scaleFactor,
+      fontBoundingBoxAscent: metrics.fontBoundingBoxAscent ?? 91 * scaleFactor,
+      fontBoundingBoxDescent:
+        metrics.fontBoundingBoxDescent ?? 21 * scaleFactor,
+      hangingBaseline:
+        metrics.hangingBaseline ?? 72.80000305175781 * scaleFactor,
+      ideographicBaseline: metrics.ideographicBaseline ?? -21 * scaleFactor,
       width: metrics.width,
-      height: fontSize,
+      height: fontSize, // Typically set to the font size
     };
   }
   _getContextFont() {

test/unit/Text-test.ts

@@ -1654,7 +1654,7 @@ describe('Text', function () {
 
     assert.equal(layer.getContext().getTrace(), trace);
   });
-  
+
   it('sets ltr text direction', function () {
     var stage = addStage();
     var layer = new Konva.Layer();
@@ -1673,9 +1673,8 @@ describe('Text', function () {
 
     assert.equal(layer.getContext().getTrace(), trace);
   });
-  
-  
- it('sets rtl text direction', function () {
+
+  it('sets rtl text direction', function () {
     var stage = addStage();
     var layer = new Konva.Layer();
 
@@ -1693,7 +1692,7 @@ describe('Text', function () {
 
     assert.equal(layer.getContext().getTrace(), trace);
   });
-  
+
   it('sets rtl text direction with letterSpacing', function () {
     var stage = addStage();
     var layer = new Konva.Layer();
@@ -1713,4 +1712,22 @@ describe('Text', function () {
 
     assert.equal(layer.getContext().getTrace(), trace);
   });
+
+  it('try fixed render', () => {
+    Konva._fixTextRendering = true;
+    var stage = addStage();
+    var layer = new Konva.Layer();
+
+    stage.add(layer);
+    var text = new Konva.Text({ text: 'hello', fontSize: 100 });
+
+    layer.add(text);
+    layer.draw();
+    Konva._fixTextRendering = false;
+
+    const trace =
+      'clearRect(0,0,578,200);clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);font=normal normal 100px Arial;textBaseline=alphabetic;textAlign=left;translate(0,0);save();fillStyle=black;fillText(hello,0,85);restore();restore();';
+
+    assert.equal(layer.getContext().getTrace(), trace);
+  });
 });