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:

Image 2 ( layer ):

Final Image By adjusting the circle:

Any starters on this would be good!!

Answer 1

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

1. touchesBegan:withEvent: , touchesMoved:withEvent: and touchesEnded:withEvent: methods. Reference is here: UIResponder - Responding to Touch Events .

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