javascript 使用反向 Y 轴计算 2 点之间的度数

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3309617/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 00:48:36  来源:igfitidea点击:

Calculating degrees between 2 points with inverse Y axis

javascriptmathtrigonometrydegrees

提问by skerit

I'm creating a simple 2D game in javascript/canvas. I need to figure out the angle of a certain object relative to my position.

我正在用 javascript/canvas 创建一个简单的 2D 游戏。我需要弄清楚某个物体相对于我的位置的角度。

So: say I'm at (10,10) and the object is at (10,5) - that would result in 90 degrees (as positive Y is down, negative Y is up) (10,10) vs (10,15) would be 270 degrees.

所以:假设我在 (10,10) 并且对象在 (10,5) - 这将导致 90 度(因为正 Y 向下,负 Y 向上)(10,10)与(10, 15) 将是 270 度。

How would I go about this?

我该怎么办?

回答by kennytm

Suppose you're at (a, b) and the object is at (c, d). Then the relative position of the object to you is (x, y) = (c - a, d - b).

假设你在 (a, b) 处,对象在 (c, d) 处。那么物体与你的相对位置是 (x, y) = (c - a, d - b)。

Then you could use the Math.atan2()functionto get the angle in radians.

然后您可以使用该Math.atan2()函数来获取以弧度为单位的角度。

var theta = Math.atan2(-y, x);

note that the result is in the range [-π, π]. If you need nonnegative numbers, you have to add

请注意,结果在 [-π, π] 范围内。如果您需要非负数,则必须添加

if (theta < 0)
   theta += 2 * Math.PI;

and convert radians to degrees, multiply by 180 / Math.PI.

并将弧度转换为度数,乘以180 / Math.PI

回答by Tim Goodman

If your coordinates are (xMe, yMe) and their coordinates are (xThem, yThem), then you can use the formula:

如果您的坐标是 (xMe, yMe) 并且它们的坐标是 (xThem, yThem),那么您可以使用以下公式:

arctan((yMe-yThem)/(xThem-xMe))

arctan((yMe-yThem)/(xThem-xMe))

Normally it'd be arctan((yThem-yMe)/(xThem-xMe)), but in this case the sign of the y-axis is reversed.

通常是arctan((yThem-yMe)/(xThem-xMe)),但在这种情况下,y 轴的符号相反。

To convert the result from radians to degrees multiply by 180/pi.

要将结果从弧度转换为度数,乘以 180/pi。

So in JavaScript, this would look like: Math.atan((yThem-yMe)/(xThem-xMe))*180/Math.PI

所以在 JavaScript 中,这看起来像: Math.atan((yThem-yMe)/(xThem-xMe))*180/Math.PI

atan gives a value between -pi/2 and pi/2 (that is, between -90 and 90 degrees). But you can look at what quadrant your (xThem - xMe, yMe - yThem) vector is in and adjust accordingly.

atan 给出一个介于 -pi/2 和 pi/2 之间的值(即介于 -90 和 90 度之间)。但是您可以查看您的 (xThem - xMe, yMe - yThem) 向量所在的象限并进行相应调整。

回答by Petah

In layman's terms:

通俗地说:

function pointDirection(x1, y1, x2, y2) {
    return Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
}

回答by Redu

In HTML5 canvas the origin is the top left corner hence the y axis grows from top to bottom. So regardless of wherever you are on the unit circle to calculate the angle of point A to the center(C) you should in fact do like

在 HTML5 画布中,原点是左上角,因此 y 轴从上到下增长。因此,无论您在单位圆上的哪个位置计算 A 点与中心 (C) 的角度,您实际上都应该这样做

angle = Math.atan2(Cy-Ay,Ax-Cx)

angle = Math.atan2(Cy-Ay,Ax-Cx)

and you will get your result in the range of [-π, π].

并且您将得到在 [-π, π] 范围内的结果。

I have no idea why they haven't made the canvas origin the bottom left corner.

我不知道为什么他们没有将画布原点放在左下角。