feat：调整web canvas为输入宽高 (#319)

* fix: 将offscreenCanvas创建挪至初始化

* chore: 调整web canvas逻辑

* fix: web canvas宽高外部传入

---------

Co-authored-by: xuying.xu <xuying.xu@alibaba-inc.com>

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
+  }
 }

packages/f-my/examples/test/pages/index/index.acss

@@ -3,3 +3,8 @@
   width: 100%;
   height: 600rpx;
 }
+
+.web-container {
+  width: 350rpx;
+  height: 480rpx;
+}

packages/f-my/examples/test/pages/index/index.axml

@@ -2,5 +2,8 @@
   <view>native</view>
   <f-canvas onRender="onRenderChart" data="{{data}}"></f-canvas>
   <view>web</view>
-  <f-canvas-web onRender="onRenderChart" data="{{data}}"></f-canvas-web>
+  <view class="web-container">
+    <f-canvas-web onRender="onRenderChart" data="{{data}}" width="{{350}}" height="{{480}}">
+    </f-canvas-web>
+  </view>
 </view>

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 {

packages/f-my/src/web.axml

@@ -1,11 +1,10 @@
 <canvas
-  a:if="{{id}}"
-  id="{{id}}"
-  class="f-canvas"
+  id="{{`f-web-canvas-${$id}`}}"
+  class="f-web-canvas"
   width="{{width}}"
   height="{{height}}"
   onTap="click"
   onTouchStart="touchStart"
   onTouchMove="touchMove"
   onTouchEnd="touchEnd"
-/>
+/>

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,