fix(ui): align Private Stash header and gold text inside TradeStash.dc6 recessed boxes #493

New Issue

troytt · 2026-09-27T05:47:33Z

troytt commented

2026-09-27 05:47:33 +00:00

问题描述 (Problem Statement)

在打开储藏箱面板（Panel\TradeStash.dc6 / public/ui/stash-bg.png，320×432，绘制原点 ox = 80, oy = 60）时，顶部两行文字与背景贴图中的两个黑色凹槽框（recessed boxes）严重错位：

第一行标题 私人储物箱 (Private Stash)：
- 原代码绘制在 (ox + 160, oy + 26) 且使用 fontexocet10（bold 13px，渲染宽度约 168.25px）。
- 垂直方向错位：D2FontRenderer.drawText 使用 ctx.textBaseline = 'alphabetic'（y 为字形基线而非顶部坐标）。传入 oy + 26 导致字形落在 relY = 15..26，直接压在第一个凹槽框（relY = 24..38）的上沿金属边框（relY = 21..23）上，而凹槽框下半部分（relY = 27..38）完全空置。
- 水平方向错位：第一个凹槽框被 relX = 94..96 的垂直金属分隔线切分为左侧小方格（relX = 74..93, relY = 24..38，20×15 金币图标槽位）与右侧宽文本凹槽（relX = 97..247, relY = 24..38，宽度 151px，水平中心为 ox + 172）。按 ox + 160 居中且使用 168.25px 宽的 fontexocet10 导致 私 字落入左侧方格内、人 字直接压在 relX = 94..96 的竖向分隔线上。
第二行金币数额 储物箱金币: <amount>：
- 原代码绘制在 (ox + 160, oy + 48)。
- 垂直方向错位：第二个凹槽框的内部黑色区域为 relX = 75..246, relY = 49..65（宽高 172×17，垂直中心 relY = 57）。传入基线 oy + 48 导致整行文字落在 relY = 39..48，完全处于上下两个凹槽框之间的石质分隔横梁上，而第二个凹槽框（relY = 49..65）内部完全为空。

Ground Truth (`TradeStash.dc6` & `D2Client.dll` v1.13c)

对 public/ui/stash-bg.png（TradeStash.dc6）像素边界与 D2Client.dll（0x6fb498d5..0x6fb49b29, 0x6fb3cfb0..0x6fb3d2f7）进行精确测量：

区域	面板相对坐标 (`relX`, `relY`)	尺寸 (`w × h`)	几何中心 (`relX`, `relY`)	`alphabetic` 垂直居中基线
顶部左侧图标槽	`relX = 74..93, relY = 24..38`	`20 × 15`	`(83.5, 31.0)`	—
顶部竖向分隔线	`relX = 94..96, relY = 23..39`	`3 × 17`	—	—
顶部右侧标题凹槽	`relX = 97..247, relY = 24..38`	`151 × 15`	`(172.0, 31.0)`	`x = ox + 172, y = oy + 35`
底部金币文本凹槽	`relX = 75..246, relY = 49..65`	`172 × 17`	`(160.5, 57.0)`	`x = ox + 160, y = oy + 61`

修复方案 (Fix Plan)

在 src/ui/world-panels.ts 中导出 STASH_HEADER_TOP_RECESS 与 STASH_HEADER_BOTTOM_RECESS 精确几何常量。
将储藏箱顶部标题调整为在右侧文本凹槽（relX = 97..247, relY = 24..38）内水平与垂直居中（x = ox + 172, y = oy + 35，使用 font8 确保约 129.8px 宽度完整落入 151px 凹槽内，不越过 relX = 94..96 竖向分隔线）。
将储藏箱金币文本调整为在底部凹槽（relX = 75..246, relY = 49..65）内水平与垂直居中（x = ox + 160, y = oy + 61）。
在 tests/stash.test.ts 中新增凹槽像素边界与文本绘制坐标回归测试，并通过 Headless Chromium 截图验证视觉对齐。

