fix: fix pos issue with dynamic texture, optmize performance for dyna…

…mic texture
VisActor · Feb 27, 2025 · f518ce4 · f518ce4
1 parent f916034
commit f518ce4
Show file tree

Hide file tree

Showing 4 changed files with 388 additions and 51 deletions.
diff --git a/common/changes/@visactor/vrender-core/fix-dynamic-texture_2025-02-27-06-18.json b/common/changes/@visactor/vrender-core/fix-dynamic-texture_2025-02-27-06-18.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender-core",
+      "comment": "fix: fix pos issue with dynamic texture, optmize performance for dynamic texture",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vrender-core"
+}
diff --git a/...er-core/src/render/contributions/render/contributions/base-texture-contribution-render.ts b/...er-core/src/render/contributions/render/contributions/base-texture-contribution-render.ts
@@ -3,6 +3,7 @@ import { BaseRenderContributionTime } from '../../../../common/enums';
 import { createSymbol } from '../../../../graphic';
 import type {
   IBaseRenderContribution,
+  ICanvas,
   IContext2d,
   IDrawContext,
   IGraphic,
@@ -279,11 +280,31 @@ export class DefaultBaseTextureRenderContribution implements IBaseRenderContribu
 
     if (textureOptions && textureOptions.dynamicTexture) {
       // 动态纹理
-      context.save();
-      context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute);
-      context.clip();
-      const { gridConfig = {} } = textureOptions;
+      const { gridConfig = {}, useNewCanvas } = textureOptions;
       const b = graphic.AABBBounds;
+      x = b.x1;
+      y = b.y1;
+      const originalContext = context;
+
+      let newCanvas: ICanvas;
+      if (useNewCanvas) {
+        newCanvas = canvasAllocate.allocate({ width: b.width(), height: b.height(), dpr: context.dpr });
+        const ctx = newCanvas.getContext('2d');
+        ctx.clearRect(0, 0, b.width(), b.height());
+        x = 0;
+        y = 0;
+        context = ctx;
+      }
+      originalContext.save();
+      // 避免本级已经transform过了，再用Bounds就重复了
+      if (graphic.parent && !graphic.transMatrix.onlyTranslate()) {
+        const { scrollX = 0, scrollY = 0 } = graphic.parent.attribute;
+        originalContext.setTransformFromMatrix(graphic.parent.globalTransMatrix);
+        originalContext.translate(scrollX, scrollY, true);
+      }
+      originalContext.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute);
+      originalContext.clip();
+
       const width = b.width();
       const height = b.height();
       const padding = texturePadding;
@@ -311,11 +332,36 @@ export class DefaultBaseTextureRenderContribution implements IBaseRenderContribu
             context.closePath();
           }
           context.fillStyle = textureColor;
-          textureOptions.dynamicTexture(context, i, j, gridRows, gridColumns, textureRatio, graphic);
+          textureOptions.dynamicTexture(
+            context,
+            i,
+            j,
+            gridRows,
+            gridColumns,
+            textureRatio,
+            graphic,
+            b.width(),
+            b.height()
+          );
         }
       }
+      if (useNewCanvas) {
+        // 不使用外部的opacity，动态纹理的opacity自己设置
+        originalContext.globalAlpha = 1;
+        originalContext.drawImage(
+          newCanvas.nativeCanvas,
+          0,
+          0,
+          newCanvas.nativeCanvas.width,
+          newCanvas.nativeCanvas.height,
+          b.x1,
+          b.y1,
+          b.width() * originalContext.dpr,
+          b.height() * originalContext.dpr
+        );
+      }
 
-      context.restore();
+      originalContext.restore();
     } else if (pattern) {
       context.highPerformanceSave();
       context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute);

diff --git a/packages/vrender/__tests__/browser/src/pages/richtext.ts b/packages/vrender/__tests__/browser/src/pages/richtext.ts
@@ -972,13 +972,11 @@ export const page = () => {
       'PingFang SC,Helvetica Neue,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol',
     textAlign: 'center',
     textBaseline: 'middle',
-    boundsPadding: [10, 0, 10, 0],
     fontWeight: 'normal',
     fillOpacity: 1,
     ellipsis: true,
     pickable: true,
     lineJoin: 'bevel',
-    stroke: '#ffffff',
     _debug_bounds: true,
     zIndex: -1,
     // maxLineWidth: 200,
@@ -989,23 +987,19 @@ export const page = () => {
     // lineWidth: 0,
     textConfig: [
       {
-        text: '空值0\n',
+        text: '',
         fontSize: 12,
         textAlign: 'left',
         fill: '#1F2329'
-      },
-      {
-        text: '8%',
-        fontSize: 12,
-        textAlign: 'left',
-        fill: '#646A73'
       }
     ],
     z: 0,
+    width: 0,
+    height: 0
     // width: 30,
-    width: 31,
+    // width: 31,
     // width: 0,
-    height: 80
+    // height: 80
     // maxWidth: 200
   });
 
@@ -1034,7 +1028,7 @@ export const page = () => {
   //     .replaceAll('"', '\\"')}; width: 30; height: 30; id: circle-0" />`
   // );
 
-  // shapes.length = 0;
+  shapes.length = 0;
 
   shapes.push(rt);