fix: recalc paint_x according to align if maxWidth is set

Brooooooklyn · Feb 20, 2023 · 1b3ca96 · 1b3ca96
1 parent b072978
commit 1b3ca96
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 1 deletion.
diff --git a/__test__/regression.spec.ts b/__test__/regression.spec.ts
@@ -124,3 +124,49 @@ test('draw-text-maxWidth', async (t) => {
   ctx.fillText(`Very ${'long '.repeat(2)} text`, pad, 80, maxWidth)
   await snapshotImage(t, { ctx, canvas })
 })
+
+test('draw-text-right-maxWidth', async (t) => {
+  GlobalFonts.registerFromPath(join(__dirname, 'fonts', 'iosevka-slab-regular.ttf'))
+  const canvas = createCanvas(500, 100)
+  const ctx = canvas.getContext('2d')
+  const padding = 50
+  const maxWidth = canvas.width - padding * 2
+  // The background
+  ctx.fillRect(0, 0, canvas.width, canvas.height)
+  ctx.fillStyle = 'blue'
+  ctx.fillRect(padding, 0, maxWidth, canvas.height)
+  ctx.font = '16px Arial'
+  ctx.textAlign = 'right'
+  ctx.fillStyle = 'white'
+  ctx.textBaseline = 'top'
+  /** Short text */
+  ctx.fillText('Short text', canvas.width - padding, 10, maxWidth)
+  /** Very long text (10 repetitions) */
+  ctx.fillText(`Very ${'long '.repeat(10)} text`, canvas.width - padding, 30, maxWidth)
+  /** Very long text (20 repetitions) */
+  ctx.fillText(`Very ${'long '.repeat(20)} text`, canvas.width - padding, 50, maxWidth)
+  await snapshotImage(t, { ctx, canvas })
+})
+
+test('draw-text-center-maxWidth', async (t) => {
+  GlobalFonts.registerFromPath(join(__dirname, 'fonts', 'iosevka-slab-regular.ttf'))
+  const canvas = createCanvas(500, 100)
+  const ctx = canvas.getContext('2d')
+  const padding = 50
+  const maxWidth = canvas.width - padding * 2
+  // The background
+  ctx.fillRect(0, 0, canvas.width, canvas.height)
+  ctx.fillStyle = 'blue'
+  ctx.fillRect(padding, 0, maxWidth, canvas.height)
+  ctx.font = '16px Arial'
+  ctx.textAlign = 'center'
+  ctx.fillStyle = 'white'
+  ctx.textBaseline = 'top'
+  /** Short text */
+  ctx.fillText('Short text', canvas.width / 2, 10, maxWidth)
+  /** Very long text (10 repetitions) */
+  ctx.fillText(`Very ${'long '.repeat(10)} text`, canvas.width / 2, 30, maxWidth)
+  /** Very long text (20 repetitions) */
+  ctx.fillText(`Very ${'long '.repeat(20)} text`, canvas.width / 2, 50, maxWidth)
+  await snapshotImage(t, { ctx, canvas })
+})
diff --git a/__test__/snapshots/draw-text-center-maxWidth.png b/__test__/snapshots/draw-text-center-maxWidth.png
diff --git a/__test__/snapshots/draw-text-right-maxWidth.png b/__test__/snapshots/draw-text-right-maxWidth.png
diff --git a/skia-c/skia_c.cpp b/skia-c/skia_c.cpp
@@ -472,16 +472,19 @@ extern "C"
 
     auto line_center = line_width / 2.0f;
     float paint_x;
+    float offset_x = 0.0;
     switch ((TextAlign)align)
     {
     case TextAlign::kLeft:
       paint_x = x;
       break;
     case TextAlign::kCenter:
       paint_x = x - line_center;
+      offset_x = line_center;
       break;
     case TextAlign::kRight:
       paint_x = x - line_width;
+      offset_x = line_width;
       break;
     // Unreachable
     case TextAlign::kJustify:
@@ -495,6 +498,7 @@ extern "C"
       else
       {
         paint_x = x - line_width;
+        offset_x = line_width;
       }
       break;
     case TextAlign::kEnd:
@@ -505,6 +509,7 @@ extern "C"
       else
       {
         paint_x = x - line_width;
+        offset_x = line_width;
       }
       break;
     };
@@ -519,7 +524,7 @@ extern "C"
         CANVAS_CAST->scale(ratio, 1.0);
       }
       auto paint_y = y + baseline_offset;
-      paragraph->paint(CANVAS_CAST, need_scale ? paint_x / ratio : paint_x, paint_y);
+      paragraph->paint(CANVAS_CAST, need_scale ? (paint_x + (1 - ratio) * offset_x) / ratio : paint_x, paint_y);
       if (need_scale)
       {
         CANVAS_CAST->restore();