From f67cf296a506e30eb2f7f8ef8648eb77c4c5993d Mon Sep 17 00:00:00 2001
From: jixinbao <jixinbao@dcloud.io>
Date: Thu, 8 Aug 2024 11:54:53 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20canvas=20CreatePat?=
 =?UTF-8?q?h2D=20=E7=9B=B8=E5=85=B3=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/component/canvas/canvas.test.js |  24 ++++--
 pages/component/canvas/canvas.uvue    | 101 +++++++++++++++++---------
 2 files changed, 83 insertions(+), 42 deletions(-)

diff --git a/pages/component/canvas/canvas.test.js b/pages/component/canvas/canvas.test.js
index 5a94c79a..5d489959 100644
--- a/pages/component/canvas/canvas.test.js
+++ b/pages/component/canvas/canvas.test.js
@@ -40,10 +40,22 @@ describe('Canvas.uvue', () => {
     expect(await element.text()).toBe('true')
   })
   // 配合安卓注释
-  // it('测试 createImage', async () => {
-  //   await page.callMethod('onCreateImage');
-  //   await page.waitFor(500) // 加载图片
-  //   const element = await page.$('#testCreateImage')
-  //   expect(await element.text()).toBe('true')
-  // })
+  it('测试 createImage', async () => {
+    if (process.env.uniTestPlatformInfo.toLowerCase().startsWith('web')) {
+      // web skip
+      expect(true).toBe(true)
+    } else {
+      await page.callMethod('onCreateImage');
+      await page.waitFor(500) // 加载图片
+      const element = await page.$('#testCreateImage')
+      expect(await element.text()).toBe('true')
+    }
+  })
+  it('测试 testCreatePath2D', async () => {
+    // onCreatePath2D
+    await page.callMethod('onCreatePath2D');
+    await page.waitFor(50)
+    const element = await page.$('#testCreatePath2D')
+    expect(await element.text()).toBe('true')
+  })
 })
diff --git a/pages/component/canvas/canvas.uvue b/pages/component/canvas/canvas.uvue
index 75be89c3..cabbed4e 100644
--- a/pages/component/canvas/canvas.uvue
+++ b/pages/component/canvas/canvas.uvue
@@ -20,6 +20,11 @@
         <text id="testCreateImage">{{testCreateImage}}</text>
       </view>
 
+      <view class="text-group">
+        <text>测试 createPath2D 结果：</text>
+        <text id="testCreatePath2D">{{testCreatePath2D}}</text>
+      </view>
+
       <!-- #ifdef WEB -->
       <button class="canvas-drawing-button" @click="canvasToBlob">canvasToBlob</button>
       <view>
@@ -32,6 +37,7 @@
         <text>{{dataBase64.slice(0,22)}}...</text>
       </view>
       <button @click="onCreateImage">createImage</button>
+      <button @click="onCreatePath2D">createPath2D</button>
       <view style="padding: 8px 10px;">CanvasContext API 演示</view>
       <view class="grid-view">
         <view class="grid-item" v-for="(name, index) in names" :key="index">
@@ -75,7 +81,8 @@
         names: [...API_PATH, ...API_DRAW, ...API_STATE, ...API_PROPERTIES, "measureText", "path2D"] as string[],
         // 仅测试
         testCreateCanvasContextAsyncSuccess: false,
-        testCreateImage: false
+        testCreateImage: false,
+        testCreatePath2D: false
       }
     },
     onReady() {
@@ -122,13 +129,35 @@
       canvasToDataURL() {
         this.dataBase64 = this.canvasContext!.toDataURL()
       },
-      onCreateImage() {
-        // let image = this.canvasContext!.createImage();
-        // image.src = "../../static/logo.png"
-        // image.onload = () => {
-        //   this.testCreateImage = true
-        //   this.renderingContext?.drawImage(image, 0, 0, 100, 100);
-        // }
+      onCreateImage() {
+        this.renderingContext!.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
+        let image = this.canvasContext!.createImage();
+        image.src = "../../static/logo.png"
+        image.onload = () => {
+          this.testCreateImage = true
+          this.renderingContext?.drawImage(image, 0, 0, 100, 100);
+        }
+      },
+      onCreatePath2D() {
+        this.renderingContext!.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
+        const context = this.renderingContext!
+        let path2D = this.canvasContext!.createPath2D()
+        this.testCreatePath2D = true
+        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);
       },
       handleCanvasButton(name : string) {
         this.renderingContext!.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
@@ -255,10 +284,10 @@
             this.setMiterLimit();
             break;
           case "textAlign":
-            this.textAlign();
-            break;
-          case "path2D":
-            this.path2DMethods();
+            this.textAlign();
+            break;
+          case "path2D":
+            this.path2DMethods();
             break;
           default:
             break;
@@ -828,31 +857,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);
+        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