在画布中围绕原点旋转一个点

Question

对于我和朋友正在创建的游戏，我们正在制作雷达。我们已经制作了一个基本的雷达，从某种意义上说，一切都显示在正确的位置，但是我们正在尝试为雷达添加旋转。这种旋转是基于本地玩家的角度，从 0 度开始直接面向北方，顺时针旋转 360 度，直到再次向北。

我想知道如何从本地玩家角度旋转画布上的所有点（这些可以是其他玩家、物品等）。我们正在努力做到这一点，每当玩家向前走时，玩家也会在雷达中直接向上移动。无论旋转的程度如何，玩家在直接向前行走时都应该始终“向上”雷达。

我尝试进行基本的轮换，对每个玩家都这样： var baseX = x - localX, baseY = (canvas.height-y) - localY; var localAngle = toRadians(players[0].rotation);

  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

为了有效地旋转事物，您需要从线性代数中理解基的概念。简而言之，这意味着您需要两个单独的向量（基本向量），它们为您定义所有向量（对象）的位置是空间（在您的情况下为 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
                   )

编辑： 如果您不仅要在雷达上旋转点，还要移动它，您需要应用

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 

您可以通过旋转将其组合成单个矩阵。 所以你的向量进入平移矩阵然后进入旋转，不要忘记原点向量。你需要在转换中考虑它。