キャンバスに原点を中心に回転する

Question

友人と私が作成しているゲームでは、レーダーを作っています。私たちはすでに基本レーダーを作っていますが、すべてが適切な位置に表示されているという意味で、レーダーにローテーションを追加しようとしています。この回転は、0度から始まる北向きのローカルプレーヤーの角度に基づいており、360度時計回りに北に戻っています。

私はキャンバス上のすべてのポイント（これらは他のプレーヤー、アイテムなど）をローカルプレーヤーの角度からどのように回転させるのだろうかと思っていました。私たちは、プレーヤーが前進するたびに、レーダーで直接上に移動するようにしています。回転の度合いが何であっても、プレーヤーは常に前方に歩いている間に常にレーダーを「上らせる」べきです。

このように各プレーヤーに基本的なローテーションを試しました。 var baseX = x - localX、baseY =（canvas.height-y） - localY; var localAngle = toRadians（プレイヤー[0]。回転）;

var newX = baseX * Math.cos(localAngle) - baseY * Math.sin(localAngle); 
    var newY = baseX * Math.sin(localAngle) + baseY * Math.cos(localAngle); 

    newX += localX; 
    newY += localY; 

私が常にレーダーを「上って」いないということは、私が探していた場所に依存しているということです。ありがとうございました。

Answer 1

物を効率的に回転させるためには、線形代数から基礎の概念を理解する必要があります。要するに、すべてのベクトル（オブジェクト）の場所を定義する2つの別々のベクトル（基底ベクトル）が空間（あなたの場合は2D）であることを意味します。したがって、シーン内のオブジェクトを回転させたい場合は、それらのすべてに回転変換を適用する必要があります。これは、次のようになります。 （右に回転）

Math.cos -Math.sin 0 
Math.sin Math.cos 0 
0   0  1 

（左に回転）

Math.cos Math.sin 0 
-Math.sin Math.cos 0 
0   0  1 

だから、このように書きます：あなたがしたい場合 ：

let multiplyMatrixVector = (A, v) => { 
    let C=[]; 
    C[0] = (A[0]*v.x)+(A[1]*v.y)+(A[2]*v.z); 
    C[1] = (A[3]*v.x)+(A[4]*v.y)+(A[5]*v.z); 
    C[2] = (A[6]*v.x)+(A[7]*v.y)+(A[8]*v.z); 
    return {x:C[0], y:C[1], z:C[2]}; 
}; 


let locations = [{x:34,y:7,z:0}]; 
let newLocations = map(
        (location) => { 
         return multiplyMatrixVector(matrix,location) 
        }, 
        locations 
        ) 

はEDITレーダー上の点を回転させるだけでなく、それを動かす必要があります。

translation to your point object in matrix form: 
x+a  1 0 a  x 
y+b <- 0 1 b <- y 
1  0 0 1  z 

1つの行列に回転して合成することができます。 あなたはベクトルを翻訳行列に入れて回転に移りますが、原点ベクトルについても忘れないでください。あなたはそれを変換の中で説明する必要があります。