Merge pull request #301 from VisActor/fix/safari-text

fix: fix the error of text bounds in safari env, closed #294
VisActor · Aug 10, 2023 · d089979 · d089979
2 parents abaf22f + a9bbef5
commit d089979
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 5 deletions.
diff --git a/common/changes/@visactor/vrender/fix-safari-text_2023-08-10-08-41.json b/common/changes/@visactor/vrender/fix-safari-text_2023-08-10-08-41.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender",
+      "comment": "fix: fix the error of text bounds in safari env, closed #294",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@visactor/vrender"
+}
diff --git a/docs/demos/src/pages/text.ts b/docs/demos/src/pages/text.ts
@@ -57,12 +57,18 @@ export const page = () => {
     y: 200,
     fill: colorPools[5],
     // text: ['Tffg'],
-    text: 'talfjdgkfsv',
-    // wordBreak: 'break-word',
+    text: ['这是垂aaa直textabc这是什么', '这是阿萨姆abcaaaaa'],
+    wordBreak: 'break-word',
     maxLineWidth: 200,
     // ellipsis: '',
+    direction: 'vertical',
+    fontSize: 20,
+    stroke: 'green',
+    // wordBreak: 'break-word',
+    // maxLineWidth: 200,
+    // ellipsis: '',
     // direction: 'vertical',
-    fontSize: 28,
+    fontSize: 120,
     // stroke: 'green',
     // lineWidth: 100,
     // lineHeight: 30,

diff --git a/packages/vrender/src/core/global.ts b/packages/vrender/src/core/global.ts
@@ -299,4 +299,18 @@ export class DefaultGlobal implements IGlobal {
     }
     return this.envContribution.loadBlob(url);
   }
+
+  isChrome(): boolean {
+    if (!this._env) {
+      this.setEnv('browser');
+    }
+    return this._env === 'browser' && navigator.userAgent.indexOf('Chrome') > -1;
+  }
+
+  isSafari(): boolean {
+    if (!this._env) {
+      this.setEnv('browser');
+    }
+    return this._env === 'browser' && /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
+  }
 }
diff --git a/packages/vrender/src/graphic/text.ts b/packages/vrender/src/graphic/text.ts
@@ -8,6 +8,7 @@ import { getTheme } from './theme';
 import { parsePadding } from '../common/utils';
 import { TEXT_NUMBER_TYPE } from './constants';
 import { TextDirection, verticalLayout } from './tools';
+import { vglobal } from '../modules';
 
 const TEXT_UPDATE_TAG_KEY = [
   'text',
@@ -205,8 +206,13 @@ export class Text extends Graphic<ITextGraphicAttribute> implements IText {
     this.clearUpdateShapeTag();
 
     const dx = textDrawOffsetX(textAlign, width);
-    const dy = textLayoutOffsetY(textBaseline, lineHeight, fontSize, buf);
-    this._AABBBounds.set(dx, dy, dx + width, dy + lineHeight);
+    let lh = lineHeight;
+    if (vglobal.isSafari()) {
+      // 如果是safari，那么需要额外增加高度
+      lh += fontSize * 0.2;
+    }
+    const dy = textLayoutOffsetY(textBaseline, lh, fontSize, buf);
+    this._AABBBounds.set(dx, dy, dx + width, dy + lh);
 
     if (stroke) {
       this._AABBBounds.expand(lineWidth / 2);

diff --git a/packages/vrender/src/interface/global.ts b/packages/vrender/src/interface/global.ts
@@ -176,6 +176,9 @@ export interface IGlobal extends Omit<IEventElement, 'on' | 'off' | 'once' | 'em
    */
   getDynamicCanvasCount: () => number;
 
+  isChrome: () => boolean;
+  isSafari: () => boolean;
+
   /**
    * 获取环境中最大静态canvas的数量，纯粹canvas
    */