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

Question

我在html5画布应用程序上工作,我在画布上绘制矩形.

1. 帆布是中心位置
2. 使用fillRect函数绘制矩形
3. Canvas相对于其父div是绝对位置.当画布处于原始位置时它的工作正常但是当我旋转画布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/