Question

我正在尝试根据球要到达的位置来计算球上箭头的角度。箭头移动了，但是在完全无法解释的方向上，有人可以给一些指针吗？

可使用Codepen：Codepen

我在此处添加了完整代码（根据输入进行编辑）：我添加了一个步骤来使角度计算的差值更大，不确定这是否是正确的方法，但似乎更实用。加上在角度方法中添加了+/- 90，但这似乎无法解决。仍然感觉很奇怪。

try {
  // library under the hood will handle server validation errors. 
  // but you can do come custom staff in the catch section too. 
  await this.form.post("/api/segment");
  // success validation pass 
} catch (e) {
// TODO optinal Show notification "Validation error"
}

我在比较两个不同的值时犯了一个错误，我修复了它，它的工作方式更好，有时仍然有些奇怪的行为，似乎它不知道该去哪里。但是工作比以前更好。

Answer 1

也许您的角度功能有一些错误。这对我有用：

angle(cx, cy, ex, ey) {
    var dy = ey - cy ;
    var dx = cx - ex ;
    return Math.atan2(dx, dy) * 180 / Math.PI;
}

Answer 2

致电this.angle()时，您会给它两次this.throwObject.offset...，一次是直接给一次，一次是通过px和py一次：

let px = this.throwObject.offsetLeft;
let py = this.throwObject.offsetTop;

this.rotation = this.angle(this.throwObject.offsetLeft, this.throwObject.offsetTop, px, py)

这将导致{{1}中的dx和dy在0中成为angle()，使得Math.atan2()的结果不可预测。

我不确定您的其余代码，但也许您打算像这样调用angle()：

this.rotation = this.angle(this.x, this.y, px, py);

Answer 3

我可以看到几个小问题。

首先，角度方法正在计算-180至180范围内的弧度，并且您希望将其设置为0至360。因此，在计算角度之后，您将需要进行如下转换：

angle(ex, ey, cx, cy) {
    var dy = ey - cy;
    var dx = ex - cx;
    var theta = Math.atan2(dy, dx) * 180 / Math.PI;
    if (theta < 0) theta += 360; // convert to [0, 360]
    return theta;
}

第二，由于js坐标的工作原理，元素在0度的起始角度不是通过此方法计算的实际0度。快速解决方案是添加90度以使其匹配：

set rotation(input) {
    this.throwObject.style.transform = `rotate(${input + 90}deg)`;
}

在进行这些转换后，它仍然有些混乱，但是我认为这是正确计算的开始。我的猜测是问题的一部分在于要进行如此接近的计算。

Answer 4

之所以会这样，是因为Math.atan2()和CSS旋转变换之间的角度测量方式有所不同。

对于我们人类来说，很自然地，模拟时钟上12点钟的位置是指角度0，与CSS旋转相同。

Math.atan2（）从水平x轴开始测量角度。因此，根据您输入的坐标，它应该是3点或9点钟的位置。

但是有一个简单的解决方法。计算角度后

Math.atan2(dy, dx) * 180 / Math.PI

只需减去90度即可

Math.atan2(dy, dx) * 180 / Math.PI - 90

Answer 5

当intervalCounter变为0时会发生什么？上一个点移动到事件点，因此dy，dx变为0，并且您有一个抖动：-180 + 90，+180 + 90，0 + 90 {{3} }。此后，上一个固定点将固定到intervalCounter < 30，并且上一个和事件点之间的距离会逐渐增加，因此该角度接近预期的角度。

无论如何，这是一个错误的坐标过滤器。您可以通过实现简单的as defined in Math.atan2或使用固定大小（在您的情况下为30）exponential filtering作为事件点来改进它。

根据x，y位置计算角度

5 个答案: