HTML5 Canvas：回転時のx、y点の計算

Question

私はHTML5 Canvas Appを開発しています。これは、キャンバスに描画するために必要な矢印、矩形、その他の図形の位置を示すxmlファイルを読み込むことです。 XMLレイアウトの

例：オブジェクトを回転させた場合

<arrow left="10" top="20" width="100" height="200" rotation="-40" background-color="red"/> 
<rect left="10" top="20" width="100" height="200" rotation="300" background-color="red"/> 

それは別の点（左回りに回転するとき（回転後のオブジェクトの新しい位置Pと呼ばれる）ポイントの位置を計算することを含みます上）。私はこの点Pを計算するのに使うことができる一般的な関数/公式を考え出していますが、私の数学は少し弱いです&私は使用することを意図したアーク/タンジェント式を特定できません。

私は、両方ともプラスである可能性のある回転の点Pを計算するための計算式を考え出すことができますか？&否定ですか？

上記の例では

：点（14446）が残され、頂点&点（226496）が回転していないときに、オブジェクトの中点である点=（左+幅/ 2 SO 、top + height/2）、青い点は回転したときの中間点です。私はポイント（14,446）&（226,496）の間の線の長さを調整する方法を知っていますが、青の点x、yの位置を計算する方法ではありません - BTW：この線の長さは、青の点& （14,446）

len = sqrt((496-446)^2 + (226-14)^2); 
    = 227.56; 

Answer 1

非常に簡単です。 （x、y）はそう

x' = x * cos(Theta) - y * sin(Theta); 
y' = x * sin(Theta) + y * cos(Theta); 

ように変化している角度シータ座標の座標系の原点を中心とする回転では、必要なものすべては、使用している点の一つに回転点を変換することです。より単純な方法で書くことができます：（x1、y1）=（14,446）と（x2、y2）=（226,496）。 （x1、y1）を中心に「回転」（x2、y2）しようとしています。原点を（x1、y1）とする新しい座標系で（dx2、dy2）を計算する。

(dx2,dy2) = (x2-x1,y2-y1); 

ここで（正の角度は反時計回りである）に回転：

dx2' = dx2 * cos(165 Degrees) - dy2 * sin(165 Degrees); 
dy2' = dx2 * sin(165 Degrees) + dy2 * cos(165 Degrees); 

最後のステップは、元の（X1、Y1）に原点から点の座標を変換することである（0,0 ）;

x2' = dx2' + x1; 
y2' = dy2' + y1; 

PS：:)もこれを読んでhttp://en.wikipedia.org/wiki/Rotation_matrixと異なるプログラミング言語の中で最も三角関数はラジアンで主に扱っていることを忘れないでください...

PPS：と私はあなた怖がっていなかったことを願って - 頼みますご質問がある場合は、

Answer 2

私はあなたのケースでは、あなたが以下の式のシステムで、この回転位置を計算することができるはずだと思う：

x = R * Math.cos(angle - angle0); 
y = R * Math.sin(angle - angle0); 
angle = deg * Math.PI/180; 
angle0 = Math.atan(y0/x0); 

Rヨール半径ベクトル（あなたの例ではlen）の長さを。
deg角度を回転している角度です。g 120 °
xおよびyあなたが探している最終的な位置の座標。
angleは、実際の回転角度です（radで、gradsではありません）。
angle0は、初期角度ポイントをX軸に相対的に回転させたものです。 Math.atanを使用して事前に計算する必要があります。

テストされていません。それで試してみてください。しかし、その考え方は同じです。つまり、三角関数を使用します。

Answer 3

座標計算の例：（x、y）はIまたはIII象限にあるときDice roll