three-base 2.0.137 → 2.0.145

package/SpriteText.d.ts

@@ -1,16 +1,17 @@
 import { Sprite } from "three";
+import type { ColorString } from "./types";
 export default class SpriteText extends Sprite {
-    constructor(text?: string, textHeight?: number, color?: `#${string}` | `rgba(${string})`);
+    constructor(text?: string, textHeight?: number, color?: ColorString);
     _text: string;
     _textHeight: number;
-    _color: `#${string}` | `rgba(${string})`;
-    _backgroundColor: boolean | `#${string}` | `rgba(${string})`;
+    _color: ColorString;
+    _backgroundColor: boolean | ColorString;
     _padding: number;
     _borderWidth: number;
     _borderRadius: number;
-    _borderColor: `#${string}` | `rgba(${string})`;
+    _borderColor: ColorString;
     _strokeWidth: number;
-    _strokeColor: `#${string}` | `rgba(${string})`;
+    _strokeColor: ColorString;
     _fontFace: string;
     _fontSize: number;
     _fontWeight: string;
@@ -19,18 +20,18 @@ export default class SpriteText extends Sprite {
     set text(text: string);
     get textHeight(): number;
     set textHeight(textHeight: number);
-    get color(): `#${string}` | `rgba(${string})`;
-    set color(color: `#${string}` | `rgba(${string})`);
-    get backgroundColor(): boolean | `#${string}` | `rgba(${string})`;
-    set backgroundColor(color: boolean | `#${string}` | `rgba(${string})`);
+    get color(): ColorString;
+    set color(color: ColorString);
+    get backgroundColor(): boolean | ColorString;
+    set backgroundColor(color: boolean | ColorString);
     get padding(): number;
     set padding(padding: number);
     get borderWidth(): number;
     set borderWidth(borderWidth: number);
     get borderRadius(): number;
     set borderRadius(borderRadius: number);
-    get borderColor(): `#${string}` | `rgba(${string})`;
-    set borderColor(borderColor: `#${string}` | `rgba(${string})`);
+    get borderColor(): ColorString;
+    set borderColor(borderColor: ColorString);
     get fontFace(): string;
     set fontFace(fontFace: string);
     get fontSize(): number;
@@ -39,7 +40,7 @@ export default class SpriteText extends Sprite {
     set fontWeight(fontWeight: string);
     get strokeWidth(): number;
     set strokeWidth(strokeWidth: number);
-    get strokeColor(): `#${string}` | `rgba(${string})`;
-    set strokeColor(strokeColor: `#${string}` | `rgba(${string})`);
+    get strokeColor(): ColorString;
+    set strokeColor(strokeColor: ColorString);
     _genCanvas(): void;
 }

package/SpriteText.js

@@ -16,7 +16,7 @@ export default class SpriteText extends Sprite {
     }
     _text = "";
     _textHeight = 10;
-    _color = "#fffff";
+    _color = "#ffffff";
     _backgroundColor = false; // no background color
     _padding = 0;
     _borderWidth = 0;
@@ -57,6 +57,8 @@ export default class SpriteText extends Sprite {
     _genCanvas() {
         const canvas = this._canvas;
         const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
         const border = Array.isArray(this.borderWidth) ? this.borderWidth : [this.borderWidth, this.borderWidth]; // x,y border
         const relBorder = border.map(b => b * this.fontSize * 0.1); // border in canvas units
         const borderRadius = Array.isArray(this.borderRadius) ? this.borderRadius : [this.borderRadius, this.borderRadius, this.borderRadius, this.borderRadius]; // tl tr br bl corners
@@ -104,7 +106,7 @@ export default class SpriteText extends Sprite {
                     !!relBorderRadius[1] && [canvas.width - relBorderRadius[1], canvas.width - hb, hb, relBorderRadius[1]],
                     !!relBorderRadius[2] && [canvas.width - relBorderRadius[2], canvas.width - hb, canvas.height - hb, canvas.height - relBorderRadius[2]],
                     !!relBorderRadius[3] && [relBorderRadius[3], hb, canvas.height - hb, canvas.height - relBorderRadius[3]]
-                ].filter(d => d).forEach(([x0, x1, y0, y1]) => {
+                ].filter((d) => !!d).forEach(([x0, x1, y0, y1]) => {
                     ctx.moveTo(x0, y0);
                     ctx.quadraticCurveTo(x1, y0, x1, y1);
                 });
@@ -112,8 +114,7 @@ export default class SpriteText extends Sprite {
             }
         }
         // paint background
-        if (this.backgroundColor) {
-            //@ts-ignore
+        if (this.backgroundColor && typeof this.backgroundColor === 'string') {
             ctx.fillStyle = this.backgroundColor;
             if (!this.borderRadius) {
                 ctx.fillRect(relBorder[0], relBorder[1], canvas.width - relBorder[0] * 2, canvas.height - relBorder[1] * 2);
@@ -139,17 +140,29 @@ export default class SpriteText extends Sprite {
         // paint text
         ctx.font = font; // Set font again after canvas is resized, as context properties are reset
         ctx.fillStyle = this.color;
-        ctx.textBaseline = 'bottom';
+        // 精确垂直居中：用 measureText 的 actualBoundingBox 实测字形上下沿，
+        // 不再依赖 textBaseline='middle'（middle 是 em 盒中线，与真实字形视觉中线常偏差，
+        // 导致整行文字偏上/偏下、看着不居中）。改为 alphabetic 基线 + 实测字形高度，
+        // 把每行字形放进其 fontSize 高的槽中心。
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'alphabetic';
         const drawTextStroke = this.strokeWidth > 0;
         if (drawTextStroke) {
             ctx.lineWidth = this.strokeWidth * this.fontSize / 10;
             ctx.strokeStyle = this.strokeColor;
         }
+        const slotH = this.fontSize; // 每行槽高
         lines.forEach((line, index) => {
-            const lineX = (innerWidth - ctx.measureText(line).width) / 2;
-            const lineY = (index + 1) * this.fontSize;
-            drawTextStroke && ctx.strokeText(line, lineX, lineY);
-            ctx.fillText(line, lineX, lineY);
+            const metrics = ctx.measureText(line);
+            const ascent = metrics.actualBoundingBoxAscent; // 字形顶部到基线
+            const descent = metrics.actualBoundingBoxDescent; // 基线到字形底部
+            const glyphH = (ascent || 0) + (descent || 0);
+            const slotTop = index * slotH; // 本行槽顶（内容框坐标系，已平移）
+            // 让字形在槽中垂直居中：先平移到槽中线，再上移 ascent 回到基线
+            const baselineY = slotTop + (slotH - glyphH) / 2 + (ascent || slotH / 2);
+            const lineX = innerWidth / 2;
+            drawTextStroke && ctx.strokeText(line, lineX, baselineY);
+            ctx.fillText(line, lineX, baselineY);
         });
         // Inject canvas into sprite
         if (this.material.map)

package/SpriteText.ts

@@ -0,0 +1,205 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2023-05-03 02:42:07
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-05-03 02:53:00
+ */
+import { Sprite, SpriteMaterial, Texture, LinearFilter } from "three";
+import type { ColorString } from "./types";
+
+export default class SpriteText extends Sprite {
+    constructor(text: string = '', textHeight: number = 10, color: ColorString = 'rgba(255, 255, 255, 1)') {
+        super(new SpriteMaterial());
+        this.material.alphaTest = 0.1;
+        this._text = `${text}`;
+        this._textHeight = textHeight;
+        this._color = color;
+        this._genCanvas();
+    }
+
+    _text: string = "";
+    _textHeight: number = 10;
+    _color: ColorString = "#ffffff";
+    _backgroundColor: boolean | ColorString = false; // no background color
+    _padding: number = 0;
+    _borderWidth: number = 0;
+    _borderRadius: number = 0;
+    _borderColor: ColorString = "#fffff";
+    _strokeWidth: number = 0;
+    _strokeColor: ColorString = "#fffff";
+    _fontFace: string = 'Arial';
+    _fontSize: number = 90; // defines text resolution
+    _fontWeight: string = 'normal';
+    _canvas: HTMLCanvasElement = document.createElement('canvas');
+
+    get text(): string { return this._text; }
+    set text(text: string) { this._text = text; this._genCanvas(); }
+
+    get textHeight(): number { return this._textHeight; }
+    set textHeight(textHeight: number) { this._textHeight = textHeight; this._genCanvas(); }
+
+    get color(): ColorString { return this._color; }
+    set color(color: ColorString) { this._color = color; this._genCanvas(); }
+
+    get backgroundColor(): boolean | ColorString { return this._backgroundColor; }
+    set backgroundColor(color: boolean | ColorString) { this._backgroundColor = color; this._genCanvas(); }
+
+    get padding(): number { return this._padding; }
+    set padding(padding: number) { this._padding = padding; this._genCanvas(); }
+
+    get borderWidth(): number { return this._borderWidth; }
+    set borderWidth(borderWidth: number) { this._borderWidth = borderWidth; this._genCanvas(); }
+
+    get borderRadius(): number { return this._borderRadius; }
+    set borderRadius(borderRadius: number) { this._borderRadius = borderRadius; this._genCanvas(); }
+
+    get borderColor(): ColorString { return this._borderColor; }
+    set borderColor(borderColor: ColorString) { this._borderColor = borderColor; this._genCanvas(); }
+
+    get fontFace(): string { return this._fontFace; }
+    set fontFace(fontFace: string) { this._fontFace = fontFace; this._genCanvas(); }
+
+    get fontSize(): number { return this._fontSize; }
+    set fontSize(fontSize: number) { this._fontSize = fontSize; this._genCanvas(); }
+
+    get fontWeight(): string { return this._fontWeight; }
+    set fontWeight(fontWeight: string) { this._fontWeight = fontWeight; this._genCanvas(); }
+
+    get strokeWidth(): number { return this._strokeWidth; }
+    set strokeWidth(strokeWidth: number) { this._strokeWidth = strokeWidth; this._genCanvas(); }
+
+    get strokeColor(): ColorString { return this._strokeColor; }
+    set strokeColor(strokeColor: ColorString) { this._strokeColor = strokeColor; this._genCanvas(); }
+
+    _genCanvas(): void {
+        const canvas = this._canvas;
+        const ctx = canvas.getContext('2d');
+        if (!ctx) return;
+
+        const border = Array.isArray(this.borderWidth) ? this.borderWidth : [this.borderWidth, this.borderWidth]; // x,y border
+        const relBorder = border.map(b => b * this.fontSize * 0.1); // border in canvas units
+        const borderRadius = Array.isArray(this.borderRadius) ? this.borderRadius : [this.borderRadius, this.borderRadius, this.borderRadius, this.borderRadius]; // tl tr br bl corners
+        const relBorderRadius = borderRadius.map(b => b * this.fontSize * 0.1); // border radius in canvas units
+        const padding = Array.isArray(this.padding) ? this.padding : [this.padding, this.padding]; // x,y padding
+        const relPadding = padding.map(p => p * this.fontSize * 0.1);
+        ; // padding in canvas units
+        const lines = this.text.split('\n');
+        const font = `${this.fontWeight} ${this.fontSize}px ${this.fontFace}`;
+
+        ctx.font = font; // measure canvas with appropriate font
+        const innerWidth = Math.max(...lines.map(line => ctx.measureText(line).width));
+        const innerHeight = this.fontSize * lines.length;
+        canvas.width = innerWidth + relBorder[0] * 2 + relPadding[0] * 2;
+        canvas.height = innerHeight + relBorder[1] * 2 + relPadding[1] * 2;
+
+        // paint border
+        if (this.borderWidth) {
+            ctx.strokeStyle = this.borderColor;
+
+            if (relBorder[0]) { // left + right borders
+                const hb = relBorder[0] / 2;
+                ctx.lineWidth = relBorder[0];
+                ctx.beginPath();
+                ctx.moveTo(hb, relBorderRadius[0]);
+                ctx.lineTo(hb, canvas.height - relBorderRadius[3]);
+                ctx.moveTo(canvas.width - hb, relBorderRadius[1]);
+                ctx.lineTo(canvas.width - hb, canvas.height - relBorderRadius[2]);
+                ctx.stroke();
+            }
+
+            if (relBorder[1]) { // top + bottom borders
+                const hb = relBorder[1] / 2;
+                ctx.lineWidth = relBorder[1];
+                ctx.beginPath();
+                ctx.moveTo(Math.max(relBorder[0], relBorderRadius[0]), hb);
+                ctx.lineTo(canvas.width - Math.max(relBorder[0], relBorderRadius[1]), hb);
+                ctx.moveTo(Math.max(relBorder[0], relBorderRadius[3]), canvas.height - hb);
+                ctx.lineTo(canvas.width - Math.max(relBorder[0], relBorderRadius[2]), canvas.height - hb);
+                ctx.stroke();
+            }
+
+            if (this.borderRadius) { // strike rounded corners
+                const cornerWidth = Math.max(...relBorder);
+                const hb = cornerWidth / 2;
+                ctx.lineWidth = cornerWidth;
+                ctx.beginPath();
+                [
+                    !!relBorderRadius[0] && [relBorderRadius[0], hb, hb, relBorderRadius[0]],
+                    !!relBorderRadius[1] && [canvas.width - relBorderRadius[1], canvas.width - hb, hb, relBorderRadius[1]],
+                    !!relBorderRadius[2] && [canvas.width - relBorderRadius[2], canvas.width - hb, canvas.height - hb, canvas.height - relBorderRadius[2]],
+                    !!relBorderRadius[3] && [relBorderRadius[3], hb, canvas.height - hb, canvas.height - relBorderRadius[3]]
+                ].filter((d): d is number[] => !!d).forEach(([x0, x1, y0, y1]) => {
+                    ctx.moveTo(x0, y0);
+                    ctx.quadraticCurveTo(x1, y0, x1, y1);
+                });
+                ctx.stroke();
+            }
+        }
+
+        // paint background
+        if (this.backgroundColor && typeof this.backgroundColor === 'string') {
+            ctx.fillStyle = this.backgroundColor;
+            if (!this.borderRadius) {
+                ctx.fillRect(relBorder[0], relBorder[1], canvas.width - relBorder[0] * 2, canvas.height - relBorder[1] * 2);
+            }
+            else { // fill with rounded corners
+                ctx.beginPath();
+                ctx.moveTo(relBorder[0], relBorderRadius[0]);
+                [
+                    [relBorder[0], relBorderRadius[0], canvas.width - relBorderRadius[1], relBorder[1], relBorder[1], relBorder[1]], // t
+                    [canvas.width - relBorder[0], canvas.width - relBorder[0], canvas.width - relBorder[0], relBorder[1], relBorderRadius[1], canvas.height - relBorderRadius[2]], // r
+                    [canvas.width - relBorder[0], canvas.width - relBorderRadius[2], relBorderRadius[3], canvas.height - relBorder[1], canvas.height - relBorder[1], canvas.height - relBorder[1]], // b
+                    [relBorder[0], relBorder[0], relBorder[0], canvas.height - relBorder[1], canvas.height - relBorderRadius[3], relBorderRadius[0]], // t
+                ].forEach(([x0, x1, x2, y0, y1, y2]) => {
+                    ctx.quadraticCurveTo(x0, y0, x1, y1);
+                    ctx.lineTo(x2, y2);
+                });
+                ctx.closePath();
+                ctx.fill();
+            }
+        }
+
+        ctx.translate(...relBorder as [number, number]);
+        ctx.translate(...relPadding as [number, number]);
+
+        // paint text
+        ctx.font = font; // Set font again after canvas is resized, as context properties are reset
+        ctx.fillStyle = this.color;
+        // 精确垂直居中：用 measureText 的 actualBoundingBox 实测字形上下沿，
+        // 不再依赖 textBaseline='middle'（middle 是 em 盒中线，与真实字形视觉中线常偏差，
+        // 导致整行文字偏上/偏下、看着不居中）。改为 alphabetic 基线 + 实测字形高度，
+        // 把每行字形放进其 fontSize 高的槽中心。
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'alphabetic';
+
+        const drawTextStroke = this.strokeWidth > 0;
+        if (drawTextStroke) {
+            ctx.lineWidth = this.strokeWidth * this.fontSize / 10;
+            ctx.strokeStyle = this.strokeColor;
+        }
+
+        const slotH = this.fontSize; // 每行槽高
+        lines.forEach((line, index) => {
+            const metrics = ctx.measureText(line);
+            const ascent = metrics.actualBoundingBoxAscent;   // 字形顶部到基线
+            const descent = metrics.actualBoundingBoxDescent; // 基线到字形底部
+            const glyphH = (ascent || 0) + (descent || 0);
+            const slotTop = index * slotH;                    // 本行槽顶（内容框坐标系，已平移）
+            // 让字形在槽中垂直居中：先平移到槽中线，再上移 ascent 回到基线
+            const baselineY = slotTop + (slotH - glyphH) / 2 + (ascent || slotH / 2);
+            const lineX = innerWidth / 2;
+            drawTextStroke && ctx.strokeText(line, lineX, baselineY);
+            ctx.fillText(line, lineX, baselineY);
+        });
+
+        // Inject canvas into sprite
+        if (this.material.map)
+            this.material.map.dispose(); // gc previous texture
+        const texture = this.material.map = new Texture(canvas);
+        texture.minFilter = LinearFilter;
+        texture.needsUpdate = true;
+
+        const yScale = this.textHeight * lines.length + border[1] * 2 + padding[1] * 2;
+        this.scale.set(yScale * canvas.width / canvas.height, yScale, 0);
+    }
+}

package/SpriteText2.d.ts

@@ -1,10 +1,11 @@
-import { Intersection, Raycaster, Sprite } from 'three';
+import { Sprite, Raycaster, Intersection } from 'three';
+import type { ColorString } from "./types";
 export default class SpriteText2 extends Sprite {
-    constructor(text?: string, textHeight?: number, color?: `rgb(${string})` | `rgba(${string})` | `#${string}`);
+    constructor(text?: string, textHeight?: number, color?: ColorString);
     _text: string;
     _textHeight: number;
-    _color: `rgb(${string})` | `rgba(${string})` | `#${string}`;
-    _backgroundColor: `rgb(${string})` | `rgba(${string})` | `#${string}` | false;
+    _color: ColorString;
+    _backgroundColor: ColorString | false;
     _padding: number;
     _borderWidth: number;
     _borderRadius: number;
@@ -19,10 +20,10 @@ export default class SpriteText2 extends Sprite {
     set text(text: string);
     get textHeight(): number;
     set textHeight(textHeight: number);
-    get color(): `#${string}` | `rgba(${string})` | `rgb(${string})`;
-    set color(color: `#${string}` | `rgba(${string})` | `rgb(${string})`);
-    get backgroundColor(): false | `#${string}` | `rgba(${string})` | `rgb(${string})`;
-    set backgroundColor(color: false | `#${string}` | `rgba(${string})` | `rgb(${string})`);
+    get color(): ColorString;
+    set color(color: ColorString);
+    get backgroundColor(): ColorString | false;
+    set backgroundColor(color: ColorString | false);
     get padding(): number;
     set padding(padding: number);
     get borderWidth(): number;

package/SpriteText2.js

@@ -68,6 +68,8 @@ export default class SpriteText2 extends Sprite {
     _genCanvas() {
         const canvas = this._canvas;
         const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
         const border = Array.isArray(this.borderWidth) ? this.borderWidth : [this.borderWidth, this.borderWidth]; // x,y border
         const relBorder = border.map(b => b * this.fontSize * 0.1); // border in canvas units
         const borderRadius = Array.isArray(this.borderRadius) ? this.borderRadius : [this.borderRadius, this.borderRadius, this.borderRadius, this.borderRadius]; // tl tr br bl corners
@@ -79,8 +81,18 @@ export default class SpriteText2 extends Sprite {
         ctx.font = font; // measure canvas with appropriate font
         const innerWidth = Math.max(...lines.map(line => ctx.measureText(line).width));
         const innerHeight = this.fontSize * lines.length;
-        canvas.width = innerWidth + relBorder[0] * 2 + relPadding[0] * 2;
-        canvas.height = (innerHeight + relBorder[1] * 2 + relPadding[1] * 2) * 2 + 40;
+        // 内容框尺寸（含 border + padding）
+        const contentW = innerWidth + relBorder[0] * 2 + relPadding[0] * 2;
+        const contentH = innerHeight + relBorder[1] * 2 + relPadding[1] * 2;
+        // 箭头区：底部预留 arrowZone 给向下箭头（raycast 用 uv.y 判定点击区）。
+        // 顶部同样预留等量空间，使内容框在画布中【垂直居中】，不再因底部箭头区而整体偏上、视觉不居中。
+        const arrowZone = 40;
+        const boxTop = arrowZone; // 内容框顶边（顶留白 = arrowZone）
+        const boxBottom = boxTop + contentH; // 内容框底边（箭头从此处向下延伸）
+        canvas.width = contentW;
+        canvas.height = boxBottom + arrowZone; // 顶 arrowZone + 内容 + 底 arrowZone
+        // 统一平移到内容框坐标系：之后所有绘制都以 (0, boxTop) 为内容框左上角。
+        ctx.translate(0, boxTop);
         // paint border
         if (this.borderWidth) {
             ctx.strokeStyle = this.borderColor;
@@ -89,9 +101,9 @@ export default class SpriteText2 extends Sprite {
                 ctx.lineWidth = relBorder[0];
                 ctx.beginPath();
                 ctx.moveTo(hb, relBorderRadius[0]);
-                ctx.lineTo(hb, ((canvas.height - 40) / 2) - relBorderRadius[3]);
-                ctx.moveTo(canvas.width - hb, relBorderRadius[1]);
-                ctx.lineTo(canvas.width - hb, ((canvas.height - 40) / 2) - relBorderRadius[2]);
+                ctx.lineTo(hb, contentH - relBorderRadius[3]);
+                ctx.moveTo(contentW - hb, relBorderRadius[1]);
+                ctx.lineTo(contentW - hb, contentH - relBorderRadius[2]);
                 ctx.stroke();
             }
             if (relBorder[1]) { // top + bottom borders
@@ -99,12 +111,12 @@ export default class SpriteText2 extends Sprite {
                 ctx.lineWidth = relBorder[1];
                 ctx.beginPath();
                 ctx.moveTo(Math.max(relBorder[0], relBorderRadius[0]), hb);
-                ctx.lineTo(canvas.width - Math.max(relBorder[0], relBorderRadius[1]), hb);
-                ctx.moveTo(Math.max(relBorder[0], relBorderRadius[3]), ((canvas.height - 40) / 2) - hb);
-                ctx.lineTo((canvas.width / 2 - 20), ((canvas.height - 40) / 2) - hb);
-                ctx.lineTo((canvas.width / 2), ((canvas.height - 40) / 2) + 20 - hb);
-                ctx.lineTo((canvas.width / 2 + 20), ((canvas.height - 40) / 2) - hb);
-                ctx.lineTo(canvas.width - Math.max(relBorder[0], relBorderRadius[2]), ((canvas.height - 40) / 2) - hb);
+                ctx.lineTo(contentW - Math.max(relBorder[0], relBorderRadius[1]), hb);
+                ctx.moveTo(Math.max(relBorder[0], relBorderRadius[3]), contentH - hb);
+                ctx.lineTo((contentW / 2 - 20), contentH - hb);
+                ctx.lineTo((contentW / 2), contentH + 20 - hb);
+                ctx.lineTo((contentW / 2 + 20), contentH - hb);
+                ctx.lineTo(contentW - Math.max(relBorder[0], relBorderRadius[2]), contentH - hb);
                 ctx.stroke();
             }
             if (this.borderRadius) { // strike rounded corners
@@ -114,10 +126,10 @@ export default class SpriteText2 extends Sprite {
                 ctx.beginPath();
                 [
                     !!relBorderRadius[0] && [relBorderRadius[0], hb, hb, relBorderRadius[0]],
-                    !!relBorderRadius[1] && [canvas.width - relBorderRadius[1], canvas.width - hb, hb, relBorderRadius[1]],
-                    !!relBorderRadius[2] && [canvas.width - relBorderRadius[2], canvas.width - hb, ((canvas.height - 40) / 2) - hb, ((canvas.height - 40) / 2) - relBorderRadius[2]],
-                    !!relBorderRadius[3] && [relBorderRadius[3], hb, ((canvas.height - 40) / 2) - hb, ((canvas.height - 40) / 2) - relBorderRadius[3]]
-                ].filter(d => d).forEach(([x0, x1, y0, y1]) => {
+                    !!relBorderRadius[1] && [contentW - relBorderRadius[1], contentW - hb, hb, relBorderRadius[1]],
+                    !!relBorderRadius[2] && [contentW - relBorderRadius[2], contentW - hb, contentH - hb, contentH - relBorderRadius[2]],
+                    !!relBorderRadius[3] && [relBorderRadius[3], hb, contentH - hb, contentH - relBorderRadius[3]]
+                ].filter((d) => !!d).forEach(([x0, x1, y0, y1]) => {
                     ctx.moveTo(x0, y0);
                     ctx.quadraticCurveTo(x1, y0, x1, y1);
                 });
@@ -128,41 +140,54 @@ export default class SpriteText2 extends Sprite {
         if (this.backgroundColor) {
             ctx.fillStyle = this.backgroundColor;
             if (!this.borderRadius) {
-                ctx.fillRect(relBorder[0], relBorder[1], canvas.width - relBorder[0] * 2, ((canvas.height - 40) / 2) - relBorder[1] * 2);
+                ctx.fillRect(relBorder[0], relBorder[1], contentW - relBorder[0] * 2, contentH - relBorder[1] * 2);
             }
             else { // fill with rounded corners
                 ctx.beginPath();
                 ctx.moveTo(relBorder[0], relBorderRadius[0]);
                 ctx.quadraticCurveTo(relBorder[0], relBorder[1], relBorderRadius[0], relBorder[1]);
-                ctx.lineTo(canvas.width - relBorderRadius[1], relBorder[1]);
-                ctx.quadraticCurveTo(canvas.width - relBorder[0], relBorder[1], canvas.width - relBorder[0], relBorderRadius[1]);
-                ctx.lineTo(canvas.width - relBorder[0], ((canvas.height - 40) / 2) - relBorderRadius[2]);
-                ctx.quadraticCurveTo(canvas.width - relBorder[0], ((canvas.height - 40) / 2) - relBorder[1], canvas.width - relBorderRadius[2], ((canvas.height - 40) / 2) - relBorder[1]);
-                ctx.lineTo((canvas.width / 2 + 20), ((canvas.height - 40) / 2) - relBorder[1]);
-                ctx.lineTo((canvas.width / 2), ((canvas.height - 40) / 2) + 20 - relBorder[1]);
-                ctx.lineTo((canvas.width / 2 - 20), ((canvas.height - 40) / 2) - relBorder[1]);
-                ctx.lineTo(relBorderRadius[3], ((canvas.height - 40) / 2) - relBorder[1]);
-                ctx.quadraticCurveTo(relBorder[0], ((canvas.height - 40) / 2) - relBorder[1], relBorder[0], ((canvas.height - 40) / 2) - relBorderRadius[3]);
+                ctx.lineTo(contentW - relBorderRadius[1], relBorder[1]);
+                ctx.quadraticCurveTo(contentW - relBorder[0], relBorder[1], contentW - relBorder[0], relBorderRadius[1]);
+                ctx.lineTo(contentW - relBorder[0], contentH - relBorderRadius[2]);
+                ctx.quadraticCurveTo(contentW - relBorder[0], contentH - relBorder[1], contentW - relBorderRadius[2], contentH - relBorder[1]);
+                ctx.lineTo((contentW / 2 + 20), contentH - relBorder[1]);
+                ctx.lineTo((contentW / 2), contentH + 20 - relBorder[1]);
+                ctx.lineTo((contentW / 2 - 20), contentH - relBorder[1]);
+                ctx.lineTo(relBorderRadius[3], contentH - relBorder[1]);
+                ctx.quadraticCurveTo(relBorder[0], contentH - relBorder[1], relBorder[0], contentH - relBorderRadius[3]);
                 ctx.closePath();
                 ctx.fill();
             }
         }
+        // 文字区：在内容框内（已平移到 boxTop）再叠加 border + padding 偏移，使文字在框内居中。
         ctx.translate(relBorder[0], relBorder[1]);
-        ctx.translate(relPadding[0], relPadding[0]);
+        ctx.translate(relPadding[0], relPadding[1]);
         // paint text
         ctx.font = font; // Set font again after canvas is resized, as context properties are reset
         ctx.fillStyle = this.color;
-        ctx.textBaseline = 'bottom';
+        // 精确垂直居中：用 measureText 的 actualBoundingBox 实测字形上下沿，
+        // 不再依赖 textBaseline='middle'（middle 是 em 盒中线，与真实字形视觉中线常偏差，
+        // 导致整行文字偏上/偏下、看着不居中）。改为 alphabetic 基线 + 实测字形高度，
+        // 把每行字形放进其 fontSize 高的槽中心。
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'alphabetic';
         const drawTextStroke = this.strokeWidth > 0;
         if (drawTextStroke) {
             ctx.lineWidth = this.strokeWidth * this.fontSize / 10;
             ctx.strokeStyle = this.strokeColor;
         }
+        const slotH = this.fontSize; // 每行槽高
         lines.forEach((line, index) => {
-            const lineX = (innerWidth - ctx.measureText(line).width) / 2;
-            const lineY = (index + 1) * this.fontSize;
-            drawTextStroke && ctx.strokeText(line, lineX, lineY);
-            ctx.fillText(line, lineX, lineY);
+            const metrics = ctx.measureText(line);
+            const ascent = metrics.actualBoundingBoxAscent; // 字形顶部到基线
+            const descent = metrics.actualBoundingBoxDescent; // 基线到字形底部
+            const glyphH = (ascent || 0) + (descent || 0);
+            const slotTop = index * slotH; // 本行槽顶（内容框坐标系，已平移）
+            // 让字形在槽中垂直居中：先平移到槽中线，再上移 ascent 回到基线
+            const baselineY = slotTop + (slotH - glyphH) / 2 + (ascent || slotH / 2);
+            const lineX = innerWidth / 2;
+            drawTextStroke && ctx.strokeText(line, lineX, baselineY);
+            ctx.fillText(line, lineX, baselineY);
         });
         // Inject canvas into sprite
         if (this.material.map)
@@ -178,7 +203,7 @@ export default class SpriteText2 extends Sprite {
         let intersect = [];
         super.raycast(raycaster, intersect);
         let inte = intersect[0];
-        if (inte && (inte.uv.y > 0.55)) {
+        if (inte && (inte.uv && inte.uv.y > 0.55)) {
             intersects.push(inte);
         }
     }