From 1cc28b295db27c2bdc2d7a87906040424975d82f Mon Sep 17 00:00:00 2001 From: jixinbao Date: Mon, 5 Aug 2024 22:01:39 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20canvas=20=E5=90=8C?= =?UTF-8?q?=E6=AD=A5=E5=BC=82=E6=AD=A5=E6=B5=8B=E8=AF=95=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/component/canvas/canvas.test.js | 30 ++++- pages/component/canvas/canvas.uvue | 151 ++++++++++++++++++++------ 2 files changed, 143 insertions(+), 38 deletions(-) diff --git a/pages/component/canvas/canvas.test.js b/pages/component/canvas/canvas.test.js index 77080c4e..97580874 100644 --- a/pages/component/canvas/canvas.test.js +++ b/pages/component/canvas/canvas.test.js @@ -1,11 +1,11 @@ let page -beforeAll(async () => { - if (!process.env.uniTestPlatformInfo.toLowerCase().startsWith('web')) { - return - } +beforeAll(async () => { + // if (!process.env.uniTestPlatformInfo.toLowerCase().startsWith('web')) { + // return + // } page = await program.reLaunch('/pages/component/canvas/canvas') - await page.waitFor(2000) + await page.waitFor(500) }) describe('Canvas.uvue', () => { @@ -18,6 +18,26 @@ describe('Canvas.uvue', () => { expect(testToBlobResult).toBe(true) expect(testToDataURLResult).toBe(true) + } else { + // app skip + expect(true).toBe(true) } }) + it("测试异步方式", async () => { + await page.callMethod('useAsync'); + const { + testCanvasContext, + testToDataURLResult + } = await page.data() + expect(testCanvasContext).toBe(true) + await page.callMethod('canvasToDataURL'); + expect(testToDataURLResult).toBe(true) + }) + it("测试同步方式", async () => { + await page.callMethod('useSync'); + const data = await page.data() + expect(data.testCanvasContext).toBe(true) + await page.callMethod('canvasToDataURL'); + expect(data.testToDataURLResult).toBe(true) + }) }) diff --git a/pages/component/canvas/canvas.uvue b/pages/component/canvas/canvas.uvue index 3d02354b..10ecb233 100644 --- a/pages/component/canvas/canvas.uvue +++ b/pages/component/canvas/canvas.uvue @@ -1,12 +1,28 @@ @@ -23,43 +39,112 @@ export default { data() { return { - title: 'Context2D', - canvas: null as UniCanvasElement | null, - canvasContext: null as CanvasRenderingContext2D | null, + title: 'Context2D', + // canvas: null as UniCanvasElement | null, + // canvasContext: null as CanvasRenderingContext2D | null, canvasWidth: 0, - canvasHeight: 0, + canvasHeight: 0, dataBase64: '', // 仅测试 + testCanvasContext: false, testToBlobResult: false, testToDataURLResult: false } }, onReady() { - let canvas = uni.getElementById("canvas") as UniCanvasElement - this.canvasContext = canvas.getContext("2d"); - hidpi(canvas); - this.canvasWidth = this.canvasContext!.canvas.width; - this.canvasHeight = this.canvasContext!.canvas.height; - + // this.useAsync() + }, + methods: { // #ifdef WEB - canvas.toBlob((blob : Blob) => { - this.testToBlobResult = (blob.size > 0 && blob.type == 'image/jpeg') - }, 'image/jpeg', 0.95) + canvasToBlob() { + this.canvas!.toBlob((blob : Blob) => { + this.testToBlobResult = (blob.size > 0 && blob.type == 'image/jpeg') + }, 'image/jpeg', 0.95) + }, // #endif - this.testToDataURLResult = canvas.toDataURL().startsWith('data:image/png;base64') - - this.canvas = canvas; - }, - methods: { - // #ifdef WEB - canvasToBlob() { - this.canvas!.toBlob((blob : Blob) => { - this.testToBlobResult = (blob.size > 0 && blob.type == 'image/jpeg') - }, 'image/jpeg', 0.95) - }, - // #endif - canvasToDataURL() { - this.dataBase64 = this.canvas!.toDataURL() + canvasToDataURL() { + this.dataBase64 = this.canvas!.toDataURL() + }, + useAsync() { + + // HBuilderX 4.25+ + // 异步调用方式, 跨平台写法 + uni.createCanvasContextAsync({ + id: 'canvas', + component: this, + success: (context : CanvasContext) => { + const canvasContext = context.getContext('2d')!; + this.canvasContext = canvasContext + this.testCanvasContext = true + const canvas = canvasContext.canvas; + canvasContext.save() + hidpi(canvas); + this.canvasWidth = canvas.width; + this.canvasHeight = canvas.height; + this.drawImage() + + this.testToDataURLResult = canvas.toDataURL().startsWith('data:image/png;base64') + + this.canvas = canvas; + } + }) + + }, + useSync() { + + let canvas = uni.getElementById("canvas") as UniCanvasElement + this.canvasContext = canvas.getContext("2d") + this.testCanvasContext = true + this.canvasContext!.save() + hidpi(canvas); + this.canvasWidth = canvas.width; + this.canvasHeight = canvas.height; + this.arc() + + // #ifdef WEB + canvas.toBlob((blob : Blob) => { + this.testToBlobResult = (blob.size > 0 && blob.type == 'image/jpeg') + }, 'image/jpeg', 0.95) + // #endif + this.testToDataURLResult = canvas.toDataURL().startsWith('data:image/png;base64') + + this.canvas = canvas; + + }, + arc() { + const context = this.canvasContext! + + this.clearCanvasRect() + context.beginPath() + context.lineWidth = 2 + context.arc(75, 75, 50, 0, Math.PI * 2, true) + context.moveTo(110, 75) + context.arc(75, 75, 35, 0, Math.PI, false) + context.moveTo(65, 65) + context.arc(60, 65, 5, 0, Math.PI * 2, true) + context.moveTo(95, 65) + context.arc(90, 65, 5, 0, Math.PI * 2, true) + context.stroke() + + context.restore() + }, + drawImage() { + const context = this.canvasContext! + + this.clearCanvasRect() + const text = "uni-app x，是下一代 uni-app，是一个跨平台应用开发引擎" + + context.font = "20px 宋体" + context.fillStyle = "red" + context.fillText(text, 0, 60) + const textMetrics = context.measureText(text) + context.strokeText(text, 40, 100) + context.fillText("measure text width:" + textMetrics.width, 40, 80) + + context.restore() + }, + clearCanvasRect() { + this.canvasContext!.clearRect(0, 0, this.canvasWidth, this.canvasHeight) } } } -- GitLab