LongPress on UIIImageView, create a clone "ghost" image, then drag it around - iphone

Question

I have a sample project where I am trying to test out this behavior. I have two UIImageViews side by side. I want to be able to longPress on either the left or right UIImageView, create a semi-transparent clone image, and drag it to the other UIImageView to swap images.
For example, to swap the images, the user could do:
Tap and hold on the left UIImageView
A cloned, smaller "ghost" image will appear at the touch coordinate
The user will drag the cloned image to the right UIImageView
The user will release their finger from the screen to "drop" the cloned image
The left and right UIImageViews can then swamp their images.
Here are some pics to illustrate:
Original state:
http://d.pr/i/PNVc
After long press on left-side UIImageView with smaller cloned image added as subview:
http://d.pr/i/jwxj
I can detect the longpress and make the cloned image, but I cannot pan that image around unless I release my finger and do another touch on the screen.
I'd like to be able to be able to do it all in one motion, without the user needing to remove their finger from the screen.
I don't know if this is the right approach, but this is how I'm doing it for now. Thanks for any help!
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
[self addLongPressGestureToPiece:leftImageView];
[self addLongPressGestureToPiece:rightImageView];
}
- (void)addLongPressGestureToPiece:(UIView *)piece
{
NSLog(#"addLongPressGestureToPiece");
UILongPressGestureRecognizer *longPressGesture = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:#selector(longPressPiece:)];
[longPressGesture setDelegate:self];
[piece addGestureRecognizer:longPressGesture];
[longPressGesture release];
}
- (void)addPanGestureRecognizerToPiece:(UIView *)piece
{
NSLog(#"addPanGestureRecognizerToPiece");
UIPanGestureRecognizer *panGesture = [[UIPanGestureRecognizer alloc] initWithTarget:self action:#selector(panPiece:)];
[panGesture setMaximumNumberOfTouches:1];
[panGesture setDelegate:self];
[piece addGestureRecognizer:panGesture];
[panGesture release];
}
- (void)longPressPiece:(UILongPressGestureRecognizer *)gestureRecognizer
{
UIImageView *piece = (UIImageView*)[gestureRecognizer view];
CGPoint point = [gestureRecognizer locationInView:self.view];
if(gestureRecognizer.state == UIGestureRecognizerStateBegan)
{
NSLog(#"UIGestureRecognizerStateBegan");
// create the semi-transparent imageview with the selected pic
UIImage *longPressImage = [piece image];
UIImageView *draggableImageView = [[UIImageView alloc] initWithFrame:CGRectMake(point.x - longPressImage.size.width/6/2, point.y - longPressImage.size.height/6/2, longPressImage.size.width/6, longPressImage.size.height/6)];
draggableImageView.image = longPressImage;
draggableImageView.alpha = 0.5;
draggableImageView.userInteractionEnabled = YES;
[self.view addSubview:draggableImageView];
[self addPanGestureRecognizerToPiece:draggableImageView];
photoView.userInteractionEnabled = NO;
}
else if(gestureRecognizer.state == UIGestureRecognizerStateChanged)
{
NSLog(#"Changed");
}
else if(gestureRecognizer.state == UIGestureRecognizerStateEnded)
{
NSLog(#"Ended");
photoView.userInteractionEnabled = YES;
}
}
- (void)adjustAnchorPointForGestureRecognizer:(UIGestureRecognizer *)gestureRecognizer
{
NSLog(#"adjustAnchorPointForGestureRecognizer");
if (gestureRecognizer.state == UIGestureRecognizerStateBegan) {
UIView *piece = gestureRecognizer.view;
CGPoint locationInView = [gestureRecognizer locationInView:piece];
CGPoint locationInSuperview = [gestureRecognizer locationInView:piece.superview];
piece.layer.anchorPoint = CGPointMake(locationInView.x / piece.bounds.size.width, locationInView.y / piece.bounds.size.height);
piece.center = locationInSuperview;
}
}
- (void)panPiece:(UIPanGestureRecognizer *)gestureRecognizer
{
NSLog(#"pan piece");
UIView *piece =[gestureRecognizer view];
[self adjustAnchorPointForGestureRecognizer:gestureRecognizer];
CGPoint translation = [gestureRecognizer translationInView:[piece superview]];
// if velocity.y is positive, user is moving down, if negative, then moving up
CGPoint velocity = [gestureRecognizer velocityInView:[piece superview]];
if ([gestureRecognizer state] == UIGestureRecognizerStateBegan || [gestureRecognizer state] == UIGestureRecognizerStateChanged)
{
[piece setCenter:CGPointMake([piece center].x + translation.x, [piece center].y + translation.y)];
[gestureRecognizer setTranslation:CGPointZero inView:[piece superview]];
}
else if([gestureRecognizer state] == UIGestureRecognizerStateEnded)
{
NSLog(#"piece y %f", piece.frame.origin.y);
}
}

Answer 1

This is probably because the touch was already detected before the image (and thus the gesture recognizer) was created. I would suggest creating the ghost images beforehand, but have them hidden. That way, the gesture recognizer is actually fired as the ghost image is already there.
This may be expensive though, if you have a lot of images. If performance is bad, you can also consider just creating the image views, but only setting the images for those views when they are touched. That way you don't have to load the images into memory unnecessarily.

Answer 2

For me, I discovered i was getting ghost images on account of longGestureAction being called multiple times for the .begin state. While I knew that .changed would be continuous, I found (and docs confirmed) that each state can occur multiple times. So in the .begin state when you're creating the image from GraphicsContext, its getting interrupted with multiple calls - leading to ghosts where the old one was. Put a guard in your code as I did to prevent this from occurring. Problem solved.