Panning a UIImage with a Gesture Recognizer on a placeholder UIView

Question

I need to crop an image to match a specific dimension. I have three layers in my view starting from the bottom:

1. I have the raw image in a UIImage . This image comes from the camera. (called cameraImage)
2. I have a UIView holding this image. When user clicks "crop", the UIView's bounds are used to crop the raw image inside it.
3. Above all of this I have a guide image which shows the user the dimensions they need to pan, rotate, and pinch their image to fit into.

I want to add the pan gesture to the top guide image and have it control the raw image at the bottom. So the guide image never moves but it is listening for the pan gesture. I can't figure out how to reset the recognizer without it making my raw image jump back to zero. Maybe someone could help?

- (IBAction)handlePan:(UIPanGestureRecognizer *)recognizer {
CGPoint translation = [recognizer translationInView:recognizer.view];
recognizer.view.center = CGPointMake(recognizer.view.center.x+translation.x, recognizer.view.center.y+ translation.y);
[recognizer setTranslation:CGPointMake(0, 0) inView:recognizer.view];
}

The above code works great in my gesture is attached to the bottom image. The problem is when the user goes outside the view's bounds, the image stops panning and is basically stuck. You can't touch it anymore so it sits there. So I thought if i attached the gesture to the top it would solve this problem.

- (IBAction)handlePan:(UIPanGestureRecognizer *)recognizer {
CGPoint translation = [recognizer translationInView:recognizer.view];
cameraImage.center = CGPointMake(recognizer.view.center.x+translation.x, recognizer.view.center.y+ translation.y);
}

This almost works. I set the cameraImage's center and removed the third line which resets the recognizer. If I don't remove it, the cameraImage jumps back into the same position every time I try and pan. It almost works because when you click the image again it doesn't start from the pixel you touched. It moves the image back to the original position and then lets you pan.

Answer 1

First option: when the recognizer enter the UIGestureRecognizerStateEnded state

if(recofnizer.state == UIGestureRecognizerStateEnded )
{
...
}

You store the translation at that point in time in an instance varibale (@property) of your class.

And then you always add the saved translation to the new translation. In code this would look like this:

 - (IBAction)handlePan:(UIPanGestureRecognizer *)recognizer {
       CGPoint translation = [recognizer translationInView:recognizer.view];
       CGPoint updatedTranslation = CGPointMake(translation.x+self.savedTranslation.x,translation.y+self.savedTranslation.y);
       cameraImage.center = CGPointMake(recognizer.view.center.x+updatedTranslation.x, recognizer.view.center.y+ updatedTranslation.y);
       if(recofnizer.state == UIGestureRecognizerStateEnded )
       {
          self.savedTranslation = updatedTranslation;
       }
}

Dont forget to add @property (nonatomic, assign) CGPoint savedTranslation; to your interface. Also make sure the savedTranslation variable is initialized in the init method of your class to self.savedTranslation = CGPointMake(0,0);

Second option: You should think about doing all that what you want in an scrollview with the imageview as the viewForZooming of the scrollview. This allows very smooth interaction, like users are used to!

Above this scrollview you can then put your mask/guide, but make sure to disable the userInteraction of the mask/guide view to make your user touch the scrollview below!