Eraser Not Working in iOS Drawing

eraser not working in iOS drawing

I have solved this issue, the problem and below is the code which works perfectly

case :ERASE
{
 CGPoint mid1 = midPoint(m_previousPoint1, m_previousPoint2); 
            CGPoint mid2 = midPoint(m_currentPoint, m_previousPoint1);

            [m_curImage drawAtPoint:CGPointMake(0, 0)];
            CGContextRef context = UIGraphicsGetCurrentContext(); 

            [self.layer renderInContext:context];
            CGContextMoveToPoint(context, mid1.x, mid1.y);
            CGContextAddQuadCurveToPoint(context, m_previousPoint1.x, m_previousPoint1.y, mid2.x, mid2.y); 
            CGContextSetLineCap(context, kCGLineCapRound);

            CGContextSetBlendMode(context, kCGBlendModeClear);
            CGContextSetLineJoin(context, kCGLineJoinRound);
            CGContextSetLineWidth(context, self.lineWidth);
            CGContextSetStrokeColorWithColor(context, self.lineColor.CGColor);
            CGContextSetShouldAntialias(context, YES);  
            CGContextSetAllowsAntialiasing(context, YES); 
            CGContextSetFlatness(context, 0.1f);

            CGContextSetAlpha(context, self.lineAlpha);
            CGContextStrokePath(context); 
}

Regards
Ranjit.

This solved my issue, if anyone has the same issue, please implement this.

iOS Core Graphics How to erase a drawing

solved this problem by swapping tempImageView and drawImageView when touch began if it's erasing

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    _mouseSwiped = NO;
    UITouch *touch = [touches anyObject];
    _lastPoint = [touch locationInView:self.tempImageView];

    if (_isErasing) {
        self.tempImageView.image = self.drawImageView.image;
        self.drawImageView.image = nil;
    }

}

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

    _mouseSwiped = YES;
    UITouch *touch = [touches anyObject];
    CGPoint currentPoint = [touch locationInView:self.tempImageView];

    UIGraphicsBeginImageContext(self.tempImageView.frame.size);
    [self.tempImageView.image drawInRect:CGRectMake(0, 0, self.tempImageView.frame.size.width, self.tempImageView.frame.size.height)];
    CGContextMoveToPoint(UIGraphicsGetCurrentContext(), _lastPoint.x, _lastPoint.y);
    CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), currentPoint.x, currentPoint.y);
    CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
    CGContextSetLineWidth(UIGraphicsGetCurrentContext(), _width );

    if (_isErasing) {
        CGContextSetBlendMode(UIGraphicsGetCurrentContext(), kCGBlendModeClear);
    }
    else {
        CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), _red, _green, _blue, 1.0);
        CGContextSetBlendMode(UIGraphicsGetCurrentContext(),kCGBlendModeNormal);
    }

    CGContextStrokePath(UIGraphicsGetCurrentContext());
    self.tempImageView.image = UIGraphicsGetImageFromCurrentImageContext();
    [self.tempImageView setAlpha:_alpha];
    UIGraphicsEndImageContext();

    _lastPoint = currentPoint;
}

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

    CGSize size = self.tempImageView.frame.size;

    if(!_mouseSwiped) {
        UIGraphicsBeginImageContext(self.tempImageView.frame.size);
        [self.tempImageView.image drawInRect:CGRectMake(0, 0, size.width, size.height)];
        CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
        CGContextSetLineWidth(UIGraphicsGetCurrentContext(), _width);

        if (_isErasing) {
            CGContextSetBlendMode(UIGraphicsGetCurrentContext(), kCGBlendModeClear);
        }
        else {
            CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), _red, _green, _blue, _alpha);
            CGContextSetBlendMode(UIGraphicsGetCurrentContext(),kCGBlendModeNormal);
        }

        CGContextMoveToPoint(UIGraphicsGetCurrentContext(), _lastPoint.x, _lastPoint.y);
        CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), _lastPoint.x, _lastPoint.y);
        CGContextStrokePath(UIGraphicsGetCurrentContext());
        CGContextFlush(UIGraphicsGetCurrentContext());
        self.tempImageView.image = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
    }

    UIGraphicsBeginImageContext(self.drawImageView.frame.size);
    [self.drawImageView.image drawInRect:CGRectMake(0, 0, size.width, size.height) blendMode:kCGBlendModeNormal alpha:1.0];
    [self.tempImageView.image drawInRect:CGRectMake(0, 0, size.width, size.height) blendMode:kCGBlendModeNormal alpha:_alpha];
    self.drawImageView.image = UIGraphicsGetImageFromCurrentImageContext();
    self.tempImageView.image = nil;
    UIGraphicsEndImageContext();
}

