javascript - 回転後の長方形の新しい座標を見つける方法

Question

キャンバス上で回転した後の長方形のY座標。画像に示すように、長方形はその中心点軸を中心に回転します。回転とキャンバスが復元された後、2番目の画像に示すような新しいX、Y座標を見つけたいと思います。回転点が50,50になる前、回転後は62,40になる可能性があります。

同様の質問を見つけたので、そこから画像を取得しましたが、その質問は一部のWPFに関するものであり、私の要件はJSです。回転後の長方形のすべての角の座標を見つける方法は？

Answer 1

この目的のために、単純なJavaScript変換クラスを作成しました。

それを使用して、あなたはあなたの作成の変換によって任意のポイントを変換することができます。

キャンバスを変換するTransformときは、同じ方法でオブジェクトを変換してから、呼び出しtransformPoint(x, y)て適切な座標を取得します。

したがって、あなたの場合、呼び出しは、などtransformPoint(50, 50)について返されます。[62, 40]

https://github.com/simonsarris/Canvas-tutorials/blob/master/transform.js

次に例を示します：http：//jsfiddle.net/b2fEX/