HTML Canvas 缩放问题
最近,我决定深入研究 HTML5 和画布的世界,但我遇到了一个不知道如何解决的问题。
我正在使用 this 中提到的缩放技术问题,因为我需要能够放大到特定点。
但是,我遇到的问题是当您放大某个区域,然后执行较大的鼠标移动,然后缩小时。整个视点和对象变得倾斜。 (之前占据整个画布的对象现在部分可见或有时根本不可见。)
我假设放大到一个点功能在缩小时使用鼠标位置,这导致了这些问题。
这是一个演示来了解该问题: (再次重现,只需放大,将鼠标移动合理的距离并缩小)
Recently, I decided to delve into the world of HTML5 and the canvas and I have run into an issue that I cannot figure out how to solve.
I am using the zoom technique that was mentioned in this question, as I need to be able to zoom into a specific point.
However, the issue I have encountered is when you zoom into an area, and then perform a large mouse movement, and then zoom out. The entire viewpoint and objects become skewed. (Objects that were previously occupying the entire canvas, are now partially or sometimes not visible at all.)
I am assuming that the zoom in towards a point function is using the mouse position upon zooming out, which is causing these issues.
Here is a demo to get an idea of the issue: (again to reproduce, just zoom in move the mouse a reasonable distance and zoom out)
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
这是按设计工作的。当您根据鼠标位置应用上下文翻译时,它将以该位置为中心进行缩放。
为了实现固定的缩小行为,我认为您需要仅在放大时设置 mouseX 和 mouseY,然后使用最后一个 mouseX/mouseY (或可能是画布的中心,或中间的某个点)进行缩小。
更新了 JSFiddle
This is working as designed. When you apply your context translation based on the mouse position it will zoom centered on that position.
To achieve the fixed zoom out behavior I think you want you need to set the mouseX and mouseY only on zoom in and then use the last mouseX/mouseY (or possibly the center of the canvas, or some point in between) for zoom out.
Updated JSFiddle