如何在畫布旋轉後檢測畫布上的點

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/