fix: use outerWidth for bounding box

ecomfe · Dec 9, 2021 · bd2642e · bd2642e
1 parent 7b5a564
commit bd2642e
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 6 deletions.
diff --git a/src/graphic/Text.ts b/src/graphic/Text.ts
@@ -484,8 +484,8 @@ class ZRText extends Displayable<TextProps> implements GroupLike {
         const needDrawBg = needDrawBackground(style);
         const bgColorDrawn = !!(style.backgroundColor);
 
-        // outerWidth is the real text width containing padding.
         const outerHeight = contentBlock.outerHeight;
+        const outerWidth = contentBlock.outerWidth;
         const contentWidth = contentBlock.contentWidth;
 
         const textLines = contentBlock.lines;
@@ -503,10 +503,9 @@ class ZRText extends Displayable<TextProps> implements GroupLike {
 
         if (needDrawBg || textPadding) {
             // Consider performance, do not call getTextWidth util necessary.
-            const boxX = adjustTextX(baseX, contentWidth, textAlign);
+            const boxX = adjustTextX(baseX, outerWidth, textAlign);
             const boxY = adjustTextY(baseY, outerHeight, verticalAlign);
-
-            needDrawBg && this._renderBackground(style, style, boxX, boxY, contentWidth, outerHeight);
+            needDrawBg && this._renderBackground(style, style, boxX, boxY, outerWidth, outerHeight);
         }
 
         // `textBaseline` is set as 'middle'.
@@ -605,7 +604,7 @@ class ZRText extends Displayable<TextProps> implements GroupLike {
                      * Otherwise, there will be extra space in the
                      * bounding rect calculated.
                      */
-                    innerWidth,
+                    contentWidth,
                     calculatedLineHeight
                 ));
             }

diff --git a/src/graphic/helper/parseText.ts b/src/graphic/helper/parseText.ts
@@ -263,7 +263,7 @@ export function parsePlainText(
         outerHeight: outerHeight,
         lineHeight: lineHeight,
         calculatedLineHeight: calculatedLineHeight,
-        contentWidth: outerWidth,
+        contentWidth: contentWidth,
         contentHeight: contentHeight,
         width: width
     };