如何将x，y坐标转换为角度？

Question

Microsoft provide an excellent SVG gradient maker so IE9 can also have "CSS3" gradients (click Custom).

I currently utilise their logic for my Fireworks and Dreamweaver extensions 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.

The gradient generator provides values like this: 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.

Answer 1

If you get deltaX and deltaY from your coordinates then Math.atan2 returns the arctangent of the quotient of its arguments. The return value is in radians.

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.

Answer 2

The currently accepted answer is incorrect. First of all, Math.tan is totally wrong -- I suspect Mohsen meant Math.atan and this is just a typo.

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 , 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.

Answer 3

Instead of using Math.tan function You should use 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>.

Answer 4

If you in a Quadrant

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

the deg will between 0 ~ 180

Answer 5

This function takes 2 elements and returns the degree between the middle of the elements.

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;

}

Answer 6

 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>