From 34827a765ecc476c610dfdc058f73f5a5db23f8c Mon Sep 17 00:00:00 2001
From: jixinbao <jixinbao@dcloud.io>
Date: Mon, 22 Jul 2024 17:31:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20createCanvasContex?=
 =?UTF-8?q?tAsync=20=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                    | 13 +++++
 .../child-canvas.uvue                         | 44 +++++++++++++++
 .../create-canvas-context-async.test.js       | 32 +++++++++++
 .../create-canvas-context-async.uvue          | 55 +++++++++++++++++++
 4 files changed, 144 insertions(+)
 create mode 100644 pages/API/create-canvas-context-async/child-canvas.uvue
 create mode 100644 pages/API/create-canvas-context-async/create-canvas-context-async.test.js
 create mode 100644 pages/API/create-canvas-context-async/create-canvas-context-async.uvue

diff --git a/pages.json b/pages.json
index f350052c..0db6cc82 100644
--- a/pages.json
+++ b/pages.json
@@ -1091,6 +1091,15 @@
 				"navigationBarTitleText": "createSelectorQuery | 创建 SelectorQuery 实例"
 			}
 		},
+		// #ifdef APP-IOS
+		{
+			"path": "pages/API/create-canvas-context-async/create-canvas-context-async",
+			"group": "1,3,2",
+			"style": {
+				"navigationBarTitleText": "createCanvasContextAsync | 创建 Canvas 实例"
+			}
+		},
+		// #endif
 		{
 			"path": "pages/API/resize-observer/resize-observer",
 			"group": "1,30",
@@ -2084,6 +2093,10 @@
 						{
 							"id": "api.dom.createSelectorQuery",
 							"name": "createSelectorQuery"
+						},
+						{
+							"id": "api.dom.createCanvasContextAsync",
+							"name": "createCanvasContextAsync"
 						}
 					]
 				},
diff --git a/pages/API/create-canvas-context-async/child-canvas.uvue b/pages/API/create-canvas-context-async/child-canvas.uvue
new file mode 100644
index 00000000..3b76215d
--- /dev/null
+++ b/pages/API/create-canvas-context-async/child-canvas.uvue
@@ -0,0 +1,44 @@
+<template>
+  <view>
+    <canvas class="child-canvas" id="canvas" style="height: 100px;border: 1px solid red;"></canvas>
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        context: null as CanvasRenderingContext2D | null
+      }
+    },
+    getContext() {
+      return {
+        ctx: typeof this.context,
+        hasFillRect: typeof this.context?.fillRect === 'function',
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        uni.createCanvasContextAsync({
+          id: 'canvas',
+          component: this,
+          success: (res : CanvasContext) => {
+            console.log('child component', res);
+            this.context = res.getContext('2d');
+            // 若干绘制调用
+            // 绘制红色正方形
+            this.context.fillStyle = "rgb(200, 0, 0)";
+            this.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) => {
+          }
+        })
+      })
+    }
+  }
+</script>
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
new file mode 100644
index 00000000..7eef070d
--- /dev/null
+++ b/pages/API/create-canvas-context-async/create-canvas-context-async.test.js
@@ -0,0 +1,32 @@
+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')
+	})
+
+	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('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)
+	})
+})
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
new file mode 100644
index 00000000..9805decf
--- /dev/null
+++ b/pages/API/create-canvas-context-async/create-canvas-context-async.uvue
@@ -0,0 +1,55 @@
+<template>
+  <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>
+    <child-canvas class="node-child-component" />
+  </view>
+</template>
+
+<script>
+  import childCanvas from './child-canvas.uvue';
+  export default {
+    components: {
+      childCanvas
+    },
+    data() {
+      return {
+        context: null as CanvasRenderingContext2D | null
+      }
+    },
+    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');
+            // 若干绘制调用
+            // 绘制红色正方形
+            this.context.fillStyle = "rgb(200, 0, 0)";
+            this.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) => {
+          }
+        })
+      }
+    },
+    onReady() {
+      this.drawImage()
+    }
+  }
+</script>
-- 
GitLab