6

可変原点を中心に 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 が左上のポイントなど)

残念ながら、数学は私の得意分野ではありません。うまくいけば、誰かが助けてくれるでしょう。

4

3 に答える 3

5

この問題を解決するには、あなたが行った方法よりもさらに洗練された方法がありますが、それを理解するには、行列の乗算の方法を知る必要があります。

キャンバスの変換行列context.currentTransformを取得するために使用できます。このマトリックスは、現在コンテキスト状態に適用されているすべてのスケール、変換、および回転修飾子から生じるすべての座標変更を表します。これがマトリックスのドキュメントです

内部座標を画面座標に変換するには、次の式を使用します。

screen_X = internal_X * a + internal_Y * c + e;    
screen_Y = internal_X * b + internal_Y * d + f;
于 2013-01-25T12:40:16.137 に答える
4

恥ずかしいことに、質問をした直後にこの問題を解決しました。

他の誰かが同じ種類の機能を必要とする場合に備えて、私がそれを行った方法は次のとおりです。

getTransformedCoords : function(coords){
    var self = this;
    var obj = self.activeObj;
    var angle = (obj.angle*-1) * Math.PI / 180;   
    var x2 = coords.x - obj.left;
    var y2 = coords.y - obj.top;
    var cos = Math.cos(angle);
    var sin = Math.sin(angle);

    var newx = x2*cos - y2*sin + obj.left; 
    var newy = x2*sin + y2*cos + obj.top;

    return {
        x : newx,
        y : newy
    };
},
于 2013-01-25T11:57:52.203 に答える