iOS drawing imitate flat tip pen - ios

Question

I'm creating a drawing app and I want to simulate a flat tip pen. Surprisingly it turned to pretty difficult task. This is my solution:
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];
CGPoint currentPoint = [touch locationInView:self.drawingImageView];
currentPoint = CGPointMake(roundf(currentPoint.x), roundf(currentPoint.y));
UIGraphicsBeginImageContext(self.drawingImageView.frame.size);
[self.drawingImageView.image drawInRect:CGRectMake(0, 0, self.drawingImageView.frame.size.width, self.drawingImageView.frame.size.height)];
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextMoveToPoint (ctx, lastPoint.x + 8.f, lastPoint.y - 8.f);
CGContextAddLineToPoint(ctx, currentPoint.x + 8.f, currentPoint.y - 8.f);
CGContextAddLineToPoint(ctx, currentPoint.x - 8.f, currentPoint.y + 8.f);
CGContextAddLineToPoint(ctx, lastPoint.x - 8.f, lastPoint.y + 8.f);
CGContextAddLineToPoint(ctx, lastPoint.x + 8.f, lastPoint.y - 8.f);
CGContextClosePath(ctx);
CGContextSetRGBFillColor(ctx, 0, 0, 0, 1);
CGContextDrawPath(ctx, kCGPathFillStroke);
[self.drawingImageView performSelectorInBackground:#selector(setImage:) withObject:UIGraphicsGetImageFromCurrentImageContext()];
UIGraphicsEndImageContext();
lastPoint = currentPoint;
}
This is how it looks:
As you can see, the edges are not smooth. I'd like to use UIBezierPath instead but I didn't find a way to achieve flat tip pen effect using UIBezierPath. Maybe there are some ways to improve my code or any other approaches (maybe UIBezierPath)?
The only app with such drawing style that I could find is the app called "Khattat". It's on arabic, you should tap second button on the main screen to open painting. It's a perfect example of what I want.

Answer 1

This is a pretty common problem.
The problem is with the line
UIGraphicsBeginImageContext(self.drawingImageView.frame.size);
What this does is create a new transparent image context with a size of your image view, but a scale of 1.0. Because of this scale - any drawing done in it will have to be upsampled to be displayed on a 2x or 3x display - hence your drawing coming out blurry.
The fix is amazingly simple. You can just use
UIGraphicsBeginImageContextWithOptions(drawingImageView.frame.size, NO, 0.0);
By passing 0.0 into the scale argument, Core Graphics will automatically detect the scale of the screen, and set the context's scale to match. Therefore any drawing you do in it will be done at the correct resolution.
Also, I just noticed the line
[self.drawingImageView performSelectorInBackground:#selector(setImage:) withObject:UIGraphicsGetImageFromCurrentImageContext()];
This doesn't sound like a great idea. If you look at the UIView documentation, you'll see Apple says:
Manipulations to your application’s user interface must occur on the main thread. Thus, you should always call the methods of the UIView class from code running in the main thread of your application.
Therefore you should be doing
self.drawingImageView.image = UIGraphicsGetImageFromCurrentImageContext()
instead.
In regards to your comments about using a UIBezierPath - I don't see any obvious advantages that this change will bring you - drawing the path into the context yourself is just as direct as using the UIBezierPath methods for drawing.
However if you still want to, you can of course use a UIBezierPath instead - you'll want to do something like the following:
UITouch *touch = [touches anyObject];
CGPoint currentPoint = [touch locationInView:self];
currentPoint = CGPointMake(roundf(currentPoint.x), roundf(currentPoint.y));
UIGraphicsBeginImageContextWithOptions(drawingImageView.frame.size, NO, 0.0);
[drawingImageView.image drawInRect:CGRectMake(0, 0, drawingImageView.frame.size.width, drawingImageView.frame.size.height)];
UIBezierPath* path = [UIBezierPath bezierPath];
[path moveToPoint:(CGPoint){lastPoint.x + 8.f, lastPoint.y - 8.f}];
[path addLineToPoint:(CGPoint){currentPoint.x + 8.f, currentPoint.y - 8.f}];
[path addLineToPoint:(CGPoint){currentPoint.x - 8.f, currentPoint.y + 8.f}];
[path addLineToPoint:(CGPoint){lastPoint.x - 8.f, lastPoint.y + 8.f}];
[path addLineToPoint:(CGPoint){lastPoint.x + 8.f, lastPoint.y - 8.f}];
[[UIColor blackColor] set];
[path fill];
drawingImageView.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
lastPoint = currentPoint;