HTML 画布缩放问题答案

【问题标题】：HTML Canvas Zooming IssueHTML 画布缩放问题
【发布时间】：2011-08-17 17:03:05
【问题描述】：

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

我正在使用 this question 中提到的缩放技术，因为我需要能够放大到特定点。

但是，我遇到的问题是当您放大一个区域，然后执行较大的鼠标移动，然后缩小。整个视点和对象变得倾斜。 （以前占据整个画布的对象现在部分或有时根本不可见。）

我假设放大到一个点功能是在缩小时使用鼠标位置，这会导致这些问题。

这里有一个演示来了解这个问题： （再次重现，只需放大移动鼠标适当的距离并缩小）

【问题讨论】：

【解决方案1】：

这是按设计工作的。当您根据鼠标位置应用上下文翻译时，它将以该位置为中心进行缩放。

为了实现固定的缩小行为，我认为您需要仅在放大时设置 mouseX 和 mouseY，然后使用最后一个 mouseX/mouseY（或可能是画布的中心，或介于两者之间的某个点）缩小。

【讨论】：

感谢 RSG - 我用更复杂的东西更新了演示，更适合实际情况。如果您有任何建议，同样的问题仍然存在。 :)
您需要将 mousex/mousey 的声明移到函数之外 - 它仍在缩小时更新它。这并不能完全解决平移定位的逻辑——我认为偏移量需要是当前平移和缩放级别的函数，以确保它始终出现在边界内。午饭的时候我会多弄点。非常适合天际线的日常活动。
在第二次缩放后它似乎中断了 - 这几乎就像你必须将以前的点存储在一个数组中，然后通过放大/缩小来推动和弹出。
我想过，如果你一直放大，部分缩小，在一个新点上放大，然后一直放大，它会变得很奇怪。当它到达数组中用户改变方向的点时，它会跳转。
确实如此 - 这是一个有点奇怪的问题。我几乎希望我可以让那些建筑物总是画在同一个区域，因为我也在尝试添加一个“平移”功能，这不应该使事情复杂化（我希望）stackoverflow.com/questions/7096921/…