CSS 如何将 x,y 坐标转换为角度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15994194/
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
How to convert x,y coordinates to an angle?
提问by Matt Stow
Microsoft provide an excellent SVG gradient makerso IE9 can also have "CSS3" gradients (click Custom).
Microsoft 提供了一个出色的SVG 渐变生成器，因此 IE9 也可以具有“CSS3”渐变（单击自定义）。
I currently utilise their logic for my Fireworksand Dreamweaverextensions to convert gradients to SVG, but I only know how to do it for standard top, bottom, left, right directions. If you enter an angle, I don't do the conversion, because I'm not sure how I would convert x1, x2, y1, y2 to CSS3 angle degrees.
我目前在Fireworks和Dreamweaver扩展中使用他们的逻辑将渐变转换为 SVG，但我只知道如何为标准的顶部、底部、左侧、右侧方向执行此操作。如果您输入一个角度，我不会进行转换，因为我不确定如何将 x1、x2、y1、y2 转换为 CSS3 角度。
The gradient generator provides values like this: x1="0%" y1="0%" x2="56.262833675564686%" y2="68.29999651227678%"
梯度生成器提供如下值：x1="0%" y1="0%" x2="56.262833675564686%" y2="68.29999651227678%"
I'm not great with mathematics or trigonometry, so could somebody help me out? I'd also like to use the same math in a Sass mixin to do a similar thing, if possible.
我不擅长数学或三角学，所以有人可以帮助我吗？如果可能的话，我还想在 Sass mixin 中使用相同的数学来做类似的事情。
回答by Mohsen
If you get deltaXand deltaYfrom your coordinates then Math.atan2returns the arctangent of the quotient of its arguments. The return value is in radians.
如果你从你的坐标得到deltaX和deltaY然后Math.atan2返回其参数商的反正切。返回值以弧度为单位。
var deltaX = x2 - x1;
var deltaY = y2 - y1;
var rad = Math.atan2(deltaY, deltaX); // In radians
Then you can convert it to degrees as easy as:
然后您可以将其转换为度数，就像：
var deg = rad * (180 / Math.PI)
Edit
编辑
There was some bugs in my initial answer. I believe in the updated answer all bugs are addressed. Please comment here if you think there is a problem here.
我最初的回答中有一些错误。我相信在更新的答案中，所有错误都得到了解决。如果您认为这里有问题，请在此处发表评论。
回答by Matt
The currently accepted answer is incorrect. First of all, Math.tanis totally wrong -- I suspect Mohsen meant Math.atanand this is just a typo.
当前接受的答案是不正确的。首先，这Math.tan是完全错误的——我怀疑 Mohsen 的意思Math.atan，这只是一个错字。
However, as other responses to that answer state, you should really use Math.atan2(y,x)instead. The regular inverse tangent will only return values between -pi/2 and pi/2 (quadrants 1 and 4) because the input is ambiguous -- the inverse tangent has no way of knowing if the input value belongs in quadrant 1 vs 3, or 2 vs 4.
但是，作为对该答案状态的其他响应，您应该真正使用它Math.atan2(y,x)。正切反正切只会返回 -pi/2 和 pi/2（象限 1 和 4）之间的值，因为输入是不明确的——反正切无法知道输入值是否属于象限 1 和 3，或者2 对 4。
Math.atan2, on the other hand, can use the xy values given to figure out what quadrant you're in and return the appropriate angle for any coordinates in all 4 quadrants. Then, as others have noted, you can just multiply by (180/Math.pi)to convert radians to degrees, if you need to.
Math.atan2，另一方面，可以使用给定的 xy 值来确定您所在的象限，并返回所有 4 个象限中任何坐标的适当角度。然后，正如其他人所指出的(180/Math.pi)，如果需要，您可以乘以将弧度转换为度数。
回答by MNie
Instead of using Math.tan function You should use Math.atan2:
而不是使用 Math.tan 函数你应该使用 Math.atan2：
Here is an example of use:
下面是一个使用示例：
deltaX = x2 - x1;
deltaY = y2 - y1;
deg = Math.atan2(deltaY, deltaX)*180.0/Math.PI;
and this will return a degree from <-180;180>.
这将返回 <-180;180> 的度数。
回答by u4988617
If you in a Quadrant
如果你在一个象限
P1=(X0,Y0)
P1=(X0,Y0)
P2=(X1,Y1)
P2=(X1,Y1)
a=(X0-X1)
a=(X0-X1)
b=(Y0-Y2)
b=(Y0-Y2)
deltaX=((a)**2)**0.5
deltaY=((b)**2)**0.5
rad=math.atan2(deltaY, deltaX)
deg = rad * (360 / math.pi)
print deg
the deg will between 0 ~ 180
度数将在 0 ~ 180 之间
回答by Alessandro Catania
This function takes 2 elements and returns the degree between the middle of the elements.
此函数接受 2 个元素并返回元素中间的度数。
For example, I used it on a world map, to make the image of plane rotate in the direction of a city.
例如，我在世界地图上使用它，使平面图像沿城市方向旋转。
function degFromTwoElements(el1,el2){
var x1,x2,y1,y2,cx1,xy1,cx2,cy2,deltaX,deltaY,dx,dy,rad,deg,shortest,number;
x1 = el1.position().left;
y1 = el1.position().top;
x2 = el2.position().left;
y2 = el2.position().top;
cx1 = x1 - (el1.width() / 2);
cy1 = y1 - (el1.height() / 2);
cx2 = x2 - (el2.width() / 2);
cy2 = y2 - (el2.height() / 2);
deltaX = cx2 - cx1;
deltaY = cy2 - cy1;
y1 = Math.sqrt((Math.abs(deltaY)*Math.abs(deltaY))+(Math.abs(deltaX)*(Math.abs(deltaX))));
x1 = 0;
dy = deltaY-y1;
dx = deltaX-x1;
rad = Math.atan2(dy, dx);
deg = rad * (360 / Math.PI);
shortest;
number = Math.abs(deg);
if ((360 - number ) < number){
shortest = 360 - number;
console.log('shorter degree: ' + shortest);
return shortest;
}
else console.log('Angle is: ' + deg);
return deg;
}
回答by Black Side
var x,x1,x2,y,y1,y2;
var cells = 'cell0';
var h,w;
var cx,cy;
var dx,dy;
var derajat;
var deg;
var ang;
var light;
var control;
function mouse_watch(event){
x = event.clientX;
y = event.clientY;
cell_data(cells);
koordinat(x2,y2);
busur(derajat);
}
function koordinat(x2,y2){
x2 = x-cx;
y2 = y-cy;
yk = y2;
xk = x2;
}
function busur(derajat){
y1 = Math.sqrt((Math.abs(yk)*Math.abs(yk))+(Math.abs(xk)*(Math.abs(xk))));
x1 = 0;
dy = yk-y1;
dx = xk-x1;
rad = Math.atan2(dy, dx);
derajat = rad * (360 / Math.PI);
cell = document.getElementById(cells);
ang = cell.getElementsByClassName('angle0')[0];
ang.style.transform = 'rotate('+derajat+'deg)';
light = ang.getElementsByClassName('points')[0];
light.style.height = y1+'px';
}
function cell_data(cells){
cell = document.getElementById(cells);
h = Number(cell.style.height.replace('px',''));
w = Number(cell.style.width.replace('px',''));
cy = Number(cell.style.top.replace('px',''))+h/2;
cx = Number(cell.style.left.replace('px',''))+w/2;
} .preview_engine{
position: absolute;
top: 0;
left: 0;
padding: 10px;
background-color: #2E8AE6;
color: white;
}
body{
cursor: default;
width: 100%;
height: 100%;
font-family: Arial;
font-size: 12px;
}
.fieldwork{
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
.cell{
position: relative;
transition : width 2s, height 2s, top 2s, left 2s;
background-color: red;
}
.angle0{
width: 200px;
height: 200px;
position: absolute;
top: -75px;
left: -75px;
background-color: green;
border-radius: 50%;
opacity: 0.5;
transition : width 2s, height 2s, top 2s, left 2s;
}
.points{
width: 10px;
height: 10px;
position: absolute;
left: 95px;
top: 95px;
background-color: red;
border-radius: 1em;
opacity: none;
}<div class="fieldwork" onmousemove="mouse_watch(event)">
<div class='cell' id="cell0" style="width:50px;height:50px;top:200px;left:400px;">
<div class="angle0">
<div class="points"></div>
</div>
</div>
</div>