HTML Canvas Zooming问题

时间:2011-08-17 17:03:05

标签: javascript jquery html5 canvas zooming

最近,我决定深入研究HTML5和画布的世界,我遇到了一个我无法弄清楚如何解决的问题。

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

但是,我遇到的问题是当您放大某个区域,然后执行大鼠标移动,然后缩小。整个视点和对象都会出现偏斜。 (之前占据整个画布的对象现在部分或有时根本不可见。)

我假设朝向点功能的放大是在缩小时使用鼠标位置,这导致了这些问题。

这是一个了解问题的演示: (再次重现,只需放大鼠标移动合理距离并缩小)

Not-Working Demo

1 个答案:

答案 0 :(得分:3)

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

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

Updated JSFiddle