Use JavaScript to select point on a circle

Question

Is there a way to use JavaScript to select a point on an image of a wheel, and save the point from maybe 0-360?

Answer 1

You can use trigonometry to find the point on a circle if you know the circle's radius:

var x = Math.cos(pointAngleInRadians) * radius;
var y = Math.sin(pointAngleInRadians) * radius;

If the circle is centered on a point such as (10, 20) you would need to add these values to x and y to get accurate coordinates.

---

Update

The article Click image and get coordinates with JavaScript explains how you can call a function when a user clicks on a image, and have that function figure out the coordinates.

Here are some high-level notes of how you might use this to figure out the angle (0 - 360 degrees) that they clicked:

• Knowing the coordinates of the center of each circle and the coordinates the user clicked on, you can calculate the radius using the distance between points, calculated by:

• Then you can use trig equations above to calculate the angle of the point on each circle.

• Assuming each circle has a width, you could calculate the coordinates of the point with the same angle/radius at the outer and inner edges of each tire.

• Compare the inner/outer edge values to the point the user clicked on to see if the user clicked within the tire's bounds. For both x and y you will need two cases for each half of the circle - for example, the following is only valid for 180 degrees xInner <= x <= xOuter, and then for the remaining 180 degrees xInner >= x >= xOuter.

• After the previous step, if the point is on one of the tires, then you have the angle. You may need to convert it from radians to degrees before storing it:

angle in degrees = angle in radians * 180 / Pi