iPhone SDK Erase A UIImageView from the Screen Using Touches? - iphone

Question

I am looking for a way of being able to erase a UIImageView from the screen. When I say erase I don't mean [imageView removeFromSuperview];, I mean to erase parts of the image by scribbling your finger on the screen. Where ever your finger is, that is the portion of the image that is erased. I just can't find any help with this.
I would image in has to do with Quartz? If so, I'm not real good with that. :(
I guess the best example is a Lottery ticket. Once you scratch the portion of the ticket, that area beneath it reveals. Anyone know how to accomplish this?
Thank you!
Update: The following code is what did the trick. Thank you!
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];
lastTouch = [touch locationInView:canvasView];
}
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];
currentTouch = [touch locationInView:canvasView];
CGFloat brushSize = 35;
CGColorRef strokeColor = [UIColor whiteColor].CGColor;
UIGraphicsBeginImageContext(scratchView.frame.size);
CGContextRef context = UIGraphicsGetCurrentContext();
[canvasView.image drawInRect:CGRectMake(0, 0, canvasView.frame.size.width, canvasView.frame.size.height)];
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetLineWidth(context, brushSize);
CGContextSetStrokeColorWithColor(context, strokeColor);
CGContextSetBlendMode(context, kCGBlendModeClear);
CGContextBeginPath(context);
CGContextMoveToPoint(context, lastTouch.x, lastTouch.y);
CGContextAddLineToPoint(context, currentTouch.x, currentTouch.y);
CGContextStrokePath(context);
canvasView.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
lastTouch = [touch locationInView:canvasView];
}
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
}

Answer 1

You can definitely do this with a UIImageView, no custom Quartz layer required. Are you familiar with any form of drawing in iOS? Basically, you just need to keep track of the current and previous touch location using touchesBegan:, touchesMoved:, and touchesEnded.
Then you need to draw a 'line' (which in this case erases what's underneath it) between the current touch location and previous touch location using something like the following, which is taken directly from an actual application I developed that did something rather similar:
UIGraphicsBeginImageContext(canvasView.frame.size);
CGContextRef context = UIGraphicsGetCurrentContext();
[canvasView.image drawInRect:CGRectMake(0, 0, canvasView.frame.size.width, canvasView.frame.size.height)];
CGContextSetLineCap(context, lineCapType);
CGContextSetLineWidth(context, brushSize);
CGContextSetStrokeColorWithColor(context, strokeColor);
CGContextSetBlendMode(context, kCGBlendModeClear);
CGContextBeginPath(context);
CGContextMoveToPoint(context, lastTouch.x, lastTouch.y);
CGContextAddLineToPoint(context, currentTouch.x, currentTouch.y);
CGContextStrokePath(context);
canvasView.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
In this code canvasView is a UIImageView. There are lots of tutorials out there for this kind of drawing. The important thing for what you want is to set the blend mode to kCGBlendModeClear. That's this line:
CGContextSetBlendMode(context, kCGBlendModeClear);