javascript - Angular 移动不精确

Question

当我沿某个 Angular 移动对象时，它不会精确地沿该 Angular 移动。我的鼠标不会出现在屏幕截图中，因此我的鼠标大约位于绿点上。

我正在使用 p5.js 库。

这是重要的代码:

this.pos.x += cos(this.r) * this.speed;
this.pos.y += sin(this.r) * this.speed;
this.r = Math.atan2(mouseY - getPos(player.x, player.y).y, mouseX - getPos(player.x, player.y).x);

这是 getPos 函数:

function getPos(x, y) {
  return createVector(x / 256 * width, y / 256 * height);
}

Answer 1

如果你想沿着鼠标的方向移动物体，不要重复不安全的 Angular 确定，只需归一化差异向量即可

dx = mouseX - this.pos.x;
dy = mouseY - this.pos.y;
ds = Math.hypot(dx,dy);
this.pos.x += dx/ds * this.speed;
this.pos.y += dy/ds * this.speed;

您可能需要考虑使用哪种几何体，屏幕几何体还是模型的几何体。由于缩放不是各向同性的，宽度和高度可能不同，这些几何形状中的 Angular 也会不同。另外，您不应该计算屏幕和模型变量的差异，似乎 player 对象的坐标是模型几何图形，而 mouseX, mouseY 是屏幕几何图形。在我看来，您计算屏幕几何图形中的更新，但将其添加到模型几何坐标中。

最好在模型几何中进行所有计算，并仅在绘制场景并在鼠标事件处理程序中进行对话时转换为屏幕几何。