Implementing Eraser functionality for drawing app

Question

I was following this great tutorial at ray wenderlich's site about creating a simple drawing app with UIKit. http://www.raywenderlich.com/18840/how-to-make-a-simple-drawing-app-with-uikit

the tutorial is great and everything is working. the problem that I have is that when it came to creating the eraser functionality the solution proposed by ray was to use the brush with the same color that the background has. To me this doesn't seem like a great solution. what if the background is not a solid color like a gradient or any image like in so many coloring book apps.

So basically the question is: is there a way to remove color (convert all pixels in that area to transparent maybe) from a UIImageView at a given location?

Any help or pointers would greatly be appriciated. Thanks

Answer 1

Use the brush but for the color use:

[UIColor clearColor]

Answer 2

I could solve the issue using below code:

CGContextSetBlendMode(UIGraphicsGetCurrentContext(),kCGBlendModeClear);

Reference

Answer 3

I have the same issue in my app after the long search i found the simple solution for this issue.

i just used touches methods of the UIViewController

The below is the my approach,

Code:-

   #pragma mark touches stuff...



 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
        UITouch *touch = [touches anyObject];
        lastTouch = [touch locationInView:self.editedImageView];
    }

    - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
        UITouch *touch = [touches anyObject];
        currentTouch = [touch locationInView:self.editedImageView];

        CGFloat brushSize;
        if (isEraser) 
        {
            brushSize=eraser;
        }
        else
        {
            brushSize=mark;
        }
        CGColorRef strokeColor = [UIColor whiteColor].CGColor;

        UIGraphicsBeginImageContext(self.editedImageView.frame.size);
        CGContextRef context = UIGraphicsGetCurrentContext();
        [self.editedImageView.image drawInRect:CGRectMake(0, 0, self.editedImageView.frame.size.width, self.editedImageView.frame.size.height)];
        CGContextSetLineCap(context, kCGLineCapRound);
        CGContextSetLineWidth(context, brushSize);
        if (isEraser) {

            CGContextSetStrokeColorWithColor(UIGraphicsGetCurrentContext(), [UIColor colorWithPatternImage:self.im].CGColor);
        }  
        else
        {
            CGContextSetStrokeColorWithColor(context, strokeColor);
            CGContextSetBlendMode(context, kCGBlendModeClear); 
        }
        CGContextBeginPath(context);
        CGContextMoveToPoint(context, lastTouch.x, lastTouch.y);
        CGContextAddLineToPoint(context, currentTouch.x, currentTouch.y);
        CGContextStrokePath(context);
        self.editedImageView.image = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();

        lastTouch = [touch locationInView:self.editedImageView];
    }

    - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
    {

    }

The Inputs:

self.editedImageView.image = "Your Custom image";

self.im    =   "Your Custom image";

The simple solution of your problem will be :-

CGContextSetStrokeColorWithColor(UIGraphicsGetCurrentContext(), [UIColor colorWithPatternImage:self.im].CGColor);

Note:

This not unerase it again drawing the image over

Update:-

 self.im    =   "Your Custom image";

this will be like this....

-(void)eraserConfigure
{
    UIImageView *resizeImage=[[[UIImageView alloc]initWithImage:editedImage]autorelease];
    /*UIImage */self.im=[UIImage imageFromView:resizeImage scaledToSize:CGSizeMake(self.editedImageView.frame.size.width, self.editedImageView.frame.size.height)];
}