## 问题描述 (Problem Statement) 在打开储藏箱面板（`Panel\TradeStash.dc6` / `public/ui/stash-bg.png`，`320×432`，绘制原点 `ox = 80, oy = 60`）时，顶部两行文字与背景贴图中的两个黑色凹槽框（recessed boxes）严重错位： 1. **第一行标题 `私人储物箱 (Private Stash)`**： - 原代码绘制在 `(ox + 160, oy + 26)` 且使用 `fontexocet10`（`bold 13px`，渲染宽度约 `168.25px`）。 - **垂直方向错位**：`D2FontRenderer.drawText` 使用 `ctx.textBaseline = 'alphabetic'`（`y` 为字形基线而非顶部坐标）。传入 `oy + 26` 导致字形落在 `relY = 15..26`，直接压在第一个凹槽框（`relY = 24..38`）的上沿金属边框（`relY = 21..23`）上，而凹槽框下半部分（`relY = 27..38`）完全空置。 - **水平方向错位**：第一个凹槽框被 `relX = 94..96` 的垂直金属分隔线切分为左侧小方格（`relX = 74..93, relY = 24..38`，`20×15` 金币图标槽位）与右侧宽文本凹槽（`relX = 97..247, relY = 24..38`，宽度 `151px`，水平中心为 `ox + 172`）。按 `ox + 160` 居中且使用 `168.25px` 宽的 `fontexocet10` 导致 `私` 字落入左侧方格内、`人` 字直接压在 `relX = 94..96` 的竖向分隔线上。 2. **第二行金币数额 `储物箱金币: <amount>`**： - 原代码绘制在 `(ox + 160, oy + 48)`。 - **垂直方向错位**：第二个凹槽框的内部黑色区域为 `relX = 75..246, relY = 49..65`（宽高 `172×17`，垂直中心 `relY = 57`）。传入基线 `oy + 48` 导致整行文字落在 `relY = 39..48`，完全处于上下两个凹槽框之间的石质分隔横梁上，而第二个凹槽框（`relY = 49..65`）内部完全为空。 --- ## Ground Truth (`TradeStash.dc6` & `D2Client.dll` v1.13c) 对 `public/ui/stash-bg.png`（`TradeStash.dc6`）像素边界与 `D2Client.dll`（`0x6fb498d5..0x6fb49b29`, `0x6fb3cfb0..0x6fb3d2f7`）进行精确测量： | 区域 | 面板相对坐标 (`relX`, `relY`) | 尺寸 (`w × h`) | 几何中心 (`relX`, `relY`) | `alphabetic` 垂直居中基线 | | :--- | :--- | :--- | :--- | :--- | | 顶部左侧图标槽 | `relX = 74..93, relY = 24..38` | `20 × 15` | `(83.5, 31.0)` | — | | 顶部竖向分隔线 | `relX = 94..96, relY = 23..39` | `3 × 17` | — | — | | **顶部右侧标题凹槽** | `relX = 97..247, relY = 24..38` | `151 × 15` | `(172.0, 31.0)` | `x = ox + 172, y = oy + 35` | | **底部金币文本凹槽** | `relX = 75..246, relY = 49..65` | `172 × 17` | `(160.5, 57.0)` | `x = ox + 160, y = oy + 61` | --- ## 修复方案 (Fix Plan) 1. 在 `src/ui/world-panels.ts` 中导出 `STASH_HEADER_TOP_RECESS` 与 `STASH_HEADER_BOTTOM_RECESS` 精确几何常量。 2. 将储藏箱顶部标题调整为在右侧文本凹槽（`relX = 97..247, relY = 24..38`）内水平与垂直居中（`x = ox + 172, y = oy + 35`，使用 `font8` 确保约 `129.8px` 宽度完整落入 `151px` 凹槽内，不越过 `relX = 94..96` 竖向分隔线）。 3. 将储藏箱金币文本调整为在底部凹槽（`relX = 75..246, relY = 49..65`）内水平与垂直居中（`x = ox + 160, y = oy + 61`）。 4. 在 `tests/stash.test.ts` 中新增凹槽像素边界与文本绘制坐标回归测试，并通过 Headless Chromium 截图验证视觉对齐。

troytt referenced this issue from a commit

2026-09-27 05:55:01 +00:00

fix(ui): align Private Stash header and gold text inside TradeStash.dc6 recessed boxes (Fixes #493)

troytt referenced a pull request that will close this issue

2026-09-27 05:55:32 +00:00

fix(ui): align Private Stash header and gold text inside TradeStash.dc6 recessed boxes (#493) #494

troytt closed this issue

2026-09-27 05:55:33 +00:00

troytt referenced this issue from a commit

2026-09-27 05:55:34 +00:00

Merge pull request 'fix(ui): align Private Stash header and gold text inside TradeStash.dc6 recessed boxes (#493)' (#494) from fix/stash-text-align into main

Sign in to join this conversation.