如何在画布旋转后检测画布上的点

Question

我正在处理HTML5画布应用程序，在该应用程序中我在画布上绘制矩形。

1. Canvas是tarnslate到中心位置
2. 使用fillRect函数绘制矩形
3. 画布是绝对位置相对于其父股利。它在画布处于原始位置时正常工作，但当我旋转画布90/180/270度时，我无法关联画面上点击的点并指向在画布上绘制。例如：当画布处于原始位置时，我可以点击屏幕上的点，然后将该点转移到画布点以根据我的翻译位置绘制矩形。但是当我将画布旋转90/180/270度时，我无法将该画面点转换为画布点。所以形状被绘制在奇数/不同的位置，然后由用户实际点击。

我的问题：

当画布旋转，怎么就是点击屏幕上的帆布画点按它的旋转

任何帮助表示赞赏点翻译。先谢谢了。

Answer 1

我做了一个微小的变换类这个目的：

https://github.com/simonsarris/Canvas-tutorials/blob/master/transform.js

然后，您可以使用它像这样：

var t = new Transform(); 
console.log(t.transformPoint(5,6)); // will be just [5,6] 
// apply the same transformations that you did to the canvas 
t.rotate(1); 
console.log(t.transformPoint(5,6)); // will be [-2.347, 7.449] 

小提琴：

http://jsfiddle.net/DRf9P/

Answer 2

I am affraid that we will have to use math.

旋转通过旋转角度的负值的点使用该方程以获得关于旋转平面内的位置：

nX = x * cos(a) - y * sin(a)

nY = x * sin(a) + y * cos(a)

其中a是负旋转值的

你的观点现在是正常的不旋转飞机，所以其余的逻辑就像当时angle = 0

这是给你演示小提琴：

http://jsfiddle.net/Q6dpP/5/

这里是翻译版本：

http://jsfiddle.net/Q6dpP/6/