From eaa9de63003c0213588b8ac2758a41895fe7ec29 Mon Sep 17 00:00:00 2001
From: hdx <hdx@dcloud.io>
Date: Tue, 6 Aug 2024 18:02:17 +0800
Subject: [PATCH] =?UTF-8?q?feat(canvas):=20=E5=A2=9E=E5=8A=A0=20Path2D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/component/canvas/canvas.uvue | 33 ++++++++++++++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/pages/component/canvas/canvas.uvue b/pages/component/canvas/canvas.uvue
index 335a02ad..75be89c3 100644
--- a/pages/component/canvas/canvas.uvue
+++ b/pages/component/canvas/canvas.uvue
@@ -72,7 +72,7 @@
         testCanvasContext: false,
         testToBlobResult: false,
         testToDataURLResult: false,
-        names: [...API_PATH, ...API_DRAW, ...API_STATE, ...API_PROPERTIES, "measureText"] as string[],
+        names: [...API_PATH, ...API_DRAW, ...API_STATE, ...API_PROPERTIES, "measureText", "path2D"] as string[],
         // 仅测试
         testCreateCanvasContextAsyncSuccess: false,
         testCreateImage: false
@@ -255,7 +255,11 @@
             this.setMiterLimit();
             break;
           case "textAlign":
-            this.textAlign();
+            this.textAlign();
+            break;
+          case "path2D":
+            this.path2DMethods();
+            break;
           default:
             break;
         }
@@ -824,6 +828,31 @@
         const textMetrics = context.measureText(text)
         context.strokeText(text, 40, 100)
         context.fillText("measure text width:" + textMetrics.width, 40, 80)
+      },
+      path2DMethods() {
+        const context = this.renderingContext!
+
+        context.beginPath()
+        const path2D = new Path2D();
+        const amplitude  = 64;
+        const wavelength = 64;
+        for (let i = 0; i < 5; i++) {
+            const x1 = 0 + (i * wavelength);
+            const y1 = 128;
+            const x2 = x1 + wavelength / 4;
+            const y2 = y1 - amplitude;
+            const x3 = x1 + 3 * wavelength / 4;
+            const y3 = y1 + amplitude;
+            const x4 = x1 + wavelength;
+            const y4 = y1;
+            context.moveTo(x1, y1);
+            path2D.bezierCurveTo(x2, y2, x3, y3, x4, y4);
+        }
+        context.stroke(path2D);
+
+        const path2DRect = new Path2D();
+        path2DRect.rect(10, 10, 100, 20);
+        context.fill(path2DRect);
       }
     }
   }
-- 
GitLab