[解決済み] Javascriptで2Dの回転を計算する方法

質問

私は三角法にあまり詳しくないのですが、2次元で回転させる点が2つしかありません。

                    *nx, ny
               .     -
          .           -
     .  angle          -
*cx,cy.................*x,y

cx, cy = 回転中心
x,y = 現在のx,y
nx, ny = 新しい座標

ある角度で新しい点を計算するには？

解き方は？

function rotate(cx, cy, x, y, angle) {
    var radians = (Math.PI / 180) * angle,
        cos = Math.cos(radians),
        sin = Math.sin(radians),
        nx = (cos * (x - cx)) + (sin * (y - cy)) + cx,
        ny = (cos * (y - cy)) - (sin * (x - cx)) + cy;
    return [nx, ny];
}

最初の2つのパラメータは、中心点（2点目を回転させる原点）のXとYの座標です。次の2つのパラメータは、回転させる点の座標である。最後のパラメータは角度で、単位は度です。

例として、点(2, 1)を点(1, 1)を中心に時計回りに90度回転させます。

rotate(1, 1, 2, 1, 90);
// > [1, 0]

この機能に関する3つの注意点

1. 時計回りの回転の場合、最後のパラメータ angle は正でなければなりません。反時計回りの回転の場合（提供された図のように）、負にする必要があります。

2. 例えば、原点 (0, 0) を中心に (5, 0) を 90 度回転させると (0, -5) になるはずですが、JavaScript の丸め動作は、どちらの座標も期待通りの整数に近い値であっても、まだ float である可能性があることを意味します。例えば

   rotate(0, 0, 5, 0, 90);
   // > [3.061616997868383e-16, -5]
   
   

   このため、生成される配列の両要素はfloatとして期待されるはずです。を使って整数に変換することができます。 Math.round() , Math.ceil() または Math.floor() を使用します。

3. 最後に、この関数は 直交座標系 つまり、Y軸の値は座標平面上でquot;up"に行くほど高くなります。HTML / CSSでは、Y軸は反転しており、Y軸の値は、移動するにつれて高くなります。 ページの下 .