HTML5画布：在缩放和平移后计算鼠标位置

Question

我试图开发一个交互式矢量图形查看器，并希望具有缩放功能。缩放功能已经很好地实现了，但现在我遇到了计算鼠标位置以选择对象的问题。事件返回屏幕坐标。画布没有一种方法来逆转换矩阵。有人有解决这个问题的方法吗？

- strangeoptics

Answer 1

我为跟踪变换矩阵制作了一个非常小而简单的类。

由于某些原因，我添加了一个invert（）函数。我还制作了一个invertPoint（）函数，但没有将其放在最终版本中。不过很容易推导出来，只需将点一起反转和变换即可。

经常使用这个类计算适当的变换，然后根据应用程序使用 setTransform 。

我希望能给你一个更具体的解决方案，但如果没有所需的代码样本，这将很难做到。

这里是变换类代码。 这里是博客文章，其中有一点解释。

- Simon Sarris

---

嗨，西蒙，感谢您的快速回复。解决方案很完美。我将尝试在今天将您的清洁类合并到我的项目中。<br>很遗憾，Canvas没有像这样的要求的适当方法。我所知道的Android和其他所有图形平台都有它。 - strangeoptics

你应该添加一个反转函数，它返回一个新的Transform对象/矩阵。否则，在完成屏幕到世界的转换后，我必须再次调用invert。这可能会更有效率。 - strangeoptics

Answer 2

以下是一些有价值的函数，可用于您的库，它们可以保留矩阵状态并构建场景图所需：

Transform.prototype.reset = function() {
  this.m = [1,0,0,1,0,0];
  this.stack = [];
};

Transform.prototype.push = function() {
    this.stack.push(this.m.slice());
};

Transform.prototype.pop = function() {
    this.m = this.stack.pop();
};

- strangeoptics