fix: use offscreencanvas instead of canvas when measuring text

antvis · Nov 10, 2023 · 7673a67 · 7673a67
1 parent 8676537
commit 7673a67
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 15 deletions.
diff --git a/.gitignore b/.gitignore
@@ -82,5 +82,4 @@ public
 .lh
 
 # tests
-__tests__/integration/**/*-diff.png
-__tests__/integration/**/*-actual.png
+__tests__/integration/**/*-actual.svg
diff --git a/__tests__/integration/canvas.ts b/__tests__/integration/canvas.ts
@@ -38,7 +38,7 @@ export function sleep(n: number) {
   });
 }
 
-export async function renderCanvas(gshape: DisplayObject, wait = 100) {
+export async function renderCanvas(gshape: DisplayObject, wait = 300) {
   const bbox = gshape.getBBox();
   const width = gshape.attributes.width || bbox.x + bbox.width || 400;
   const height = gshape.attributes.height || bbox.y + bbox.height || 300;

diff --git a/package.json b/package.json
@@ -49,9 +49,6 @@
     "@antv/util": "^3.3.5",
     "svg-path-parser": "^1.1.0"
   },
-  "peerDependencies": {
-    "@antv/g": "^5.18.6"
-  },
   "devDependencies": {
     "@antv/g-canvas": "^1.11.5",
     "@antv/g-plugin-control": "^1.9.6",

diff --git a/src/util/text.ts b/src/util/text.ts
@@ -1,4 +1,5 @@
-import { isString, memoize } from '@antv/util';
+import { runtime } from '@antv/g';
+import { memoize } from '@antv/util';
 import type { DisplayObject, Text } from '../shapes';
 
 let ctx: CanvasRenderingContext2D;
@@ -12,22 +13,21 @@ export function setMockMeasureTextWidth(mock: (text: string, fontSize: number) =
  * 计算文本在画布中的宽度
  */
 export const measureTextWidth = memoize(
-  (text: string | Text, font?: any): number => {
-    const content = isString(text) ? text : text.style.text.toString();
-    const { fontSize, fontFamily, fontWeight, fontStyle, fontVariant } = font || getFont(text as Text);
+  (text: string, font: any): number => {
+    const { fontSize, fontFamily, fontWeight, fontStyle, fontVariant } = font;
 
     if (mockMeasureTextWidth) {
-      return mockMeasureTextWidth(content, fontSize);
+      return mockMeasureTextWidth(text, fontSize);
     }
 
     if (!ctx) {
-      ctx = document.createElement('canvas').getContext('2d') as CanvasRenderingContext2D;
+      // @ts-ignore
+      ctx = runtime.offscreenCanvasCreator.getOrCreateContext(undefined) as CanvasRenderingContext2D;
     }
     ctx!.font = [fontStyle, fontVariant, fontWeight, `${fontSize}px`, fontFamily].join(' ');
-    return ctx!.measureText(content).width;
+    return ctx!.measureText(text).width;
   },
-  (text: any, font?: any) =>
-    [isString(text) ? text : text.style.text.toString(), Object.values(font || getFont(text as Text)).join()].join(''),
+  (text: any, font?: any) => [text, Object.values(font || getFont(text as Text)).join()].join(''),
   4096
 );