人物属性面板（Character Sheet）字符与数值未完全对齐背景凹槽框，需 E2E 浏览器截图走查验证 #384

New Issue

troytt · 2026-09-22T09:18:13Z

troytt commented

2026-09-22 09:18:13 +00:00

问题现象与截图证据

在客户端人物属性面板（快捷键 A / C，详见反馈截图 media_1790066831872.png）中，文字与数值渲染严重偏离底图 public/ui/char-sheet.png（invchar6.dc6）的预设金属雕花黑底凹槽线框：

顶部角色与职业名错位：
- 角色名（如 Isendra）与职业名（如 女法师 (Sorceress)）水平与垂直位置偏移，职业名甚至超出顶栏右侧边框。
等级与经验值区域严重偏心：
- 等级框（Box x: [12, 53]，中心点 32.5px）：代码硬编码在 ox + 42，导致“等级”与数值“85”整体向右偏移近 10px，明显偏出框线中心。
- 当前经验值与升级所需经验框（两框均为 116px 宽，中心点分别为 123.5px 与 251.5px）：代码硬编码在 135px 与 245px，导致文本与长数字横向偏心，且纵向基线紧贴上下边缘。
四大核心基础属性（Str / Dex / Vit / Ene）未居中：
- 数值凹槽框尺寸为 36x16px（x: [77, 112]，中心 94.5px）。
- 当前蓝色数值字符（如 156, 75, 315, 95）在框内纵向基线与横向对齐存在视觉偏移，数值偏左偏高。
战斗属性、生命/法力及抗性区域溢出与错位：
- 右侧“右键技能伤害”长数值（如 1399-1765）严重向右挤压，末尾数字直接贴在甚至压过凹槽右侧金框边线。
- 命中率（AR）、防御力（Def）、耐力/生命/法力双数值（当前/最大值）以及四系抗性（Fire / Cold / Light / Pois 75%）的 baseline 坐标存在 3~12px 不等的错落不齐。

根因定位（Forensic Analysis）

在 src/ui/character-sheet.ts 中：

坐标全量硬编码未对应底图真实像素：文本坐标（如 ox + 90, ox + 236, ox + 42, ox + 135, ox + 285 等）为前期估算值，未测量 char-sheet.png 中各区域黑色内凹框（Pure Black Box Bounding Rects）的精确几何矩形。
字体渲染基线（Baseline）与行高处理未统筹：
- src/ui/font.ts 中 drawText 统一采用 ctx.textBaseline = 'alphabetic'，即传入的 y 坐标为文字的基线位置，而非矩形框的中心或顶部。
- 当在高度仅为 16px 或 18px 的小格中居中文字时，必须严格根据字体的 Cap Height / Ascent 计算出正确的 Baseline 偏移量，否则会导致文字下沉或冲顶。

修复要求与严格验收准则（Definition of Done）

本 Issue 的修复完成标准具有刚性视觉走查约束：

精确测绘底图全部凹槽网格：
- 测绘 public/ui/char-sheet.png 中每一个输入/展示框的 [left, top, width, height]。
- 封装标准化的对齐绘制辅助函数（给定框体 Bounds 与对齐方式 'center' | 'left' | 'right'，自动计算文本的水平 X 与垂直居中 Baseline Y）。
文字溢出防护与字体微调：
- 针对技能伤害等长字符串（如 1399-1765），确保其字号或字距自适应容器宽度，杜绝触碰或越过右侧金框。
强制 E2E 真实浏览器截图走查验证（核心硬性指标）：
- 必须使用 Playwright / Puppeteer 运行自动化 E2E 流程，启动真实浏览器并加载游戏。
- 打开人物属性面板，截取高分辨率 UI 原图（输出到 tests/screenshots/ 或 artifacts 目录）。
- 对截图中的每一个文字框进行像素级对齐确认，只有在 E2E 浏览器截图中确认所有文字、数值均完美嵌合在线框几何中心后，才允许确认修复与合并！

## 问题现象与截图证据在客户端人物属性面板（快捷键 `A` / `C`，详见反馈截图 `media_1790066831872.png`）中，文字与数值渲染严重偏离底图 `public/ui/char-sheet.png`（`invchar6.dc6`）的预设金属雕花黑底凹槽线框： 1. **顶部角色与职业名错位**： - 角色名（如 `Isendra`）与职业名（如 `女法师 (Sorceress)`）水平与垂直位置偏移，职业名甚至超出顶栏右侧边框。 2. **等级与经验值区域严重偏心**： - 等级框（Box `x: [12, 53]`，中心点 `32.5px`）：代码硬编码在 `ox + 42`，导致“等级”与数值“85”整体向右偏移近 10px，明显偏出框线中心。 - 当前经验值与升级所需经验框（两框均为 116px 宽，中心点分别为 `123.5px` 与 `251.5px`）：代码硬编码在 `135px` 与 `245px`，导致文本与长数字横向偏心，且纵向基线紧贴上下边缘。 3. **四大核心基础属性（Str / Dex / Vit / Ene）未居中**： - 数值凹槽框尺寸为 `36x16px`（`x: [77, 112]`，中心 `94.5px`）。 - 当前蓝色数值字符（如 `156`, `75`, `315`, `95`）在框内纵向基线与横向对齐存在视觉偏移，数值偏左偏高。 4. **战斗属性、生命/法力及抗性区域溢出与错位**： - 右侧“右键技能伤害”长数值（如 `1399-1765`）严重向右挤压，末尾数字直接贴在甚至压过凹槽右侧金框边线。 - 命中率（AR）、防御力（Def）、耐力/生命/法力双数值（当前/最大值）以及四系抗性（Fire / Cold / Light / Pois 75%）的 baseline 坐标存在 3~12px 不等的错落不齐。 --- ## 根因定位（Forensic Analysis）在 `src/ui/character-sheet.ts` 中： 1. **坐标全量硬编码未对应底图真实像素**：文本坐标（如 `ox + 90`, `ox + 236`, `ox + 42`, `ox + 135`, `ox + 285` 等）为前期估算值，未测量 `char-sheet.png` 中各区域黑色内凹框（Pure Black Box Bounding Rects）的精确几何矩形。 2. **字体渲染基线（Baseline）与行高处理未统筹**： - `src/ui/font.ts` 中 `drawText` 统一采用 `ctx.textBaseline = 'alphabetic'`，即传入的 `y` 坐标为文字的基线位置，而非矩形框的中心或顶部。 - 当在高度仅为 16px 或 18px 的小格中居中文字时，必须严格根据字体的 Cap Height / Ascent 计算出正确的 Baseline 偏移量，否则会导致文字下沉或冲顶。 --- ## 修复要求与严格验收准则（Definition of Done）本 Issue 的修复完成标准具有刚性视觉走查约束： 1. **精确测绘底图全部凹槽网格**： - 测绘 `public/ui/char-sheet.png` 中每一个输入/展示框的 `[left, top, width, height]`。 - 封装标准化的对齐绘制辅助函数（给定框体 Bounds 与对齐方式 `'center' | 'left' | 'right'`，自动计算文本的水平 X 与垂直居中 Baseline Y）。 2. **文字溢出防护与字体微调**： - 针对技能伤害等长字符串（如 `1399-1765`），确保其字号或字距自适应容器宽度，杜绝触碰或越过右侧金框。 3. **强制 E2E 真实浏览器截图走查验证（核心硬性指标）**： - **必须使用 Playwright / Puppeteer 运行自动化 E2E 流程，启动真实浏览器并加载游戏**。 - 打开人物属性面板，截取高分辨率 UI 原图（输出到 `tests/screenshots/` 或 artifacts 目录）。 - 对截图中的每一个文字框进行像素级对齐确认，**只有在 E2E 浏览器截图中确认所有文字、数值均完美嵌合在线框几何中心后，才允许确认修复与合并**！

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#384