Mark a ball with a circular image layer- in iphone touch zoom or move

Question

I have two images a tennis ball and a red marker image. I need to make the tennis ball as background and make the red marker as foreground like a layer over the tennis ball and I need to adjust the red marker according to the shape of tennis ball. I have to achieve this with pinch and touch actions.

The below are the two images.

Image 1:

enter image description here

Image 2 ( layer ):

enter image description here

Final Image By adjusting the circle:

enter image description here

Any starters on this would be good!!

So you have image with ball on it. When user starts interact with this image, red circle appears (Image 2(layer)), and user, by moving his finger, adjusting red circle? Or you want red circle automatically adjust to tennis ball? — derpoliuk, Mar 17 '13 at 01:33
@StasDerpoliuk I want the user to move and adjust the red circle to fit the ball! — Manoj, Mar 18 '13 at 06:25

score 2 · Accepted Answer · edited May 23 '17 at 12:09

There are two ways to do this (handling user touches):

touchesBegan:withEvent:, touchesMoved:withEvent: and touchesEnded:withEvent:methods. Reference is here: UIResponder - Responding to Touch Events.
Gesture recognizers (use standart gesture recognizers or create your own custom one). Reference is here: Gesture Recognizers. Good tutorial is here.

If you need just to move red circle, but not adjusting it size - to use touches... methods will be good for you.

But if you want to adjust size of the circle by using pinch gesture - you might want to create custom gesture recognizer (and implement same touches... methods there) to handle touches and moves; and use standart UIPinchGestureRecognizer to handle pinch gestures.

You need to create custom gesture recognizer, because standart UITapGestureRecognizer and UIPanGestureRecognizer have some issues, as it mentioned here.

UPD:

For example, you have UIViewController. You're adding UIImageView to viewController's view. And you're creating UIView with clear background and drawing red circle inside of it or you're adding another UIImageView with red circle (if you have an image of it). Let's call it redCircleView.

You're making redCircleView transparent (redCircleView.alpha = 0) or you can initialize it when user touches the screen. I think second option is better, but I'm not sure.

In your UIViewController you're implementing touchesBegan:withEvent: method, where you're either set redCircleView.alpha = 1 or initialize this redCircleView.

In touchesMoved:withEvent: implementation you can get location of touch in any view using UITouch:locationInView:

 (void) touchesMoved: (NSSet *)touches withEvent:(UIEvent *)event {
      UITouch *touch = [touches anyObject];
      CGPoint point = [touch locationInView:self.view];
      .
      .
      .
 }

Then you can either change redCircleView.center (then center of red circle will follow finger on the screen) or you can store location of previous point, compare it to current location on then move redCircleView.

And how can I make an image over an image? i.e., red circle over the ball? and touch and move only the red circle and not the ball? — Manoj, Mar 19 '13 at 04:32

Mark a ball with a circular image layer- in iphone touch zoom or move

1 Answers1