如何将x转换，y坐标的角度？(How to convert x,y coordinates to a

微软提供了一个极好的SVG梯度壶所以IE9还可以有“CSS3”梯度（单击自定义）。

目前，我利用自己的逻辑，我的烟花和Dreamweaver的扩展梯度转换为SVG，但我只知道如何做到这一点的标准上，下，左，右方向。 如果输入的角度，我不这样做转换，因为我不知道我会怎么X1，X2，Y1，Y2转换为CSS3度角。

梯度发生器提供的值是这样的：X1 = “0％” Y1 = “0％” X2 = “56.262833675564686％” Y2 = “68.29999651227678％”

我不是伟大的数学或三角，所以可以有人帮助我吗？ 我也想用同样的数学在萨斯混入做类似的事情，如果可能的话。

Answer 1:

如果你deltaX和deltaY从您的座标，然后Math.atan2返回其参商的反正切。 返回值是弧度。

var deltaX = x2 - x1;
var deltaY = y2 - y1;
var rad = Math.atan2(deltaY, deltaX); // In radians

然后，你可以将其转换为度一样容易：

var deg = rad * (180 / Math.PI)

编辑

有在我的初步回答了一些错误。 我相信，在更新后的答案所有的错误得到解决。 如果你认为有问题，这里请在这里评论。

Answer 2:

目前公认的答案是不正确。 首先， Math.tan是完全错误的-我怀疑穆赫辛意味着Math.atan而这仅仅是一个错字。

但是，对于这个问题的答案状态等反应，你应该使用Math.atan2(y,x)来代替。 反正切无法知道如果输入值在象限1属于比3的方式，或 - 定期反正切仅将-pi / 2和π/ 2（象限1和4），因为输入是模糊之间返回值2比4。

Math.atan2 ，在另一方面，可以使用给予找出象限你在并返回适当的角度在所有4个象限的任何坐标的XY值。 然后，正如其他人指出的那样，你可以通过乘(180/Math.pi)为弧度转换为度，如果你需要。

Answer 3:

而不是使用Math.tan功能，您应该使用Math.atan2：

下面是使用的例子：

deltaX = x2 - x1;
deltaY = y2 - y1;
deg = Math.atan2(deltaY, deltaX)*180.0/Math.PI;

并且这将返回从<-180; 180>度。

Answer 4:

如果你在一个象限

P1 =（X0，Y0）

P2 =（X1，Y1）

A =（X0-X1）

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

0〜180之间的度意愿

Answer 5:

 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> 

Answer 6:

此函数采用2个元素，并返回该元件的中部之间的程度。

例如，我用它在世界地图上，使平面的旋转在一个城市的方向上的图像。

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;

}

文章来源: How to convert x,y coordinates to an angle?