HTML5画布：缩放和翻译后计算鼠标位置

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