UI 元素需要等比例缩放（1:1 纵横比），修复宽屏下红蓝球被横向拉成椭圆形 #136

New Issue

troytt · 2026-09-21T02:00:12Z

troytt commented

2026-09-21 02:00:12 +00:00

问题描述

参考截图：https://screenshot-v2.corp.google.com/0surpevfmm1i0 、https://screenshot-v2.corp.google.com/12hbrk7d7cgj0
在 16:9 等宽屏显示器上，HUD 红球、蓝球、技能图标、面板及悬浮框因为非等比拉伸（横向放大比例大于纵向）变成了椭圆形。

根因分析

src/ui/hud-manager.ts 第 586 行使用了非等比缩放：

ctx.scale(targetW / 800, targetH / 600)

在 1920×1080 视口下，scaleX = 2.4 而 scaleY = 1.8（横向被多拉伸了 33.3%），导致原本 80×80 的正圆生命/法力球被拉伸为 192×144 的横向椭圆。

解决方案

改为严格的等比例缩放（Uniform Aspect Ratio 1:1）：计算统一缩放因子 uiScale = Math.min(cssW / 800, cssH / 600)。
底部控制栏与面板在水平方向居中对齐（offsetX = (cssW - 800 * uiScale) / 2，offsetY = cssH - 600 * uiScale），同步更新鼠标命中转换 clientToLogical(clientX, clientY)，确保红蓝球、技能框、装备格、面板与悬浮框在任意分辨率下严格保持 1:1 原版正圆与正方形比例。

### 问题描述参考截图：https://screenshot-v2.corp.google.com/0surpevfmm1i0 、https://screenshot-v2.corp.google.com/12hbrk7d7cgj0 在 16:9 等宽屏显示器上，HUD 红球、蓝球、技能图标、面板及悬浮框因为非等比拉伸（横向放大比例大于纵向）变成了椭圆形。 ### 根因分析 `src/ui/hud-manager.ts` 第 586 行使用了非等比缩放： ```ts ctx.scale(targetW / 800, targetH / 600) ``` 在 1920×1080 视口下，`scaleX = 2.4` 而 `scaleY = 1.8`（横向被多拉伸了 33.3%），导致原本 80×80 的正圆生命/法力球被拉伸为 192×144 的横向椭圆。 ### 解决方案 1. 改为严格的**等比例缩放（Uniform Aspect Ratio 1:1）**：计算统一缩放因子 `uiScale = Math.min(cssW / 800, cssH / 600)`。 2. 底部控制栏与面板在水平方向居中对齐（`offsetX = (cssW - 800 * uiScale) / 2`，`offsetY = cssH - 600 * uiScale`），同步更新鼠标命中转换 `clientToLogical(clientX, clientY)`，确保红蓝球、技能框、装备格、面板与悬浮框在任意分辨率下严格保持 1:1 原版正圆与正方形比例。

troytt referenced this issue from a commit

2026-09-21 11:10:28 +00:00

feat(ui/controls): 实现完整 UI/HUD 系统、操作快捷键对齐与装备词条染色 (fixes #134, fixes #135, fixes #136, fixes #137, fixes #138, fixes #139, fixes #140)

troytt closed this issue

2026-09-21 11:10:28 +00:00

troytt referenced this issue from a commit

2026-09-21 11:10:28 +00:00

Merge branch 'fix/issue-134-140' into main (fixes #134, fixes #135, fixes #136, fixes #137, fixes #138, fixes #139, fixes #140)

troytt commented

2026-09-21 11:11:00 +00:00

验证通过并已随提交 `14443c6` 修复关单

改动方案：
- 重构 src/ui/hud-manager.ts 中的 computeHudLayout，统一采用 uiScale = Math.min(cssWidth / 800, cssHeight / 600) 计算等比缩放因子，水平居中边距设为 (cssWidth - 800 * uiScale) / 2。
- 所有 HUD Canvas 绘制及 DOM 面板均保持原生 4:3 比例基准（800x600）。
验证结果：
- 在 16:9（1920x1080）、21:9（2560x1080）、32:9 超宽屏及竖屏模式下，红蓝血球长轴与短轴比率严格为 1.000，保持纯正正圆，椭圆畸变彻底消除。

### 验证通过并已随提交 14443c6 修复关单 1. **改动方案**： - 重构 `src/ui/hud-manager.ts` 中的 `computeHudLayout`，统一采用 `uiScale = Math.min(cssWidth / 800, cssHeight / 600)` 计算等比缩放因子，水平居中边距设为 `(cssWidth - 800 * uiScale) / 2`。 - 所有 HUD Canvas 绘制及 DOM 面板均保持原生 4:3 比例基准（800x600）。 2. **验证结果**： - 在 16:9（1920x1080）、21:9（2560x1080）、32:9 超宽屏及竖屏模式下，红蓝血球长轴与短轴比率严格为 1.000，保持纯正正圆，椭圆畸变彻底消除。

troytt referenced this issue

2026-09-22 02:40:18 +00:00

[Skill #136] [BAR] Spear Mastery (1.13c Parity) #290

troytt referenced this issue from a commit

2026-09-22 03:46:49 +00:00

feat(skills): implement 1.13c Spear Mastery [Skill #136] (fixes #290)

troytt referenced this issue

2026-09-22 03:53:29 +00:00

[Skill #136] [BAR] Spear Mastery (1.13c Parity) #290

Sign in to join this conversation.