neuqzxy · Jun 26, 2023 · Jun 21, 2023 · Jun 25, 2023
diff --git a/docs/demos/src/pages/text.ts b/docs/demos/src/pages/text.ts
@@ -1,4 +1,4 @@
-import { createStage, createText, global, getTextBounds, createLine, createRect, createCircle, IGraphic } from '@visactor/vrender';
+import { createStage, createText, global, getTextBounds, createLine, createRect, createCircle, IGraphic, createWrapText } from '@visactor/vrender';
 import { addShapesToStage, colorPools } from '../utils';
 
 // global.setEnv('browser');
@@ -24,18 +24,38 @@ export const page = () => {
     textBaseline: 'top'
   }));
 
-  graphics.push(createText({
+  const text = createText({
     x: 500,
     y: 200,
     fill: colorPools[5],
-    text: ['Test', 'test'],
-    fontSize: 20,
-    lineThrough: 1,
-    underline: 1,
-    textBaseline: 'top',
-    scaleX: 2,
-    scaleY: 2
-  }));
+    // text: ['Tffg'],
+    text: 'Tffgggaaaa',
+    fontSize: 15,
+    lineHeight: 30,
+    // lineThrough: 1,
+    // underline: 1,
+    textBaseline: 'alphabetic',
+    // scaleX: 2,
+    // scaleY: 2
+  })
+  graphics.push(text);
+  const circle = createCircle({
+    x: 500,
+    y: 200,
+    fill: 'black',
+    radius: 2
+  })
+  graphics.push(circle);
+
+  const rect = createRect({
+    x: text.AABBBounds.x1,
+    y: text.AABBBounds.y1,
+    width: text.AABBBounds.width(),
+    height: text.AABBBounds.height(),
+    stroke: 'red',
+    lineWidth: 1,
+  })
+  graphics.push(rect);
 
   const stage = createStage({
     canvas: 'main',

diff --git a/packages/vrender/src/common/text.ts b/packages/vrender/src/common/text.ts
@@ -76,21 +76,24 @@ export function textDrawOffsetX(textAlign: ITextAlignType, width: number): numbe
  * 用于计算布局的偏移
  * 经验值，来源于 https://github.com/vega/vega/blob/b45cf431cd6c0d0c0e1567f087f9b3b55bc236fa/packages/vega-scenegraph/src/util/text.js
  * @param baseline
- * @param h
+ * @param lineHeight
  * @returns
  */
-export function textLayoutOffsetY(baseline: ITextBaselineType, h: number): number {
+export function textLayoutOffsetY(baseline: ITextBaselineType, lineHeight: number, fontSize: number): number {
   if (baseline === 'middle') {
-    return -h / 2;
+    return -lineHeight / 2;
   }
   if (baseline === 'top') {
     return 0;
   }
   if (baseline === 'bottom') {
-    return -h;
+    return -lineHeight;
   }
   if (!baseline || baseline === 'alphabetic') {
-    return -0.79 * h;
+    if (!fontSize) {
+      fontSize = lineHeight;
+    }
+    return -(lineHeight - fontSize) / 2 - 0.79 * fontSize;
   }
   return 0;
 }
diff --git a/packages/vrender/src/core/contributions/textMeasure/layout.ts b/packages/vrender/src/core/contributions/textMeasure/layout.ts
@@ -233,7 +233,8 @@ export class CanvasTextLayout {
       line.leftOffset = bbox.width - line.width;
     }
 
-    line.topOffset = lineHeight * 0.79 + origin[1]; // 渲染默认使用alphabetic
+    // line.topOffset = lineHeight * 0.79 + origin[1]; // 渲染默认使用alphabetic
+    line.topOffset = (lineHeight - this.textOptions.fontSize) / 2 + this.textOptions.fontSize * 0.79 + origin[1];
     origin[1] += lineHeight;
 
     return line;

diff --git a/packages/vrender/src/graphic/text.ts b/packages/vrender/src/graphic/text.ts
@@ -135,7 +135,7 @@ export class Text extends Graphic<ITextGraphicAttribute> implements IText {
     if (!this.shouldUpdateShape() && this.cache) {
       width = this.cache.clipedWidth;
       const dx = textDrawOffsetX(textAlign, width);
-      const dy = textLayoutOffsetY(textBaseline, lineHeight);
+      const dy = textLayoutOffsetY(textBaseline, lineHeight, fontSize);
       this._AABBBounds.set(dx, dy, dx + width, dy + lineHeight);
       if (stroke) {
         this._AABBBounds.expand(lineWidth / 2);
@@ -165,7 +165,7 @@ export class Text extends Graphic<ITextGraphicAttribute> implements IText {
     this.clearUpdateShapeTag();
 
     const dx = textDrawOffsetX(textAlign, width);
-    const dy = textLayoutOffsetY(textBaseline, lineHeight);
+    const dy = textLayoutOffsetY(textBaseline, lineHeight, fontSize);
     this._AABBBounds.set(dx, dy, dx + width, dy + lineHeight);
 
     if (stroke) {

diff --git a/packages/vrender/src/picker/contributions/canvas-picker/text-picker.ts b/packages/vrender/src/picker/contributions/canvas-picker/text-picker.ts
@@ -76,12 +76,16 @@ export class DefaultCanvasTextPicker extends BasePicker<IText> implements IGraph
         if (picked) {
           return true;
         }
-        const { textBaseline = textAttribute.textBaseline, textAlign = textAttribute.textAlign } = text.attribute;
+        const {
+          fontSize = textAttribute.fontSize,
+          textBaseline = textAttribute.textBaseline,
+          textAlign = textAttribute.textAlign
+        } = text.attribute;
         // 拾取基于xy的rect
         const bounds = text.AABBBounds;
         const height = bounds.height();
         const width = bounds.width();
-        const offsetY = textLayoutOffsetY(textBaseline, height);
+        const offsetY = textLayoutOffsetY(textBaseline, height, fontSize);
         const offsetX = textDrawOffsetX(textAlign, width);
         context.rect(offsetX + x, offsetY + y, width, height, z);
         picked = context.isPointInPath(pickPoint.x, pickPoint.y);

diff --git a/packages/vrender/src/render/contributions/render/text-render.ts b/packages/vrender/src/render/contributions/render/text-render.ts
@@ -45,7 +45,10 @@ export class DefaultCanvasTextRender extends BaseRender<IText> implements IGraph
       visible = textAttribute.visible,
       underline = textAttribute.underline,
       lineThrough = textAttribute.lineThrough,
-      keepDirIn3d = textAttribute.keepDirIn3d
+      keepDirIn3d = textAttribute.keepDirIn3d,
+      lineHeight = textAttribute.lineHeight,
+      fontSize = textAttribute.fontSize,
+      textBaseline = textAttribute.textBaseline
     } = text.attribute;
 
     // 不绘制或者透明
@@ -113,21 +116,34 @@ export class DefaultCanvasTextRender extends BaseRender<IText> implements IGraph
     } else {
       context.setTextStyle(text.attribute, textAttribute, z);
       const t = text.clipedText as string;
+      let dy = 0;
+      if (lineHeight !== fontSize) {
+        if (textBaseline === 'top') {
+          dy = (lineHeight - fontSize) / 2;
+        } else if (textBaseline === 'middle') {
+          // middle do nothing
+        } else if (textBaseline === 'bottom') {
+          dy = -(lineHeight - fontSize) / 2;
+        } else {
+          // alphabetic do nothing
+          // dy = (lineHeight - fontSize) / 2 - fontSize * 0.79;
+        }
+      }
       if (doStroke) {
         if (strokeCb) {
           strokeCb(context, text.attribute, textAttribute);
         } else if (sVisible) {
           context.setStrokeStyle(text, text.attribute, x, y, textAttribute);
-          context.strokeText(t, x, y, z);
+          context.strokeText(t, x, y + dy, z);
         }
       }
       if (doFill) {
         if (fillCb) {
           fillCb(context, text.attribute, textAttribute);
         } else if (fVisible) {
           context.setCommonStyle(text, text.attribute, x, y, textAttribute);
-          context.fillText(t, x, y, z);
-          this.drawUnderLine(underline, lineThrough, text, x, y, z, textAttribute, context);
+          context.fillText(t, x, y + dy, z);
+          this.drawUnderLine(underline, lineThrough, text, x, y + dy, z, textAttribute, context);
         }
       }
     }
@@ -183,7 +199,7 @@ export class DefaultCanvasTextRender extends BaseRender<IText> implements IGraph
     } = text.attribute;
     const w = text.clipedWidth;
     const offsetX = textDrawOffsetX(textAlign, w);
-    const offsetY = textLayoutOffsetY(textBaseline, fontSize);
+    const offsetY = textLayoutOffsetY(textBaseline, fontSize, fontSize);
     const attribute = { lineWidth: 0, stroke: fill, opacity, strokeOpacity: fillOpacity };
     if (underline) {
       attribute.lineWidth = underline;
@@ -229,7 +245,7 @@ export class DefaultCanvasTextRender extends BaseRender<IText> implements IGraph
     } = text.attribute;
 
     const offsetX = textDrawOffsetX(textAlign, w);
-    const offsetY = textLayoutOffsetY('alphabetic', fontSize);
+    const offsetY = textLayoutOffsetY('alphabetic', fontSize, fontSize);
     const attribute = { lineWidth: 0, stroke: fill, opacity, strokeOpacity: fillOpacity };
     let deltaY = -3;
     if (underline) {