Javascript - 如何让对象直接停留在另一个对象前面？

Question

我正在尝试编写一个嘴部分，它将直接位于位图的前面，但需要是一个单独的对象。

目前我的代码如下所示：

   // LOCATION:
   var xDistance = stage.getStage().mouseX - player.x;
   var yDistance = stage.getStage().mouseY - player.y;
   var distance = Math.sqrt(xDistance * xDistance + yDistance * yDistance);
   var x = player.x += xDistance * easingAmount;
   var y = player.y += yDistance * easingAmount;

   if (distance > 1) {
     player.x += xDistance * easingAmount;
     player.y += yDistance * easingAmount;
   }

   // ROTATION:
   var degrees = (Math.atan2(yDistance, xDistance) * 180 / Math.PI) - 90;
   if(degrees >= 360) {
     degrees -= 360;
   }

   player.rotation = degrees;
   stage.update();

显然使用以下代码会将嘴巴的 x 和 y 值 -50 放在玩家的方向上，但这仅适用于 1 个方向，而不是将嘴巴保持在玩家面前：

   mouth.x = player.x - 50;
   mouth.y = player.y - 50;

我想知道是否有人可以帮助我解决这个数学问题？我真的很感激。这里有 2 张图片可以更好地说明问题：

Answer 1

@Ness 的解决方案应该可以正常工作。但是，如果您想避免外部依赖项，则可以使用以下方法。定义嘴向量：

mouth.x = 50;
mouth.y = 0; // The mouth is the distance 50 away from the player.
             // Assuming that a non-rotated player points in the x-
             // direction
rotateVector(mouth, player.rotation);

您可以将rotateVector 定义为（参见wikipedia）

function rotateVector(var vec, var degrees) {
    var output; // of vector type
    output.x = cos(degrees)*vec.x - sin(degrees)*vec.y;
    output.y = sin(degrees)*vec.x + cos(degrees)*vec.y;
    return output;
}

嘴巴的世界空间位置现在是

mouthWorldSpace = player.position + mouth.position; // (i.e. just add the vectors together)

这是嘴巴位图应该绘制的位置。

Answer 2

我认为对您来说最好的解决方案是首先获得一个经过可靠测试的矢量库来为您完成所有这些计算。比如你可以试试这个http://victorjs.org/，看起来不错（不过我自己没试过）。

一旦有了向量，算法就很简单了：

1. 以角度或弧度的形式获取玩家的方向。
2. 从那个角度创建一个向量。
3. 将该向量乘以所需的距离。
4. 嘴巴或其他部分的位置是玩家的位置+向量。

使用 victorjs 会是这样的（未测试）：

// who the hell calls his "Vector" class "Victor"? alias it.
var Vector = Victor;

// create the vector from player angle (assume player_angle is defined somewhere)
var v = new Vector(1, 0);
v = v.rotateDeg(player_angle);

// multiply by desired distance, assume its 20 pixels
v = v.multiply(new Vector(20, 20));

// now calc mouth position (assume player_pos is defined before)
var mouth_pos = player_pos.add(mouth_pos);