Question

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

Answer 1

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

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

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

我希望我能为您提供更具体的解决方案，但没有您想要的代码示例，这很难做到。

Here's转换类代码。和here's博客文章有一点解释。

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

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

2 个答案: