Question

199

How to convert x,y coordinates to an angle?

rated 0 times [ 200] [ 1] / answers: 1 / hits: 107105 / 11 Years ago, sat, april 13, 2013, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

susanajamiep

Add To Favorites

Follow

Total Points: 466

Total Questions: 113

Total Answers: 108

Location: Liberia

Member since Fri, Oct 22, 2021

3 Years ago

susanajamiep questions

1 how can I add menu button in telegram bot

Sun, Jun 12, 22, 00:00, 2 Years ago

1 'TypeError: Cannot set properties of undefined (setting '0')'----Array assignment

Sat, Apr 16, 22, 00:00, 2 Years ago

1 Setting cors in strapi 4

Mon, Mar 7, 22, 00:00, 2 Years ago

1 Dynamic import of react hooks

Wed, Jun 10, 20, 00:00, 4 Years ago

1 React Hook useEffect issue with setState

Fri, Jan 24, 20, 00:00, 4 Years ago

View All

answered 11 Years ago kelleyamiahk · Accepted Answer

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)

enter

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.