How To Erase Image With Touch

Question

Right now what I can do is draw with touch, using touchesMoved.

• I can change the thickness of the drawing by assigning the CGContextSetLineWidth to a float that I assigned to a sliders value.

• I can change the drawing's colors. I do this by assigning to CGContextSetStrokeColor in the touchesMoved void to 4 different floats. I assign the floats different float values according to the color I want. In my viewDidLoad, the floats from 1 to 4 respectively are 1.0, 0.0, 0.0 and 1.0. That generates a red color. Using IBActions I assign different values for the floats according to the color value (RGB then Alpha) So by pressing the green button I can change to floats to 0.0, 1.0, 0.0, 1.0. This generates a green color. Ok!

• So now what I want to do is actually create an eraser button. I checked the UIColor class reference webpage and I looked at the clear color values but they could not erase what I had done which I could understand. The clear color doesn't erase, it just draws a clear drawing. I now know that I have to make a CGPoint and assign that to a touch's locationInView and then say that if there is drawing in the location, then the drawing should be gone. I don't know if that is a correct concept but it seems correct to me. If it is not correct please tell me.

I will provide my necessary code, but I ALSO ASK FOR SOMEONE to share their knowledge and their code because this has really got me stuck! Too be honest, Im not one of those cheap people who nag for code then do command-c and then command-v into XCode. Explanations are always welcome and benefit my learning as that is still something I am undergoing at the age of 12!

Here is all my code that is related to the question:

.h:

#import <UIKit/UIKit.h>
#import <AudioToolbox/AudioToolbox.h>
@interface GameScreen : UIViewController  {

   BOOL mouseSwiped;
   float lineWidth;
   CGPoint lastPoint;
   IBOutlet UIImageView *drawImage;





   CGFloat f1;
   CGFloat f2;
   CGFloat f3;
   CGFloat f4;



}


-(IBAction)cyan;
-(IBAction)blue;
-(void)checktouch;
-(IBAction)eraser;
-(void)checkgreen;
-(IBAction)orange;
-(IBAction)purple;
-(IBAction)pink;
-(IBAction)black;
-(void)mouseswiped;
-(IBAction)clear;
-(IBAction)dismiss;
-(IBAction)green;
-(IBAction)yellow;
-(IBAction)brown;
-(IBAction)grey;
-(IBAction)white;
-(IBAction)newdp;
-(IBAction)menu;
-(void)remove;
-(IBAction)red;

@end

.m:

#import "GameScreen.h"
#import "DoodlePicsViewController.h"
#import "Settings.h"

@implementation GameScreen



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



   mouseSwiped = NO;
   UITouch *touch = [touches anyObject];
   lineWidth = thickness.value;

   lastPoint = [touch locationInView:self.view];
   lastPoint.y -= 20;

}


- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
   mouseSwiped = YES;

   UITouch *touch = [touches anyObject]; 
   CGPoint currentPoint = [touch locationInView:self.view];
   currentPoint.y -= 20;


   UIGraphicsBeginImageContext(self.view.frame.size);
   [drawImage.image drawInRect:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];

   CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
   CGContextSetLineWidth(UIGraphicsGetCurrentContext(), lineWidth);
   CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(),f1, f2, f3, f4);
   CGContextBeginPath(UIGraphicsGetCurrentContext());
   CGContextMoveToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);
   CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), currentPoint.x, currentPoint.y);
   CGContextStrokePath(UIGraphicsGetCurrentContext());
   drawImage.image = UIGraphicsGetImageFromCurrentImageContext();
   UIGraphicsEndImageContext();


   lastPoint = currentPoint;
}









-(IBAction)yellow {

   f1 = 1.0;
   f2 = 1.0;
   f3 = 0.0;
   f4 = 1.0;

}
-(IBAction)brown {

   f1 = 0.6;
   f2 = 0.4;
   f3 = 0.2;
   f4 = 1.0;

}
-(IBAction)white {

   f1 = 1.0;
   f2 = 1.0;
   f3 = 1.0;
   f4 = 1.0;

}
-(IBAction)grey {

   f1 = 0.5;
   f2 = 0.5;
   f3 = 0.5;
   f4 = 1.0;

}
-(IBAction)red {

   f1 = 1.0;
   f2 = 0.0;
   f3 = 0.0;
   f4 = 1.0;

}

-(IBAction)cyan {


   f1 = 0.0;
   f2 = 1.0;
   f3 = 1.0;
   f4 = 1.0;
}

-(IBAction)blue {


   f1 = 0.0;
   f2 = 0.0;
   f3 = 1.0;
   f4 = 1.0;
}
-(IBAction)black {


   f1 = 0.0;
   f2 = 0.0;
   f3 = 0.0;
   f4 = 1.0;
}
-(IBAction)green {

   f1 = 0.0;
   f2 = 1.0;
   f3 = 0.0;
   f4 = 1.0;

}

-(IBAction)orange {


   f1 = 1.0;
   f2 = 0.5;
   f3 = 0.0;
   f4 = 1.0;
}
-(IBAction)pink {


   f1 = 1.0;
   f2 = 0.0;
   f3 = 1.0;
   f4 = 1.0;
}
-(IBAction)purple {

   f1 = 0.5;
   f2 = 0.0;
   f3 = 0.5;
   f4 = 1.0;

}




-(IBAction)eraser {

//I'm stuck right here LOL!

}



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

   UITouch *touch = [touches anyObject];
   if(!mouseSwiped) {
       UIGraphicsBeginImageContext(self.view.frame.size);
       [drawImage.image drawInRect:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
       CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
       CGContextSetLineWidth(UIGraphicsGetCurrentContext(), lineWidth);
       CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), f1, f2, f3, f4);
       CGContextMoveToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);
       CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);
       CGContextStrokePath(UIGraphicsGetCurrentContext());
       CGContextFlush(UIGraphicsGetCurrentContext());
       drawImage.image = UIGraphicsGetImageFromCurrentImageContext();
       UIGraphicsEndImageContext();
   }}
-(void)viewDidLoad {


   f1 = 1.0;
   f2 = 0.0;
   f3 = 0.0;
   f4 = 1.0;




}
@end

Answer 1

I have put two image views on top of one another, and I load the background in one and draw in the other, I set the background to opacity 0% on the draw image view, the I can just do:

-(IBAction) eraseLine {

drawImage.image = nil;

}

that removes all lines without removing the image i have in the background view.

Answer 2

As you correctly observed, drawing with the clear color doesn't have any effect when you draw with the default blend mode. When you set your graphics context's blend mode to "copy" however, everything that you draw will replace what's underneath it instead of painting over it. Drawing with the clear color will then have the effect of an eraser.

CGContextSetBlendMode(UIGraphicsGetCurrentContext(), kCGBlendModeCopy);

Answer 3

You can try making the eraser just a normal touchesMoved and set the color to whatever background color you are using. So when they color, it will look like it is erasing but it is in fact just coloring with the same color as the background. You seem to have the code already so I don't think I need to post it. Hope this helps.