HTML5 Canvas：在缩放和翻译后计算鼠标位置

Question

我尝试开发矢量绘图的交互式查看器，并希望具有缩放功能。 缩放功能非常好，但现在我有问题来计算拾取对象的鼠标位置。 该事件返回屏幕坐标。 画布没有以反向方式使用变换矩阵的方法。 有没有人有这个问题的解决方案？

Answer 1

我做了一个非常小的简单类来跟踪转换矩阵。

我添加了一个invert（）函数，原因是这样的。 我也做了一个invertPoint（）函数，但没有把它放在最终版本中。 然而，推断它并不难，只需将点反转并转换为点。

我经常只使用这个类来计算适当的变换，然后使用setTransform ，具体取决于应用程序。

我希望我能给你一个更具体的解决方案，但没有你想要的代码样本那么难做。

这是转换类代码。 这是一篇博文，附有一些解释。

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();
};