HTML画布缩放问题

HTML Canvas Zooming Issue

本文关键字：缩放问题布缩放 HTML 更新时间：2023-09-26

最近，我决定深入研究HTML5和画布的世界，我遇到了一个问题，我不知道如何解决。

我正在使用这个问题中提到的缩放技术，因为我需要能够缩放到特定的点。

然而，我遇到的问题是当你放大一个区域，然后执行一个大的鼠标移动，然后缩小。整个观点和对象都被扭曲了。 (以前占据整个画布的对象现在部分或有时根本不可见。)

我假设对点函数的放大是在缩小时使用鼠标位置，这导致了这些问题。

下面是一个演示，可以了解这个问题: (再次复制，只是放大，移动鼠标一个合理的距离，然后缩小)

<<p> 不工作演示/strong>

一切正常。当您基于鼠标位置应用上下文翻译时，它将以该位置为中心缩放。

要实现固定的缩小行为，我认为你想要你需要设置mouseX和mouseY只放大，然后使用最后的mouseX/mouseY(或可能是画布的中心，或中间的某个点)缩小。

更新JSFiddle