convert x and y coordinates to z ( deg) on a circle

Question

In the below picture, we want to know how much we should rotate the yellow border when the user is dragging it.

Simply put :

The user puts his finger on the top of the yellow border and then goes/drags 30m to the left, and 20m to the bottom, how much should we rotate the yellow border, so we can be sure that the top of his finger remains on the top of the yellow border?

More details :

On every move/drag, we get below information about the finger location :

• moveX - the latest screen coordinates of the recently-moved touch

• moveY - the latest screen coordinates of the recently-moved touch

• dx - accumulated distance of the gesture since the touch started

• dy - accumulated distance of the gesture since the touch started

• rotation - the current angle of the yellow border

So when you move/drag your finger on the yellow border, I want to drag along the yellow border, and if you make a circle ( rotate 360, ) the border should also follow your finger.

So the question is, how do I convert the x and y coordinates of the finger, into a z or angle coordination of the circle

NOTE: the black arrow is the user's finger movement, started from the upper-right to the lower-left, which we have the x and y of.

I'm not sure which tags to choose for this question :( please advise.

Much appreciated

Answer 1

If $(x_0,y_0)$ is the center of the circle in screen coordinates (assuming coordinates increase from left to right and bottom to top) then the coordinates of a point on a circle of radius $r$ at an angle $\theta$ as shown are

$$(x_0+r\cos\theta,y_0+r\sin\theta) $$

If, however, you are given the screen coordinates of the point $(x,y)$ on the circle and want to know the angle $\theta,$ it satisfies the equations

\begin{eqnarray} \cos\theta&=&\frac{x-x_0}{r}\\ \sin\theta&=&\frac{y-y_0}{r} \end{eqnarray}