HTML5 Canvas / CSS缩放

Question

所以我有一个网络应用程序，可以让你绘制矩形和形状之类的东西。它基于第一个坐标是（x1，y1）而第二个是（x2，y2）的想法来绘制它们。在100％缩放的画布上绘图时，一切都按预期工作。但是，当我（通过CSS）缩放到80％时，应用程序将鼠标位置的坐标从（0,0）画布点获取为实际屏幕像素。它使用这些点在缩放的画布上绘制它们，但缩放到比例。这使得所有矩形都以错误的坐标绘制。

这很容易解释，所以这里有一个快速视频，我在画布上绘制一个矩形，缩放到80％。 https://dl.dropboxusercontent.com/u/15582820/problem.swf 你可以看到为什么这不起作用。基本上必须有一个公式，所以它可以采用缩放的坐标，并根据比例（0-100％）将它们乘以一些数字，以获得实际屏幕坐标在该变焦处的内容。

任何帮助非常感谢。我被卡住了。

Answer 1

做到这一点的方法：

zoom = [between 0-100...];
x1 = 100/zoom

听起来很简单，但这就是它。