Drawing on Retina display? - ios

Question

I recently made my app compatible with the newest retina iPad, but my drawings get all blurry. I then tried changing the contextWithOptions, but it became really laggy and jagged when I drew. Everything i've tried doesn't work. Any ideas?
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
mouseSwiped = YES;
UITouch *touch = [touches anyObject];
CGPoint currentPoint = [touch locationInView:self.view];
if (UIGraphicsBeginImageContextWithOptions != NULL) {
UIGraphicsBeginImageContextWithOptions((self.view.frame.size), NO, 1);
//becomes laggy if I set it to 0 or 2. ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
} else {
UIGraphicsBeginImageContext(self.view.frame.size);
}
[self.tempDrawImage.image drawInRect:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
CGContextMoveToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);
CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), currentPoint.x, currentPoint.y);
CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
CGContextSetLineWidth(UIGraphicsGetCurrentContext(), brush );
CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), red, green, blue, 1.0);
CGContextSetBlendMode(UIGraphicsGetCurrentContext(),kCGBlendModeNormal);
CGContextStrokePath(UIGraphicsGetCurrentContext());
self.tempDrawImage.image = UIGraphicsGetImageFromCurrentImageContext();
[self.tempDrawImage setAlpha:opacity];
UIGraphicsEndImageContext();
lastPoint = currentPoint;
}
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
if(!mouseSwiped) {
UIGraphicsBeginImageContext(self.view.frame.size);
[self.tempDrawImage.image drawInRect:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
CGContextSetLineWidth(UIGraphicsGetCurrentContext(), brush);
CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), red, green, blue, opacity);
CGContextMoveToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);
CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);
CGContextStrokePath(UIGraphicsGetCurrentContext());
CGContextFlush(UIGraphicsGetCurrentContext());
self.tempDrawImage.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
}
UIGraphicsBeginImageContextWithOptions((self.view.frame.size), NO, 0);
[self.mainImage.image drawInRect:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) blendMode:kCGBlendModeNormal alpha:1.0];
[self.tempDrawImage.image drawInRect:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) blendMode:kCGBlendModeNormal alpha:opacity];
self.mainImage.image = UIGraphicsGetImageFromCurrentImageContext();
self.tempDrawImage.image = nil;
UIGraphicsEndImageContext();
}
Maybe I should change the image when the user ends touches? Any help please?

Answer 1

Correct, you do not want to try to create images for every touch in your view. You simply want to draw your path. Or, more accurately, you want your touch gesture to (a) update your model which consists of a bunch of arrays of paths (each path being, itself, an array of points); and (b) invoke the necessary call to update the UI for the updated model.
To render the drawings, you have two basic approaches:
Create a UIView subclass that has a drawRect method that iterates through your series of paths and draws them; or
Create a CAShapeLayer which uses your path and then do [self.view.layer addSublayer:layer].
Either technique is fine. But note, in neither of these techniques do you do any UIGraphicsBeginImageContext, UIGraphicsGetImageFromCurrentImageContext, and UIGraphicsEndImageContext during the gesture. You only do that if and when you want to save the drawing as an image (presumably well after the user's drawing gesture is done).
But if you do it this way, you'll have absolutely no problem keeping up with the user's gesture, even on retina screens. Manipulating images is a slow and memory-inefficient process, so you only want to do that sparingly.
By the way, if you made this series of paths as the central part of your drawing's model, it opens up other opportunities, too. For example, it will be easy to "undo" a path simply by removing that path object from your model and re-rendering your view. But if you saved it as an image, removing a couple of stokes becomes impractical.
In the end, you have to decide whether your app will be a vector drawing app (where your saved files are arrays of paths, possibly also with the option to save an image, too) or whether it's more of a bitmap editor (where, at the end, you discard the vector information and only save the bitmap). Regardless of which approach you adopt, employing path objects during the gesture will likely make the UI more responsive.