キャンバスの角変位

Question

私は、0,0（左上）を原点とする正方形（100px x 100px）を持っています。 マウスを動かすと、10ピクセルxとyと言うことができます。変位に応じて原点を移動し、原点は10,10、単純になります。正常に動作します！

私は四角形を回転させると回転機能がうまく回転しますが、四角形を回転させた後に10度とすると回転に応じて原点が移動するはずです。そして今、私は追加するために適用する必要がある式が分かりません！

私はウィキペディアだが、私はそれが複雑すぎると思う。

http://en.wikipedia.org/wiki/Angular_displacement

と

http://en.wikipedia.org/wiki/Cosine#Sine.2C_cosine.2C_and_tangent

例：左に90°回転した後、原点位置は次のようになる：私は右にマウスを移動すると、今、左下、画像がアップ！

Answer 1

数字があり、それを角度alphaで回転させ、図の点(cx, cy)が変換後に点(sx, sy)になるように変換するとします。

変換はあなただけで上記の式に(cx, cy)と(sx, sy)についてのあなたの要件を配置する必要があります希望offset_xとoffset_y値を計算する

transformed_x = x*cos(alpha) - y*sin(alpha) + offset_x 
transformed_y = x*sin(alpha) + y*cos(alpha) + offset_y 

です：

sx = cx*cos(alpha) - cy*sin(alpha) + offset_x 
sy = cx*sin(alpha) + cy*cos(alpha) + offset_y 

とこれでオフセット値を簡単に抽出できますその：キャンバスは、あなただけのあなたは、この式following this linkの小さなデモを見ることができます

context.translate(sx - cx*Math.cos(alpha) + cy*Math.sin(alpha), 
        sy - cx*Math.sin(alpha) - cy*Math.cos(alpha)); 
context.rotate(alpha); 

を呼び出す必要があり、それに対する変換設定するには

offset_x = sx - cx*cos(alpha) + cy*sin(alpha) 
offset_y = sy - cx*sin(alpha) - cy*cos(alpha) 

。

Answer 2

私が問題を正しく理解している場合は、マウスの位置に基づいて四角形のポイントにオフセットを適用し、その結果の点を原点について回転します。

の後にマウスオフセットを適用してみてください。