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

Found this: http://stackoverflow.com/questions/629409/how-to-draw-a-transparent-stroke-or-anyway-clear-part-of-an-image-on-the-iphon but dont know how to implement this... any help??? — Umer Hassam, Apr 02 '13 at 20:52

score 1 · Answer 1 · answered Apr 02 '13 at 20:05

1

Use the brush but for the color use:

[UIColor clearColor]

answered Apr 02 '13 at 20:05

Ben M

2,405
1
20
19

Trying using CGContextSetStrokeColorWithColor instead. CGContextSetStrokeColorWithColor(context, [UIColor clearColor].CGColor) – Ben M Apr 02 '13 at 20:58

score 1 · Accepted Answer · answered Apr 03 '13 at 05:43

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

Note: this not erasing but redrawing the again with the same for your case if your background is white or some other color then use that color or image mean use the above code — Arun, Apr 03 '13 at 05:46
awesome... had to fight with the code a bit .. mine was bit too messed up but finally got it to work.. thanks — Umer Hassam, Apr 04 '13 at 13:03

score 1 · Answer 3 · edited May 23 '17 at 10:28

1

I could solve the issue using below code:

CGContextSetBlendMode(UIGraphicsGetCurrentContext(),kCGBlendModeClear);

Reference

edited May 23 '17 at 10:28

Community

1
1

answered Aug 13 '13 at 17:19

apnair

11
2

Implementing Eraser functionality for drawing app

3 Answers3

Linked