From 9f3821e1e5ef0f2d8c26f0cc5f97419eba215548 Mon Sep 17 00:00:00 2001
From: jixinbao <jixinbao@dcloud.io>
Date: Fri, 26 Jul 2024 19:43:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20createCanvasContextAsync=20=E6=B5=8B?=
 =?UTF-8?q?=E8=AF=95=E6=94=AF=E6=8C=81=E5=AE=89=E5=8D=93=E3=80=81web?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../child-canvas.uvue                         | 35 +++++++-------
 .../create-canvas-context-async.test.js       | 47 ++++++++-----------
 .../create-canvas-context-async.uvue          | 35 +++++++-------
 3 files changed, 52 insertions(+), 65 deletions(-)

diff --git a/pages/API/create-canvas-context-async/child-canvas.uvue b/pages/API/create-canvas-context-async/child-canvas.uvue
index 3b76215d..408d89a7 100644
--- a/pages/API/create-canvas-context-async/child-canvas.uvue
+++ b/pages/API/create-canvas-context-async/child-canvas.uvue
@@ -1,44 +1,41 @@
 <template>
   <view>
-    <canvas class="child-canvas" id="canvas" style="height: 100px;border: 1px solid red;"></canvas>
+    <canvas class="child-canvas" id="canvas" style="height: 100px;border: 1px solid red;"></canvas>
    <view>isCanvasContextNull: {{isCanvasContextNull}}</view>
   </view>
 </template>
 
 <script>
+  type getContext = {
+    ctx : boolean,
+    hasFillRect : boolean
+  }
+
   export default {
     data() {
-      return {
-        context: null as CanvasRenderingContext2D | null
-      }
-    },
-    getContext() {
-      return {
-        ctx: typeof this.context,
-        hasFillRect: typeof this.context?.fillRect === 'function',
+      return {
        isCanvasContextNull : false
       }
     },
+  
     mounted() {
       this.$nextTick(() => {
         uni.createCanvasContextAsync({
           id: 'canvas',
           component: this,
           success: (res : CanvasContext) => {
-            console.log('child component', res);
-            this.context = res.getContext('2d');
+            const context = res.getContext('2d')!;
            this.isCanvasContextNull = true
             // 若干绘制调用
             // 绘制红色正方形
-            this.context.fillStyle = "rgb(200, 0, 0)";
-            this.context.fillRect(10, 10, 50, 50);
+            context.fillStyle = "rgb(200, 0, 0)";
+            context.fillRect(10, 10, 50, 50);
 
             // 绘制蓝色半透明正方形
-            this.context.fillStyle = "rgba(0, 0, 200, 0.5)";
-            this.context.fillRect(30, 30, 50, 50);
-            this.context.draw();
-          },
-          fail: (err : UniError) => {
+            context.fillStyle = "rgba(0, 0, 200, 0.5)";
+            context.fillRect(30, 30, 50, 50);
+            context.draw();
           }
+
         })
       })
     }
   }
-</script>
+</script>
\ No newline at end of file
diff --git a/pages/API/create-canvas-context-async/create-canvas-context-async.test.js b/pages/API/create-canvas-context-async/create-canvas-context-async.test.js
index 7eef070d..8b06db93 100644
--- a/pages/API/create-canvas-context-async/create-canvas-context-async.test.js
+++ b/pages/API/create-canvas-context-async/create-canvas-context-async.test.js
@@ -1,32 +1,25 @@
 const PAGE_PATH = '/pages/API/create-canvas-context-async/create-canvas-context-async'
 
 describe('create-canvas-context-async', () => {
-	if (!process.env.uniTestPlatformInfo.toLowerCase().startsWith('ios')) {
-		it('ios only', () => {
-			expect(1).toBe(1)
-		})
-		return
-	}
-	let page
-	beforeAll(async () => {
-		page = await program.reLaunch(PAGE_PATH)
-		await page.waitFor('view')
-	})
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor('view')
+  })
 
-	it('page canvas', async () => {
-		await page.waitFor(100)
-		const data = await page.callMethod('getContext')
-		expect(data.ctx).toBe('object')
-		expect(data.hasFillRect).toBe(true)
-	})
+  it('page canvas', async () => {
+    await page.waitFor(100)
+    const data = await page.data()
+    expect(data.isCanvasContextNull).toBe(true)
+  })
 
-	it('component canvas', async () => {
-		// child-canvas
-		await page.waitFor(100)
-		// const element = await page.$('.node-child-component')
-		const element = await page.$('child-canvas')
-		const data = await page.callMethod('getContext')
-		expect(data.ctx).toBe('object')
-		expect(data.hasFillRect).toBe(true)
-	})
-})
+  it('component canvas', async () => {
+    // child-canvas
+    await page.waitFor(100)
+    // const element = await page.$('.node-child-component')
+    const element = await page.$('child-canvas')
+    const data = await page.data()
+    expect(data.isCanvasContextNull).toBe(true)
+
+  })
+})
\ No newline at end of file
diff --git a/pages/API/create-canvas-context-async/create-canvas-context-async.uvue b/pages/API/create-canvas-context-async/create-canvas-context-async.uvue
index 9805decf..27f3aa3b 100644
--- a/pages/API/create-canvas-context-async/create-canvas-context-async.uvue
+++ b/pages/API/create-canvas-context-async/create-canvas-context-async.uvue
@@ -2,48 +2,45 @@
   <view>
     <view>create canvas context async</view>
     <canvas id="canvas" class="canvas-home" style="height: 100px;border: 1px solid blue;"></canvas>
-    <view style="margin-top: 30px;"></view>
+    <view style="margin-top: 30px;"></view>
    <view>isCanvasContextNull: {{isCanvasContextNull}}</view>
     <child-canvas class="node-child-component" />
   </view>
 </template>
 
 <script>
   import childCanvas from './child-canvas.uvue';
+
+  type getContext = {
+    ctx : boolean,
+    hasFillRect : boolean
+  }
   export default {
     components: {
       childCanvas
     },
     data() {
       return {
-        context: null as CanvasRenderingContext2D | null
+        isCanvasContextNull: false
       }
     },
     methods: {
-      // 自动化测试
-      getContext() {
-        return {
-          ctx: typeof this.context,
-          hasFillRect: typeof this.context?.fillRect === 'function',
-        }
-      },
+
       drawImage() {
-        console.log(876);
         uni.createCanvasContextAsync({
           id: 'canvas',
           component: null,
           success: (res : CanvasContext) => {
-            this.context = res.getContext('2d');
+            const context = res.getContext('2d')!;
+            this.isCanvasContextNull = true
             // 若干绘制调用
             // 绘制红色正方形
-            this.context.fillStyle = "rgb(200, 0, 0)";
-            this.context.fillRect(10, 10, 50, 50);
+            context.fillStyle = "rgb(200, 0, 0)";
+            context.fillRect(10, 10, 50, 50);
 
             // 绘制蓝色半透明正方形
-            this.context.fillStyle = "rgba(0, 0, 200, 0.5)";
-            this.context.fillRect(30, 30, 50, 50);
-            this.context.draw();
-          },
-          fail: (err : UniError) => {
+            context.fillStyle = "rgba(0, 0, 200, 0.5)";
+            context.fillRect(30, 30, 50, 50);
+            context.draw();
           }
         })
       }
@@ -52,4 +49,4 @@
       this.drawImage()
     }
   }
-</script>
+</script>
\ No newline at end of file
-- 
GitLab