fix(text): fix horizontal and vertical alignment error (#772)

* fix(text): fix horizontal alignment error
galacean · Jun 2, 2022 · 2f50271 · 2f50271
1 parent 46293b8
commit 2f50271
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 15 deletions.
diff --git a/packages/core/src/2d/sprite/Sprite.ts b/packages/core/src/2d/sprite/Sprite.ts
@@ -112,8 +112,7 @@ export class Sprite extends RefObject {
 
   set pivot(value: Vector2) {
     const pivot = this._pivot;
-    const x = MathUtil.clamp(value.x, 0, 1);
-    const y = MathUtil.clamp(value.y, 0, 1);
+    const { x, y } = value;
     if (pivot === value || pivot.x !== x || pivot.y !== y) {
       pivot.setValue(x, y);
       this._setDirtyFlagTrue(DirtyFlag.positions);

diff --git a/packages/core/src/2d/text/TextRenderer.ts b/packages/core/src/2d/text/TextRenderer.ts
@@ -329,19 +329,12 @@ export class TextRenderer extends Renderer {
    * @override
    */
   protected _updateBounds(worldBounds: BoundingBox): void {
-    const sprite = this._sprite;
-    if (sprite && sprite.texture) {
-      if (this._customLocalBounds && this._customRootEntity) {
-        const worldMatrix = this._customRootEntity.transform.worldMatrix;
-        BoundingBox.transform(this._customLocalBounds, worldMatrix, worldBounds);
-      } else {
-        const localBounds = sprite.bounds;
-        const worldMatrix = this._entity.transform.worldMatrix;
-        BoundingBox.transform(localBounds, worldMatrix, worldBounds);
-      }
+    if (this._customLocalBounds && this._customRootEntity) {
+      const worldMatrix = this._customRootEntity.transform.worldMatrix;
+      BoundingBox.transform(this._customLocalBounds, worldMatrix, worldBounds);
     } else {
-      worldBounds.min.setValue(0, 0, 0);
-      worldBounds.max.setValue(0, 0, 0);
+      const worldMatrix = this._entity.transform.worldMatrix;
+      BoundingBox.transform(this._sprite.bounds, worldMatrix, worldBounds);
     }
   }
 
@@ -378,7 +371,34 @@ export class TextRenderer extends Renderer {
     const { width, height } = trimData;
     const canvas = TextUtils.updateCanvas(width, height, trimData.data);
     this._clearTexture();
-    const { _sprite: sprite } = this;
+    const { _sprite: sprite, horizontalAlignment, verticalAlignment } = this;
+
+    // Handle the case that width or height of text is larger than real width or height.
+    const { pixelsPerUnit, pivot } = sprite;
+    switch (horizontalAlignment) {
+      case TextHorizontalAlignment.Left:
+        pivot.x = (this.width * pixelsPerUnit) / width * 0.5;
+        break;
+      case TextHorizontalAlignment.Right:
+        pivot.x = 1 - (this.width * pixelsPerUnit) / width * 0.5;
+        break;
+      case TextHorizontalAlignment.Center:
+        pivot.x = 0.5;
+        break;
+    }
+    switch (verticalAlignment) {
+      case TextVerticalAlignment.Top:
+        pivot.y = 1 - (this.height * pixelsPerUnit) / height * 0.5;
+        break;
+      case TextVerticalAlignment.Bottom:
+        pivot.y = (this.height * pixelsPerUnit) / height * 0.5;
+        break;
+      case TextVerticalAlignment.Center:
+        pivot.y = 0.5;
+        break;
+    }
+    sprite.pivot = pivot;
+
     // If add fail, set texture for sprite.
     if (!this.engine._dynamicTextAtlasManager.addSprite(sprite, canvas)) {
       const texture = new Texture2D(this.engine, width, height);