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
Calculating degrees between 2 points with inverse Y axis
提问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.
我不知道为什么他们没有将画布原点放在左下角。

