Overlaid images

Question

I'm creating an application where I will be drawing two circles onto the screen, one large circle with a smaller circle inside. I want the user to be able to touch/drag on the screen inside or outside of the large circle and it will move the smaller circle in that direction. If the user touches outside of the large circle the smaller circle will not go outside of the larger circle's border.

With the research I've done I can easily draw the two circles inside of each other and handle the movement of the smaller image. However, I don't see an easy way to limit the smaller circle to stay inside of the larger circle. All I have found is clipping but that would just cause the smaller circle to only be partially drawn. Does anyone have a good point of reference I could use to start looking into how this is possible? Thanks.

Answer 1

I think you're best bet is to do the math yourself and limit the smaller circles movement. Using clipping wouldn't limit the circle from going "outside" of the larger circles border, it would only partially draw the smaller circle when it would go outside the valid bounds.

You would have to check if the center of the smaller circle is inside an imaginary circle with the same center as the larger circle but with a diamater of (diameterLargeCircle - diameterSmallCircle)

Answer 2

Lets say the big circle has Radio Rb and Center Cb. The inner circle would be Ri and center Ci.
If you set the distance from Ci to Cb ( from the inner circle center to the center of the big one) to be less than Rb-Ri ( than the rest of the big radious from the inner radious) you'll always have the inner circle inside.. Do you get the idea? Just draw it and see that it always is true) Distance (Ci to Cb) < Rb-Ri The only thing you need to do is check for this to be true.

Distance from Ci to Cb is Math.Sqrt( math.Pow(Cix-Cbx,2)+Math.Pow(Ciy-Cby,2))