iOS : Drawing on a CGContext eventually blurs

Question

I have a app that displays a document that has a UIImage over the top of it where you can draw lines etc to highlight stuff.

If I keep drawing lines (touch, draw, lift finger off, and repeat in a different area of the screen)

The lines slowly blur.

Here is my touch code, I am using kCGBlendModeCopy for blendmode but have used kCGBlendModeNormal. DrawingView is a UIImageView.

UPDATE It is lines I have already draw, the older they are the more they get blurred, it feels like each added line decays the older ones. Tested on a iPad 2 ios8 iPad Mini Retina ios7

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

    mouseSwiped = NO;

    if ( self.drawingEnabled )
    {
        UITouch *touch = [touches anyObject];
        lastPoint = [touch locationInView:self.drawingView];

        UIGraphicsBeginImageContext(self.drawingView.frame.size);
        [self.drawingView.image drawInRect:CGRectMake(0, 0, self.drawingView.frame.size.width, self.drawingView.frame.size.height) blendMode:kCGBlendModeCopy alpha:1.0];
    }
}

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

    if ( self.drawingEnabled )
    {
        mouseSwiped = YES;
        UITouch *touch = [touches anyObject];

        CGPoint currentPoint = [touch locationInView:self.drawingView];

        CGContextRef ctxt = UIGraphicsGetCurrentContext();
        CGContextMoveToPoint(ctxt, lastPoint.x, lastPoint.y);
        CGContextAddLineToPoint(ctxt, currentPoint.x, currentPoint.y);
        CGContextSetLineCap(ctxt, kCGLineCapRound);
        CGContextSetLineWidth(ctxt, self.brush );
        CGContextSetRGBStrokeColor(ctxt, self.redColour, self.greenColour, self.blueColour, OPACITY);

        if (self.eraserOn)
        {
            CGContextSetBlendMode(ctxt,kCGBlendModeClear);
        }
        else
        {
            CGContextSetBlendMode(ctxt,kCGBlendModeCopy);
        }

        CGContextStrokePath(ctxt);
        self.drawingView.image = UIGraphicsGetImageFromCurrentImageContext();

        lastPoint = currentPoint;
    }
}

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


    [super touchesCancelled:touches withEvent:event];

    UIGraphicsEndImageContext();

    if(!mouseSwiped)
    {
        //self.drawingView.image = nil;
    }
}

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


    if ( self.drawingEnabled )
    {

        if(!mouseSwiped) {
            UIGraphicsEndImageContext();

            UIGraphicsBeginImageContext(self.drawingView.frame.size);
            [self.drawingView.image drawInRect:CGRectMake(0, 0, self.drawingView.frame.size.width, self.drawingView.frame.size.height)];
            CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
            CGContextSetLineWidth(UIGraphicsGetCurrentContext(), self.brush);
            CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), self.redColour, self.greenColour, self.blueColour, OPACITY);
            CGContextMoveToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);
            CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);
            CGContextStrokePath(UIGraphicsGetCurrentContext());
            CGContextFlush(UIGraphicsGetCurrentContext());
            self.drawingView.image = UIGraphicsGetImageFromCurrentImageContext();
            UIGraphicsEndImageContext();
        }

        if (self.delegate)
        {
            [self.delegate drawingUpated];
        }

        //NSLog(@"%@  ---  %@", NSStringFromCGRect(self.frame) , NSStringFromCGRect(self.drawingView.frame) );
    }
}

Lines you'd already drawn become blurry? Or new lines you're adding are drawn blurry? What kind of device are you testing this on? Can you maybe post a couple of example images? — Sixten Otto, Feb 02 '15 at 16:55
UIGraphicsBeginImageContext docs say it uses a scale factor of 1; if you're on a retina device, you might want to use UIGraphicsBeginImageContextWithOptions — Sixten Otto, Feb 02 '15 at 17:49

score 4 · Accepted Answer · answered Feb 06 '15 at 09:06

4

This turned out to be a issue with how I had setup the frame of the self. drawingView and the size of the image inside.

The image was 1005 by 720 the drawingView was 1004.2 by 719.9 so there was a rounding issue. Each time I draw a new line, it would round down.

answered Feb 06 '15 at 09:06

Burf2000

5,001
14
58
117

Any solution for the blurry outline of the stroke??? – Raj Kiran Feb 05 '23 at 07:33

iOS : Drawing on a CGContext eventually blurs

1 Answers1