Compose Multiplatform Web 版本在 Windows 多显示器不同缩放比例下的指针输入问题解析

问题背景

Compose Multiplatform 是一个跨平台的 UI 框架，它允许开发者使用 Kotlin 编写可在多个平台上运行的应用程序。其中 Web 平台通过 Kotlin/Wasm 技术实现，使用基于 Canvas 的 API 进行渲染。

在 Windows 环境下，当浏览器窗口从一个显示器移动到另一个具有不同缩放比例的显示器时，Compose Multiplatform Web 版本会出现指针输入位置不准确的问题。具体表现为鼠标点击位置与界面元素的实际响应位置不一致。

技术原因分析

这个问题主要与 Windows 系统的显示器缩放机制和浏览器的事件处理有关：

1. Windows 显示器缩放机制：Windows 允许为每个显示器设置不同的缩放比例（如 125%、150%等）。当窗口在不同显示器间移动时，系统会动态调整 DPI 感知。

2. 浏览器事件坐标转换：浏览器需要正确处理从系统接收到的指针事件坐标，并将其转换为 Canvas 坐标系。在这个过程中，如果未能充分考虑显示器缩放变化，就会导致坐标转换错误。

3. Compose 的布局计算：Compose 框架基于这些坐标进行命中测试和布局计算。错误的输入坐标会导致框架选择了错误的组件进行交互。

解决方案与修复

这个问题在 Compose Multiplatform 1.6.11 版本中得到了修复。修复可能涉及以下几个方面：

1. 改进的 DPI 感知处理：框架现在能够更好地检测和响应显示器缩放比例的变化。

2. 坐标系统转换优化：改进了从浏览器事件坐标到 Canvas 坐标的转换逻辑，确保在不同缩放环境下都能正确映射。

3. 动态布局调整：当检测到显示器缩放变化时，框架能够及时重新计算布局参数，保持输入坐标与视觉元素的一致性。

开发者建议

对于遇到类似问题的开发者，建议：

1. 确保使用最新版本的 Compose Multiplatform 框架，以获得最佳兼容性和稳定性。

2. 在开发跨平台应用时，特别是在多显示器环境下测试时，注意检查不同缩放比例下的用户体验。

3. 如果必须使用旧版本，可以考虑在检测到显示器变化时手动刷新页面或重新初始化相关组件。

总结

显示器缩放问题在现代多显示器工作环境中很常见，Compose Multiplatform 框架通过持续改进，已经能够很好地处理这类场景。这个问题的修复体现了框架对实际使用场景的深入理解和持续优化，为开发者提供了更加稳定可靠的跨平台开发体验。