iOS Bezier path shows with zig-zags - ios

Question

trying to learn some Quartz graphics and trying to do a smooth drawing. I am trying to combine this 2 tutorials
http://mobile.tutsplus.com/tutorials/iphone/ios-sdk_freehand-drawing/
http://www.raywenderlich.com/18840/how-to-make-a-simple-drawing-app-with-uikit
And so far this is my code
#import "ViewController.h"
#interface ViewController ()
{
UIBezierPath *path;
CGPoint pts[5];
uint ctr;
}
#end
#implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
[self setupData];
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
-(void) setupData
{
[self.mainImage setMultipleTouchEnabled:NO];
[self.tempImage setMultipleTouchEnabled:NO];
path = [UIBezierPath bezierPath];
[path setLineWidth:2.0];
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
ctr = 0;
UITouch *touch = [touches anyObject];
pts[0] = [touch locationInView:self.tempImage];
}
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];
CGPoint p = [touch locationInView:self.tempImage];
ctr++;
pts[ctr] = p;
if (ctr == 4)
{
pts[3] = CGPointMake((pts[2].x + pts[4].x)/2.0, (pts[2].y + pts[4].y)/2.0); // move the endpoint to the middle of the line joining the second control point of the first Bezier segment and the first control point of the second Bezier segment
[path moveToPoint:pts[0]];
[path addCurveToPoint:pts[3] controlPoint1:pts[1] controlPoint2:pts[2]]; // add a cubic Bezier from pt[0] to pt[3], with control points pt[1] and pt[2]
[self draw];
[self.mainImage setNeedsDisplay];
[self.tempImage setNeedsDisplay];
// replace points and get ready to handle the next segment
pts[0] = pts[3];
pts[1] = pts[4];
ctr = 1;
}
}
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
[path removeAllPoints];
ctr = 0;
UIGraphicsBeginImageContext(self.tempImage.frame.size);
[self.mainImage.image drawInRect:CGRectMake(0, 0, self.tempImage.frame.size.width, self.tempImage.frame.size.height) blendMode:kCGBlendModeNormal alpha:1.0];
[self.tempImage.image drawInRect:CGRectMake(0, 0, self.tempImage.frame.size.width, self.tempImage.frame.size.height) blendMode:kCGBlendModeNormal alpha:1.0];
self.mainImage.image = UIGraphicsGetImageFromCurrentImageContext();
self.tempImage.image = nil;
[self.tempImage setNeedsDisplay];
[self.mainImage setNeedsDisplay];
UIGraphicsEndImageContext();
}
- (void)draw
{
UIGraphicsBeginImageContext(self.tempImage.frame.size);
[self.tempImage.image drawInRect:CGRectMake(0, 0, self.tempImage.frame.size.width, self.tempImage.frame.size.height)];
pts[3] = CGPointMake((pts[2].x + pts[4].x)/2.0, (pts[2].y + pts[4].y)/2.0); // move the endpoint to the middle of the line joining the second control point of the first Bezier segment and the first control point of the second Bezier segment
[path moveToPoint:pts[0]];
[path addCurveToPoint:pts[3] controlPoint1:pts[1] controlPoint2:pts[2]]; // add a cubic Bezier from pt[0] to pt[3], with control points pt[1] and pt[2]
[path stroke];
CGContextSetBlendMode(UIGraphicsGetCurrentContext(),kCGBlendModeNormal);
// CGContextStrokePath(UIGraphicsGetCurrentContext());
self.tempImage.image = UIGraphicsGetImageFromCurrentImageContext();
[self.tempImage setAlpha:1.0];
UIGraphicsEndImageContext();
}
The corners looked much better, but the lines itself look like they have zigzags in them. Would appreciate if you can point me to my mistake. Thanks

Answer 1

I think the image you're drawing into is non-retina sized because self.tempImage.frame.size returns the frame size in points not pixels. Then when you draw the image to the screen it is up-sized and pixelated. If you make the buffer image match the pixel size of the component on screen then you should be fine.