开发者

Find degrees (0-360º) of point on a circle

开发者 https://www.devze.com 2023-03-18 06:37 出处:网络
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

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:

Find degrees (0-360º) of point on a circle

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 aft开发者_运维问答er poring over the source code I can't seem to replicate it accurately.

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


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

0

精彩评论

暂无评论...
验证码 换一张
取 消