diff --git a/packages/layers/src/point/models/text.ts b/packages/layers/src/point/models/text.ts index 03d1506cd7..b35ccc35a7 100644 --- a/packages/layers/src/point/models/text.ts +++ b/packages/layers/src/point/models/text.ts @@ -419,7 +419,7 @@ export default class TextModel extends BaseModel { // @ts-ignore size, textAnchor, - 'center', + 'left', spacing, textOffset, iconfont, diff --git a/packages/layers/src/utils/symbol-layout.ts b/packages/layers/src/utils/symbol-layout.ts index 79a7b05eaa..47cf5886af 100644 --- a/packages/layers/src/utils/symbol-layout.ts +++ b/packages/layers/src/utils/symbol-layout.ts @@ -174,7 +174,7 @@ function shapeLines( } x = 0; - y += lineHeight; + y -= lineHeight + 5; }); const { horizontalAlign, verticalAlign } = getAnchorAlignment(textAnchor); @@ -192,7 +192,7 @@ function shapeLines( const height = y - yOffset; shaping.top += -verticalAlign * height; - shaping.bottom = shaping.top + height; + shaping.bottom = shaping.top - height; shaping.left += -horizontalAlign * maxLineLength; shaping.right = shaping.left + maxLineLength; } @@ -249,7 +249,7 @@ function shapeIconFont( } x = 0; - y += lineHeight; + y -= lineHeight + 5; }); const { horizontalAlign, verticalAlign } = getAnchorAlignment(textAnchor); @@ -267,7 +267,7 @@ function shapeIconFont( const height = y - yOffset; shaping.top += -verticalAlign * height; - shaping.bottom = shaping.top + height; + shaping.bottom = shaping.top - height; shaping.left += -horizontalAlign * maxLineLength; shaping.right = shaping.left + maxLineLength; } diff --git a/stories/Layers/components/Text.tsx b/stories/Layers/components/Text.tsx index b21abf355f..a0629e0698 100644 --- a/stories/Layers/components/Text.tsx +++ b/stories/Layers/components/Text.tsx @@ -39,7 +39,7 @@ export default class TextLayerDemo extends React.Component { y: 'w', }, }) - .shape('s', 'text') + .shape(['s', 'm'], (...args) => args.map(i => `${i}\n`).join('')) // .shape('circle') .size(18) .filter('t', (t) => {