Question

我正在研究html5 canvas应用程序，其中我在画布上绘制矩形。

Canvas是tarnslate到中心位置
使用fillRect函数绘制矩形
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/

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

2 个答案: