iPhone SDK Erase A UIImageView from the Screen Using Touches?

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);