AGC-项目-资源管理卡片内缩略图文字图标, 在画布上经过缩放(放大)不清晰 #279

New Issue

2026-09-04T11:33:11+08:00

k88936 commented

2026-09-04 11:33:11 +08:00

对比excalidraw:

这个组件是共用的, 主站(如果也有文字的话, 类似这个需求) 也会有这个问题

当前实现

整个 .game-resource-page-world 使用：

transform: translate(...) scale(${resourceCanvasScale})

这会把整个世界先合成一层，再整体放大。浏览器对这层使用普通平滑插值，所以图片、文字甚至某些图标都会变糊。这个 scale() 没有“改成 nearest-neighbor”的开关。

![image.png](/attachments/8ada903e-6bd5-49ee-abaf-9dded8cd132f) ![image.png](/attachments/9098c281-a3b4-4ebc-9e88-b5dc9b7ee065) 对比excalidraw: ![image.png](/attachments/ac9a6047-c547-4cc0-bc34-b38e014dfae9) 这个组件是共用的, 主站(如果也有文字的话, [类似这个需求](https://kcnz41bksl1c.feishu.cn/record/SFmoruTxseTMtLc5ugqcbPYTnZe)) 也会有这个问题当前实现 > 整个 .game-resource-page-world 使用： > > transform: `translate(...) scale(${resourceCanvasScale})` > > 这会把整个世界先合成一层，再整体放大。浏览器对这层使用普通平滑插值，所以图片、文字甚至某些图标都会变糊。这个 scale() 没有“改成 nearest-neighbor”的开关。

image.png

182 KiB

image.png

316 KiB

image.png

149 KiB

k88936 commented

2026-09-04 11:38:56 +08:00

主站画布元素左上角右上文字标签实现:

“反向缩放 UI chrome”：

  1. 计算当前画布缩放的倒数：

  function getInverseViewportScale(viewport: CanvasViewport) {
    return 1 / viewport.scale;
  }

  见 /mnt/ssd1/Genarrative/src/components/image-editor/ImageCanvasWorldView.tsx:180。

  2. 把倒数缩放放进 CSS 变量：

  '--image-canvas-editor-inverse-scale': String(inverseScale)

  见 /mnt/ssd1/Genarrative/src/components/image-editor/ImageCanvasWorldView.tsx:187。

  3. 对标签、信息按钮、尺寸 badge、占位图标等元素应用：

  transform: scale(var(--image-canvas-editor-inverse-scale, 1));

主站画布元素左上角右上文字标签实现: ``` “反向缩放 UI chrome”： 1. 计算当前画布缩放的倒数： function getInverseViewportScale(viewport: CanvasViewport) { return 1 / viewport.scale; } 见 /mnt/ssd1/Genarrative/src/components/image-editor/ImageCanvasWorldView.tsx:180。 2. 把倒数缩放放进 CSS 变量： '--image-canvas-editor-inverse-scale': String(inverseScale) 见 /mnt/ssd1/Genarrative/src/components/image-editor/ImageCanvasWorldView.tsx:187。 3. 对标签、信息按钮、尺寸 badge、占位图标等元素应用： transform: scale(var(--image-canvas-editor-inverse-scale, 1)); ```

k88936 commented

2026-09-04 11:44:26 +08:00

excalidraw全自绘canva, 和我们在底层有很大不同:

文字先绘制到缓存画布，缓存分辨率同时考虑设备像素比和缩放比例：放大时提高，缩小时降低。缩放过程中暂时复用旧缓存以减少重绘，可能短暂模糊；停止后再生成新缓存。稳定状态下，水平或直角旋转的文字关闭平滑以增强锐度，任意角度旋转则保留平滑以减少锯齿。

excalidraw全自绘canva, 和我们在底层有很大不同: ``` 文字先绘制到缓存画布，缓存分辨率同时考虑设备像素比和缩放比例：放大时提高，缩小时降低。缩放过程中暂时复用旧缓存以减少重绘，可能短暂模糊；停止后再生成新缓存。稳定状态下，水平或直角旋转的文字关闭平滑以增强锐度，任意角度旋转则保留平滑以减少锯齿。 ```

k88936 added this to the 陶泥儿gameAgent project 2026-09-04 11:48:56 +08:00

k88936 commented

2026-09-04 18:07:44 +08:00

发现在 #208 里限制缩放到1.5了, 但是看起来还是模糊

k88936 commented

2026-09-04 19:11:10 +08:00

试验发现可以把元素们整体放大, 再scale缩小到正常大小,

试验发现可以把元素们整体放大, 再scale缩小到正常大小, ![shotmd-1788520159.jpg](/attachments/dd3359be-6f5b-4016-a68d-21856db895b7)

shotmd-1788520159.jpg

55 KiB

k88936 changed title from ~~AGC-项目-资源管理代码文档版本等带文字的, 在画布上经过缩放字体发虚~~ to AGC-项目-资源管理卡片内缩略图文字图标, 在画布上经过缩放(放大)不清晰

2026-09-04 19:33:23 +08:00

k88936 referenced a pull request that will close this issue

2026-09-05 11:24:56 +08:00

Fix/修复无限画布图标文字模糊 #285

kdletters added the Kind/Enhancement label 2026-09-07 15:25:24 +08:00

kdletters commented

2026-09-07 17:44:59 +08:00

This was generated by AI during triage.

关联 PR #285 已覆盖超采样绘制方向，但当前只能算部分解决。真实 Chromium 验证在资源画布缩放时发现播放按钮越过卡片边界并被裁切：scale 0.5 越界约 3.5px，scale 0.25 越界约 10.25px，底部被裁切区域不能点击；现有 jsdom 测试没有覆盖这类布局和命中问题。

请把卡片内部控件的缩放原点、边界和 pointer hit-test 一并修正，并在至少 0.25、0.5、1、1.5 四个比例下做截图与点击验证。#285 当前仍请求修改且 CI 排队，完成这些验证前不要勾选本 Issue 为已完成。

> *This was generated by AI during triage.* 关联 PR #285 已覆盖超采样绘制方向，但当前只能算部分解决。真实 Chromium 验证在资源画布缩放时发现播放按钮越过卡片边界并被裁切：scale 0.5 越界约 3.5px，scale 0.25 越界约 10.25px，底部被裁切区域不能点击；现有 jsdom 测试没有覆盖这类布局和命中问题。请把卡片内部控件的缩放原点、边界和 pointer hit-test 一并修正，并在至少 0.25、0.5、1、1.5 四个比例下做截图与点击验证。#285 当前仍请求修改且 CI 排队，完成这些验证前不要勾选本 Issue 为已完成。

k88936 closed this issue

2026-09-09 16:32:43 +08:00

k88936 referenced this issue from a commit

2026-09-09 16:32:44 +08:00

Fix/修复无限画布图标文字模糊 (#285)

Sign in to join this conversation.