8

I'm working on a small webapp in which I need to rotate shapes. I would like to achieve this by grabbing a point on a circle and dragging it around to rotate the image.

Here's a quick illustration to help explain things:

two points on circle, i'm looking to find the degrees of p1

My main circle can be dragged anywhere on the canvas. I know it's radius (r) and where 12 o'clock (p0) will always be (cx, cy - r). What I need to know is what degree p1 will be (0-360º) so I can rotate the contents of the main circle accordingly with Raphael.rotate().

I've run through a bunch of different JavaScript formulations to find this (example), but none seem to give me values between 0-360 and my basic math skills are woefully deficient.

The Color Picker demo (sliding the cursor along the ring on the right) has the behavior I want, but even after poring over the source code I can't seem to replicate it accurately.

Anything to point me in the correct direction would be appreciated.

Phrogz
  • 296,393
  • 112
  • 651
  • 745
Darren Newton
  • 2,847
  • 1
  • 29
  • 31

1 Answers1

10
// Angle between the center of the circle and p1,
// measured in degrees counter-clockwise from the positive X axis (horizontal)
( Math.atan2(p1.y-cy,p1.x-cx) * 180/Math.PI + 360 ) % 360

The angle between the center of the circle and p0 will always be +90°. See Math.atan2 for more details.

Phrogz
  • 296,393
  • 112
  • 651
  • 745