Implementing Eraser functionality for drawing app

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

Swift - why is my Eraser tool pixilated

I couldn't exactly look at ur code But I had done something similar in Swift 2.3 a while ago (I do understand u are looking at swift 3 but right now this is version that I have).

Here is how the drawing class works looks like.

import Foundation
import UIKit
import QuartzCore

class PRSignatureView: UIView

{

var drawingColor:CGColorRef = UIColor.blackColor().CGColor //Col
var drawingThickness:CGFloat = 0.5
var drawingAlpha:CGFloat = 1.0

var isEraserSelected: Bool

private var currentPoint:CGPoint?
private var previousPoint1:CGPoint?
private var previousPoint2:CGPoint?

private var path:CGMutablePathRef = CGPathCreateMutable()

var image:UIImage?

required init?(coder aDecoder: NSCoder) {
    //self.backgroundColor = UIColor.clearColor()
    self.isEraserSelected = false
    super.init(coder: aDecoder)
    self.backgroundColor = UIColor.clearColor()
}

override func drawRect(rect: CGRect)
{
    self.isEraserSelected ? self.eraseMode() : self.drawingMode()
}

private func drawingMode()
{
    if (self.image != nil)
    {
        self.image!.drawInRect(self.bounds)
    }
    let context:CGContextRef = UIGraphicsGetCurrentContext()!
    CGContextAddPath(context, path)
    CGContextSetLineCap(context, CGLineCap.Round)
    CGContextSetLineWidth(context, self.drawingThickness)
    CGContextSetStrokeColorWithColor(context, drawingColor)
    CGContextSetBlendMode(context, CGBlendMode.Normal)
    CGContextSetAlpha(context, self.drawingAlpha)
    CGContextStrokePath(context);
}

private func eraseMode()
{
    if (self.image != nil)
    {
        self.image!.drawInRect(self.bounds)
    }
    let context:CGContextRef = UIGraphicsGetCurrentContext()!
    CGContextSaveGState(context)
    CGContextAddPath(context, path);
    CGContextSetLineCap(context, CGLineCap.Round)
    CGContextSetLineWidth(context, self.drawingThickness)
    CGContextSetBlendMode(context, CGBlendMode.Clear)
    CGContextStrokePath(context)
    CGContextRestoreGState(context)
}

private func midPoint (p1:CGPoint, p2:CGPoint)->CGPoint
{
    return CGPointMake((p1.x + p2.x) * 0.5, (p1.y + p2.y) * 0.5)
}

private func finishDrawing()
{
    UIGraphicsBeginImageContextWithOptions(self.bounds.size, false, 0.0);
    drawViewHierarchyInRect(self.bounds, afterScreenUpdates: true)
    self.image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
}

func clearSignature()
{
    path = CGPathCreateMutable()
    self.image = nil;
    self.setNeedsDisplay();
}

// MARK: - Touch Delegates
override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
    path = CGPathCreateMutable()
    let touch = touches.first!
    previousPoint1 = touch.previousLocationInView(self)
    currentPoint = touch.locationInView(self)
}
override func touchesMoved(touches: Set<UITouch>, withEvent event: UIEvent?) {
    let touch = touches.first!
    previousPoint2 = previousPoint1
    previousPoint1 = touch.previousLocationInView(self)
    currentPoint = touch.locationInView(self)
    
    let mid1 = midPoint(previousPoint2!, p2: previousPoint1!)
    let mid2 = midPoint(currentPoint!, p2: previousPoint1!)
    
    let subpath:CGMutablePathRef = CGPathCreateMutable()
    CGPathMoveToPoint(subpath, nil, mid1.x, mid1.y)
    CGPathAddQuadCurveToPoint(subpath, nil, previousPoint1!.x, previousPoint1!.y, mid2.x, mid2.y)
    CGPathAddPath(path, nil, subpath);
    self.setNeedsDisplay()
}
override func touchesEnded(touches: Set<UITouch>, withEvent event: UIEvent?) {
    self.touchesMoved(touches, withEvent: event)
    self.finishDrawing()
}
override func touchesCancelled(touches: Set<UITouch>?, withEvent event: UIEvent?) {
    self.touchesMoved(touches!, withEvent: event)
    self.finishDrawing()
}

}

