From 2079ada1a96f8ff53f13601d6020c69687facaf7 Mon Sep 17 00:00:00 2001
From: hdx <hdx@dcloud.io>
Date: Mon, 12 Aug 2024 17:34:50 +0800
Subject: [PATCH] =?UTF-8?q?canvas:=20=E8=B0=83=E6=95=B4=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=EF=BC=8C=E5=B0=86=E6=B5=8B=E8=AF=95=E7=BB=93=E6=9E=9C=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E5=88=B0=E5=BA=95=E9=83=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/component/canvas/canvas.uvue | 103 ++++++++++++++---------------
 1 file changed, 49 insertions(+), 54 deletions(-)

diff --git a/pages/component/canvas/canvas.uvue b/pages/component/canvas/canvas.uvue
index 084621b5..e0dfd791 100644
--- a/pages/component/canvas/canvas.uvue
+++ b/pages/component/canvas/canvas.uvue
@@ -1,11 +1,27 @@
 <template>
   <view class="page" id="page-canvas">
-
     <canvas id="canvas" class="canvas-element"></canvas>
     <scroll-view class="scroll-view">
+      <!-- #ifdef WEB -->
+      <button class="canvas-drawing-button" @click="canvasToBlob">canvasToBlob</button>
       <view>
-        <text style="padding: 8px 10px;">获取 CanvasContext</text>
+        <text>testToBlobResult: {{testToBlobResult}}</text>
+      </view>
+      <!-- #endif -->
+      <button class="canvas-drawing-button" id="toDataURL" @click="canvasToDataURL">canvasToDataURL</button>
+      <view class="text-group" v-if="dataBase64.length>0">
+        <text>canvasToDataURL:</text>
+        <text>{{dataBase64.slice(0,22)}}...</text>
       </view>
+      <button @click="onCreateImage">createImage</button>
+      <button @click="onCreatePath2D">createPath2D</button>
+      <button @click="startAnimationFrame">requestAnimationFrame</button>
+      <button @click="stopAnimationFrame">cancelAnimationFrame</button>
+      <view style="padding: 8px 10px;">CanvasContext API 演示</view>
+      <navigator url="./canvas-context">
+        <button>CanvasContext API</button>
+      </navigator>
+
       <view class="text-group">
         <text>获取 CanvasContext 结果：</text>
         <text id="testCanvasContext">{{testCanvasContext}}</text>
@@ -24,27 +40,6 @@
         <text>测试 createPath2D 结果：</text>
         <text id="testCreatePath2D">{{testCreatePath2D}}</text>
       </view>
-
-      <!-- #ifdef WEB -->
-      <button class="canvas-drawing-button" @click="canvasToBlob">canvasToBlob</button>
-      <view>
-        <text>testToBlobResult: {{testToBlobResult}}</text>
-      </view>
-      <!-- #endif -->
-      <button class="canvas-drawing-button" id="toDataURL" @click="canvasToDataURL">canvasToDataURL</button>
-      <view class="text-group" v-if="dataBase64.length>0">
-        <text>canvasToDataURL:</text>
-        <text>{{dataBase64.slice(0,22)}}...</text>
-      </view>
-      <button @click="onCreateImage">createImage</button>
-      <button @click="onCreatePath2D">createPath2D</button>
-      <button @click="startAnimationFrame">requestAnimationFrame</button>
-      <button @click="stopAnimationFrame">cancelAnimationFrame</button>
-      <view style="padding: 8px 10px;">CanvasContext API 演示</view>
-      <navigator url="./canvas-context">
-        <button>CanvasContext API</button>
-      </navigator>
-
     </scroll-view>
   </view>
 </template>
@@ -67,9 +62,9 @@
         renderingContext: null as CanvasRenderingContext2D | null,
         canvasWidth: 0,
         canvasHeight: 0,
-        dataBase64: '',
-        taskId: 0,
-        lastTime: 0,
+        dataBase64: '',
+        taskId: 0,
+        lastTime: 0,
         frameCount: 0,
         // 仅测试
         testCanvasContext: false,
@@ -94,7 +89,7 @@
 
           hidpi(this.canvas!);
           this.canvasWidth = this.canvas!.width;
-          this.canvasHeight = this.canvas!.height;
+          this.canvasHeight = this.canvas!.height;
 
           // #ifdef WEB
           context.toBlob((blob : Blob) => {
@@ -113,11 +108,11 @@
       // this.canvas = canvas;
       // this.canvasWidth = canvas.width;
       // this.canvasHeight = canvas.height;
-    },
-    onUnload() {
-      if (this.taskId > 0) {
-        this.stopAnimationFrame()
-      }
+    },
+    onUnload() {
+      if (this.taskId > 0) {
+        this.stopAnimationFrame()
+      }
     },
     methods: {
       // #ifdef WEB
@@ -130,7 +125,7 @@
       canvasToDataURL() {
         this.dataBase64 = this.canvasContext!.toDataURL()
       },
-      onCreateImage() {
+      onCreateImage() {
         this.renderingContext!.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
         let image = this.canvasContext!.createImage();
         image.src = "../../static/logo.png"
@@ -159,27 +154,27 @@
           path2D.bezierCurveTo(x2, y2, x3, y3, x4, y4);
         }
         context.stroke(path2D);
-      },
-      startAnimationFrame() {
-        this.taskId = this.canvasContext!.requestAnimationFrame((timestamp : number) => {
-          this.testFrameCount++
-          this.updateFPS(timestamp)
-          this.startAnimationFrame()
-        })
-      },
-      stopAnimationFrame() {
-        this.canvasContext!.cancelAnimationFrame(this.taskId)
-        this.taskId = 0
-      },
-      updateFPS(timestamp : number) {
-        this.frameCount++
-        if (timestamp - this.lastTime >= 1000) {
-          const timeOfFrame = (1000 / this.frameCount)
-          this.renderingContext!.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
-          this.renderingContext!.fillText(`${this.frameCount} / ${timeOfFrame.toFixed(3)}ms`, 10, 18)
-          this.frameCount = 0
-          this.lastTime = timestamp
-        }
+      },
+      startAnimationFrame() {
+        this.taskId = this.canvasContext!.requestAnimationFrame((timestamp : number) => {
+          this.testFrameCount++
+          this.updateFPS(timestamp)
+          this.startAnimationFrame()
+        })
+      },
+      stopAnimationFrame() {
+        this.canvasContext!.cancelAnimationFrame(this.taskId)
+        this.taskId = 0
+      },
+      updateFPS(timestamp : number) {
+        this.frameCount++
+        if (timestamp - this.lastTime >= 1000) {
+          const timeOfFrame = (1000 / this.frameCount)
+          this.renderingContext!.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
+          this.renderingContext!.fillText(`${this.frameCount} / ${timeOfFrame.toFixed(3)}ms`, 10, 18)
+          this.frameCount = 0
+          this.lastTime = timestamp
+        }
       }
     }
   }
-- 
GitLab