生命球（红球）及法力球与天使/恶魔石雕边框未对齐问题修复 #383

New Issue

troytt · 2026-09-22T09:16:01Z

troytt commented

2026-09-22 09:16:01 +00:00

问题现象与截图证据

在客户端主界面底部状态栏（详见反馈截图 media_1790066781068.png）中：

生命球（红球）与外围边框发生明显纵向错位：生命球的红色球体上边缘与上方天使石雕/玻璃罩边框（overlap.dc6 / overlap-left.png）存在显著的空隙（约 7~12px 的黑色空缺圆弧），红球整体偏下，下方穿透了底座石槽边缘。
法力球（蓝球）同样存在错位：右侧法力球同样硬编码在 y = 515，与右侧恶魔石雕边框（overlap-right.png）存在类似的不同心错位现象。

根因分析（Forensic Analysis）

经对 src/ui/globes.ts、src/ui/control-bar.ts 以及相关切图资产进行精确像素采样与几何拟合分析：

坐标基准不一致：
- 底座石雕控制面板 ctrlpnl-800.png 绘制于 (0, 496)。
- 左侧天使石雕浮雕 overlap-left.png 绘制于 (27, 508)。通过对 overlap-left.png 顶部玻璃罩圆弧进行最小二乘法拟合，玻璃罩圆弧中心位于屏幕坐标 (68.0, 548.55)，半径约为 40.66px，即顶部圆弧最高点位于屏幕 y = 507.89 ≈ 508。
- 但是在 src/ui/globes.ts 中，LIFE_GLOBE_BOUNDS 被硬编码为：
```
export const LIFE_GLOBE_BOUNDS: GlobeBounds = {
  x: 28,
  y: 515,
  width: 80,
  height: 80,
}
```
  导致球体中心落在 (68.0, 555.0)，纵向向下偏移了 6.45px！
材质边距与留白累加：
- 资产 globe-life.png 顶部自身包含若干像素暗色渐变过渡，在与向下偏移的 y: 515 叠加后，在视觉上直接暴露出上方玻璃圆罩的黑色边框线，形成一弯明显的月牙状暗色缺口。
右侧法力球对称性问题：
- 右侧 MANA_GLOBE_BOUNDS 同样设置在 y: 515，与 overlap-right.png 绘制在 y: 508 同样未实现同心对齐。

原版 Diablo II 1.13c 规范（Ground Truth）

在暗黑破坏神 2 原版 800x600 布局中，底层石雕底槽（800CtrlPnl7.dc6）、红蓝血球（Hlthmana.dc6）与天使/恶魔玻璃浮雕罩（overlap.dc6）必须为严格同心结构。
满生命/满法力状态下，液体表面应严丝合缝填满玻璃罩内圈，不得向上漏出黑色空腔，不得向下或向外溢出底座金属槽环。

修复与验收标准

重构坐标系并对齐同心圆心：
- 调整 src/ui/globes.ts 中的 LIFE_GLOBE_BOUNDS 与 MANA_GLOBE_BOUNDS 坐标（将 y 从 515 修正为与 overlap 玻璃罩同心的数值，约 y: 508 ~ 509），确保球体半径与圆心完全贴合 overlap-left.png 与 overlap-right.png。
同步更新关联渲染与交互：
- 底座底碗 drawSocketBowl 的绘制圆心同步对齐。
- 纵向裁剪高度计算 computeClipRect 与底部贴图绘制严格对齐新坐标。
- 鼠标悬浮与锁定数字命中检测 hitGlobe() 圆心同步更新。
视觉走查验证：
- 在满血（850/850）与空血状态下，红球边缘均完美嵌入天使雕像双臂与玻璃边框内，无黑色外露弧线，无穿帮溢出。
- 蓝球对称完成同心对齐。