Source Code for test app I created using the above code

Edit: Converting few lines code to swift 3 as requested

subpath.move(to: CGPoint(x: mid1.x, y: mid1.y))
subpath.addQuadCurve(to:CGPoint(x: mid2.x, y: mid2.y) , control: CGPoint(x: previousPoint1!.x, y: previousPoint1!.y))
path.addPath(subpath)

Edit: In response to the updated Question

Here is the updated Drawing Class that must solve the issue for sure. https://drive.google.com/file/d/0B5nqEBSJjCriTU5oRXd5c2hRV28/view?usp=sharing

Issues addressed:

1. Line Struct did not hold the tool type associated. Whenever setNeedsDislpay() is called you redraw all the objects in pathArray and all Objects were getting redrawn with the current selected tool. I have added a new variable associatedTool to address the issue.
2. Use of function beginTransparencyLayer will set the blend mode to kCGBlendModeNormal. As this was common for all cases related to tooltype this was causing the mode to be set to normal. I have removed these two lines

//context.beginTransparencyLayer(auxiliaryInfo: nil)

//context.endTransparencyLayer()

Erase UIBezierPath

I managed to solve this using CGContext.

@objc private func didPanWhiteboard(_ gesture: UIPanGestureRecognizer) {
    switch gesture.state {
        case .began:
            drawingState = .began
            lastPoint = gesture.location(in: drawingBoardImageView)
        case .changed:
            drawingState = .moved
            let currentPoint = gesture.location(in: drawingBoardImageView)
            drawLineFrom(fromPoint: lastPoint, toPoint: currentPoint)
            lastPoint = currentPoint
        case .cancelled, .ended:
            drawingState = .ended
            drawLineFrom(fromPoint: lastPoint, toPoint: lastPoint)
        default: break
    }
}

private func drawLineFrom(fromPoint: CGPoint, toPoint: CGPoint) {
    UIGraphicsBeginImageContext(drawingBoardImageView.frame.size)
    let context = UIGraphicsGetCurrentContext()
    tempImageView.image?.draw(in: CGRect(x: 0, y: 0, width: drawingBoardImageView.frame.size.width, height: drawingBoardImageView.frame.size.height))
    context?.move(to: fromPoint)
    context?.addLine(to: toPoint)
    context?.setLineCap(brush.lineCap)
    context?.setAlpha(brush.opacity)
    context?.setLineWidth(brush.width)
    context?.setStrokeColor(brush.color.cgColor)
    if shouldErase {
        context?.setBlendMode(.clear)
    } else {
        context?.setBlendMode(.normal)
    }
    context?.strokePath()
    guard let image = UIGraphicsGetImageFromCurrentImageContext() else { return }
    if drawingState == .ended {
        drawingUndoManager.registerForUndo(image)
    }
    tempImageView.image = image
    tempImageView.alpha = 1.0
    UIGraphicsEndImageContext()
}

Eraser functionality for CAShapelayer drawings : SWIFT

A CAShapeLayer is a vector drawing. It's shapes. The usual eraser tool works with raster (pixel-based) drawings. The two are different, and there isn't a straightforward way to do an eraser tool on vector drawings.

One way you could do it is to have the eraser tool edit a mask layer which is applied to your shape layer. It would have the effect of erasing the parts of the shape layer where the mask is opaque.

One tricky part to this is that once you've drawn into the mask, you'd have to erase that part of the mask in order for the user to be able to draw new content into the erased area, and that might cause the erased parts of the old drawing to show through.

Getting what you want to do to work well would be quite tricky.

iPhone Quartz Drawing Eraser

This code should do what you're looking for:

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetLineWidth(context, self.strokeWidth);
CGContextSetBlendMode(context, kCGBlendModeClear);
CGContextSetStrokeColorWithColor(context, [[UIColor clearColor] CGColor]);
CGContextBeginPath(context);
CGContextMoveToPoint(context, lastPoint.x, lastPoint.y);
CGContextAddLineToPoint(context, currentPoint.x, currentPoint.y);
CGContextStrokePath(context);     
CGContextFlush(context);

The key points are

1) CGContextSetLineCap(context, kCGLineCapRound), which makes it round

2) CGContextSetBlendMode(context, kCGBlendModeClear) which clears the context.

---

Related Topics