From c64aaff7a796774a953fdbb62408f21e8a3d05a3 Mon Sep 17 00:00:00 2001 From: xuying <33517362+tangying1027@users.noreply.github.com> Date: Fri, 7 Mar 2025 18:20:47 +0800 Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E8=B0=83=E6=95=B4web=20canvas?= =?UTF-8?q?=E4=B8=BA=E8=BE=93=E5=85=A5=E5=AE=BD=E9=AB=98=20(#319)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 将offscreenCanvas创建挪至初始化 * chore: 调整web canvas逻辑 * fix: web canvas宽高外部传入 --------- Co-authored-by: xuying.xu --- packages/f-my/examples/test/mini.project.json | 10 +- .../f-my/examples/test/pages/index/index.acss | 5 + .../f-my/examples/test/pages/index/index.axml | 5 +- .../f-my/examples/test/pages/index/rect.js | 3 +- packages/f-my/src/web.axml | 7 +- packages/f-my/src/web.tsx | 116 +++++++----------- 6 files changed, 64 insertions(+), 82 deletions(-) diff --git a/packages/f-my/examples/test/mini.project.json b/packages/f-my/examples/test/mini.project.json index e4ce6027..a78cf225 100644 --- a/packages/f-my/examples/test/mini.project.json +++ b/packages/f-my/examples/test/mini.project.json @@ -1,8 +1,10 @@ { + "format": 2, + "compileOptions": { + "component2": true, + "enableNodeModuleBabelTransform": true + }, "scripts": { "beforeCompile": "npm run beforeCompile" - }, - "enableNodeModuleBabelTransform": true, - "component2": true, - "enableAppxNg": true + } } \ No newline at end of file diff --git a/packages/f-my/examples/test/pages/index/index.acss b/packages/f-my/examples/test/pages/index/index.acss index c05f449b..2614fcfa 100644 --- a/packages/f-my/examples/test/pages/index/index.acss +++ b/packages/f-my/examples/test/pages/index/index.acss @@ -3,3 +3,8 @@ width: 100%; height: 600rpx; } + +.web-container { + width: 350rpx; + height: 480rpx; +} diff --git a/packages/f-my/examples/test/pages/index/index.axml b/packages/f-my/examples/test/pages/index/index.axml index 787a2cf5..c8c0cea9 100644 --- a/packages/f-my/examples/test/pages/index/index.axml +++ b/packages/f-my/examples/test/pages/index/index.axml @@ -2,5 +2,8 @@ native web - + + + + \ No newline at end of file diff --git a/packages/f-my/examples/test/pages/index/rect.js b/packages/f-my/examples/test/pages/index/rect.js index 98d2212d..cd1a2014 100644 --- a/packages/f-my/examples/test/pages/index/rect.js +++ b/packages/f-my/examples/test/pages/index/rect.js @@ -1,6 +1,5 @@ import { Component } from '@antv/f-engine'; -import { jsx as _jsx } from "@antv/f-engine/jsx-runtime"; -import { jsxs as _jsxs } from "@antv/f-engine/jsx-runtime"; +import { jsx as _jsx, jsxs as _jsxs } from "@antv/f-engine/jsx-runtime"; class Rect extends Component { render() { const { diff --git a/packages/f-my/src/web.axml b/packages/f-my/src/web.axml index 10027f37..37f246c3 100644 --- a/packages/f-my/src/web.axml +++ b/packages/f-my/src/web.axml @@ -1,11 +1,10 @@ +/> \ No newline at end of file diff --git a/packages/f-my/src/web.tsx b/packages/f-my/src/web.tsx index bf4bd394..6d89177a 100644 --- a/packages/f-my/src/web.tsx +++ b/packages/f-my/src/web.tsx @@ -27,37 +27,21 @@ function dispatchEvent(el, event, type) { el.dispatchEvent(event); } -const getPixelRatio = () => my.getSystemInfoSync().pixelRatio; - Component({ - props: { - onRender: (_props) => {}, - // width height 会作为元素兜底的宽高使用 - width: null, - height: null, - onError: () => {}, - onCanvasReady: () => {}, - onCanvasRender: () => {}, - }, - /** - * 组件创建时触发 - * 注意： - * 使用该生命周期，项目配置需启用："component2": true - */ - onInit() { - this.setCanvasId(); - }, didMount() { - // 为了兼容未配置 "component2": true 的情况 - if (!this.data.id) { - this.setCanvasId(); - } - this.onCanvasReady(); + this.createChart(); }, didUpdate() { const { canvas, props } = this; if (!canvas) return; - const { theme, px2hd } = props; + const { theme, px2hd, reCreateOnUpdate } = props; + if (reCreateOnUpdate) { + canvas.destroy(); + this.canvas = null; + this.createChart(); + return; + } + const children = props.onRender(props); const updateProps = { theme, @@ -74,52 +58,32 @@ Component({ canvas.destroy(); }, methods: { - setCanvasId() { - const pageId = (this.$page && this.$page.$id) || 0; - const id = `f-canvas-${pageId}-${this.$id}`; - this.setData({ id }); - }, - onCanvasReady() { - const { onCanvasReady } = this.props; - onCanvasReady && onCanvasReady(); - const { id } = this.data; - const query = my.createSelectorQuery(); - query - .select(`#${id}`) - .boundingClientRect() - .exec((res) => { - if (!res[0]) { - return; - } - const { width, height } = res[0] as { - width: number; - height: number; - }; - const pixelRatio = Math.ceil(getPixelRatio()); + createChart() { + const { width, height } = this.props; + const id = `f-web-canvas-${this.$id}`; + const { pixelRatio: drp = 2, windowWidth = 375 } = my?.getSystemInfoSync(); - // 高清解决方案 - this.setData( - { - width: width * pixelRatio, - height: height * pixelRatio, - }, - () => { - const { element: canvas, context } = createCanvasAdapter(my.createCanvasContext(id)); - const fCanvas = this.createCanvas({ - width, - height, - pixelRatio, - context, - createImage: canvas.createImage.bind(canvas), - requestAnimationFrame: canvas.requestAnimationFrame.bind(canvas), - cancelAnimationFrame: canvas.cancelAnimationFrame.bind(canvas), - }); - fCanvas.render().catch((error) => { - this.catchError(error); - }); - }, - ); - }); + const pixelRatio = Math.ceil(drp); + const rpx2px = windowWidth / 750; + + this.setData({ + width: width * rpx2px * pixelRatio, + height: height * rpx2px * pixelRatio, + }); + + const { element: canvas, context } = createCanvasAdapter(my.createCanvasContext(id)); + const fCanvas = this.createCanvas({ + width: width * rpx2px, + height: height * rpx2px, + pixelRatio, + context, + createImage: canvas.createImage.bind(canvas), + requestAnimationFrame: canvas.requestAnimationFrame.bind(canvas), + cancelAnimationFrame: canvas.cancelAnimationFrame.bind(canvas), + }); + fCanvas.render().catch((error) => { + this.catchError(error); + }); }, catchError(error) { @@ -156,7 +120,17 @@ Component({ createImage, requestAnimationFrame, cancelAnimationFrame, - onRender: onCanvasRender, + onRender: () => { + const query = my.createSelectorQuery(); + query + .select(`f-web-canvas-${this.$id}`) + //@ts-ignore + .node() + .exec((time) => { + // api 执行结束后的下一个通信才会上屏 + onCanvasRender && onCanvasRender(time); + }); + }, // @ts-ignore offscreenCanvas: my.createOffscreenCanvas ? my.createOffscreenCanvas() : null, // useNativeClickEvent: false,