## 问题现象与截图证据在客户端主界面底部状态栏（详见反馈截图 `media_1790066781068.png`）中： - **生命球（红球）与外围边框发生明显纵向错位**：生命球的红色球体上边缘与上方天使石雕/玻璃罩边框（`overlap.dc6` / `overlap-left.png`）存在显著的空隙（约 7~12px 的黑色空缺圆弧），红球整体偏下，下方穿透了底座石槽边缘。 - **法力球（蓝球）同样存在错位**：右侧法力球同样硬编码在 `y = 515`，与右侧恶魔石雕边框（`overlap-right.png`）存在类似的不同心错位现象。 --- ## 根因分析（Forensic Analysis）经对 `src/ui/globes.ts`、`src/ui/control-bar.ts` 以及相关切图资产进行精确像素采样与几何拟合分析： 1. **坐标基准不一致**： - 底座石雕控制面板 `ctrlpnl-800.png` 绘制于 `(0, 496)`。 - 左侧天使石雕浮雕 `overlap-left.png` 绘制于 `(27, 508)`。通过对 `overlap-left.png` 顶部玻璃罩圆弧进行最小二乘法拟合，玻璃罩圆弧中心位于屏幕坐标 **`(68.0, 548.55)`**，半径约为 **`40.66px`**，即顶部圆弧最高点位于屏幕 **`y = 507.89 ≈ 508`**。 - 但是在 `src/ui/globes.ts` 中，`LIFE_GLOBE_BOUNDS` 被硬编码为： ```ts export const LIFE_GLOBE_BOUNDS: GlobeBounds = { x: 28, y: 515, width: 80, height: 80, } ``` 导致球体中心落在 **`(68.0, 555.0)`**，纵向向下偏移了 **`6.45px`**！ 2. **材质边距与留白累加**： - 资产 `globe-life.png` 顶部自身包含若干像素暗色渐变过渡，在与向下偏移的 `y: 515` 叠加后，在视觉上直接暴露出上方玻璃圆罩的黑色边框线，形成一弯明显的月牙状暗色缺口。 3. **右侧法力球对称性问题**： - 右侧 `MANA_GLOBE_BOUNDS` 同样设置在 `y: 515`，与 `overlap-right.png` 绘制在 `y: 508` 同样未实现同心对齐。 --- ## 原版 Diablo II 1.13c 规范（Ground Truth） - 在暗黑破坏神 2 原版 800x600 布局中，底层石雕底槽（`800CtrlPnl7.dc6`）、红蓝血球（`Hlthmana.dc6`）与天使/恶魔玻璃浮雕罩（`overlap.dc6`）必须为**严格同心结构**。 - 满生命/满法力状态下，液体表面应严丝合缝填满玻璃罩内圈，不得向上漏出黑色空腔，不得向下或向外溢出底座金属槽环。 --- ## 修复与验收标准 1. **重构坐标系并对齐同心圆心**： - 调整 `src/ui/globes.ts` 中的 `LIFE_GLOBE_BOUNDS` 与 `MANA_GLOBE_BOUNDS` 坐标（将 `y` 从 `515` 修正为与 `overlap` 玻璃罩同心的数值，约 `y: 508` ~ `509`），确保球体半径与圆心完全贴合 `overlap-left.png` 与 `overlap-right.png`。 2. **同步更新关联渲染与交互**： - 底座底碗 `drawSocketBowl` 的绘制圆心同步对齐。 - 纵向裁剪高度计算 `computeClipRect` 与底部贴图绘制严格对齐新坐标。 - 鼠标悬浮与锁定数字命中检测 `hitGlobe()` 圆心同步更新。 3. **视觉走查验证**： - 在满血（850/850）与空血状态下，红球边缘均完美嵌入天使雕像双臂与玻璃边框内，无黑色外露弧线，无穿帮溢出。 - 蓝球对称完成同心对齐。

troytt closed this issue

2026-09-23 01:11:59 +00:00

Sign in to join this conversation.

No Label

No Milestone

No project

No Assignees

1 Participants

Notifications

Due Date

The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: troytt/diablo2-web#383