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

Posted 2023-03-05

【中文标题】画布旋转后如何检测画布上的点

【英文标题】：how to detect point on canvas after canvas rotation

【发布时间】：2012-03-16 17:05:33

【问题描述】：

我正在开发 html5 画布应用程序，在该应用程序中我在画布上绘制矩形。

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

我的问题：

当画布旋转时，如何将屏幕上点击的点根据其旋转平移到画布绘制点

【参考方案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/

【参考方案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/