キャンバスの回転後のキャンバス上のポイントを検出する方法

Question

私はキャンバスに矩形を描画するhtml5キャンバスアプリケーションに取り組んでいます。

1. キャンバス
2. キャンバス矩形を描画する位置
3. 使用fillRect関数を中央にtarnslateでは、親の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.

この式を用いて、回転平面上の位置を取得するために、回転角度の負の値によってポイントを回し：aは

回転値の負で

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

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

あなたのポイントは回転していない平面上にありますので、残りのロジックはちょうど同じようです。angle = 0

ここで

あなたのためのデモフィドルです：

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

：

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

そしてここでは、翻訳とバージョンです