可変原点を中心に html5 キャンバス内のオブジェクトを回転させています。
ユーザーが新しく回転した四角形の特定のポイントをクリックした場合、返されたマウス座標を同じ原点を中心に回転させる必要があります。
うまく説明できるように、非常に簡単な図を作成しました。
実際にクリックされたマウス座標を x および y として取得し、回転する前にそれらをオブジェクトの位置に変換する関数が必要です。
var origin = {
x: 100,
y: 100
};
var angle = 45;
function transformCoordinates(x,y){
//Perform calculation to transform coordinates
return {
x : newx,
y : newy
};
}
使用可能な変数は、回転と角度の変換原点になります。キャンバス上のマウス クリック座標 (キャンバス自体に対して、0,0 が左上のポイントなど)
残念ながら、数学は私の得意分野ではありません。うまくいけば、誰かが助けてくれるでしょう。