fix: web canvas宽高外部传入

Author: xuying.xu

Diff for: 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
+  }
 }

Diff for: packages/f-my/examples/test/pages/index/index.acss

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

Diff for: 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>

Diff for: 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 for: packages/f-my/src/web.tsx

@@ -29,7 +29,7 @@ function dispatchEvent(el, event, type) {
 
 Component({
   didMount() {
-    this.onCanvasReady();
+    this.createChart();
   },
   didUpdate() {
     const { canvas, props } = this;
@@ -59,43 +59,31 @@ Component({
   },
   methods: {
     createChart() {
-      const query = my.createSelectorQuery();
+      const { width, height } = this.props;
       const id = `f-web-canvas-${this.$id}`;
-      query
-        .select(`#${id}`)
-        .boundingClientRect()
-        .exec((res) => {
-          if (!res[0]) {
-            return;
-          }
-          const { width, height } = res[0] as {
-            width: number;
-            height: number;
-          };
+      const { pixelRatio: drp = 2, windowWidth = 375 } = my?.getSystemInfoSync();
 
-          const { pixelRatio: drp = 2, windowWidth = 375 } = my?.getSystemInfoSync();
-          const rpx2px = windowWidth / 750;
-          const pixelRatio = Math.ceil(drp);
+      const pixelRatio = Math.ceil(drp);
+      const rpx2px = windowWidth / 750;
 
-          this.setData({
-            width: width * rpx2px * pixelRatio,
-            height: height * rpx2px * pixelRatio,
-          });
+      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);
-          });
-        });
+      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) {
@@ -136,10 +124,11 @@ Component({
           const query = my.createSelectorQuery();
           query
             .select(`f-web-canvas-${this.$id}`)
+            //@ts-ignore
             .node()
             .exec((time) => {
               // api 执行结束后的下一个通信才会上屏
-              onCanvasRender(time);
+              onCanvasRender && onCanvasRender(time);
             });
         },
         // @ts-ignore