iPad (very) simple drawing - iphone

Question

I'm trying to implement a very simple drawing view in my app. This is only a small part of my app but it's turning into a real hassle. This is what I have so far, but all it's displaying right now is morse code like dots and lines.
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
NSArray* paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory,
NSUserDomainMask, YES);
NSString *docsPath = [paths objectAtIndex:0];
NSString *savePath = [NSString stringWithFormat:#"%#/notePadImage.jpg",docsPath];
NSData *data = [NSData dataWithContentsOfFile:savePath];
UIImage *image = [UIImage imageWithData:data];
if (image == nil) {
NSString *pathToBlank = [[NSBundle mainBundle]pathForResource:#"blankNotePadPage" ofType:#"png"];
NSData *data = [NSData dataWithContentsOfFile:pathToBlank];
image = [UIImage imageWithData:data];
}
arrayOfTouches = [[NSMutableArray alloc] initWithCapacity:10];
self.drawImage.image = image;
mouseMoved = 0;
[self.view bringSubviewToFront:closeButton];
[self.view bringSubviewToFront:clearButton];
self.timer = [NSTimer scheduledTimerWithTimeInterval:.02 target:self selector:#selector(drawIt) userInfo:nil repeats:YES];
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];
[arrayOfTouches addObject:touch];
}
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];
[arrayOfTouches addObject:touch];
}
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
}
-(void) drawIt {
NSMutableArray *tempArray = [NSMutableArray arrayWithArray:arrayOfTouches];
[arrayOfTouches removeAllObjects];
if ([tempArray count]>1) {
[arrayOfTouches removeAllObjects];
CGPoint point1 = [[tempArray objectAtIndex:0] previousLocationInView:self.view];;
CGPoint point2;
CGPoint point3;
for (int i = 0; i < [tempArray count]-1;i = i+1) {
UIGraphicsBeginImageContext(self.view.frame.size);
[drawImage.image drawInRect:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 3.0);
CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), 0.0, 0.0, 0.0, 1.0);
CGContextMoveToPoint(UIGraphicsGetCurrentContext(), point1.x, point1.y);
CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), point2.x, point2.y);
CGContextStrokePath(UIGraphicsGetCurrentContext());
CGContextFlush(UIGraphicsGetCurrentContext());
drawImage.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
[self.view bringSubviewToFront:closeButton];
[self.view bringSubviewToFront:clearButton];
point1 = point2;
}
}
}

Answer 1

One of my apps also needed some simple drawing. Here is a slightly modified version of it. It works basically like hotpaw2 describes. I created a "canvas" view that handles all the drawing and I just add it wherever it's needed.
The speed is fine for my purposes.
CanvasView.h:
#interface CanvasView : UIView {
NSMutableArray *points;
}
#property (nonatomic, retain) NSMutableArray *points;
#end
CanvasView.m:
#import "CanvasView.h"
#implementation CanvasView
#synthesize points;
- (id) initWithFrame:(CGRect)frame {
if (self = [super initWithFrame:frame]) {
self.backgroundColor = [UIColor blueColor];
}
return self;
}
-(void)drawRect:(CGRect)rect
{
if (self.points.count == 0)
return;
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetRGBStrokeColor(context, 1.0, 1.0, 1.0, 1.0); //white
CGContextSetLineWidth(context, 1.0);
CGPoint firstPoint = [[self.points objectAtIndex:0] CGPointValue];
CGContextBeginPath(context);
CGContextMoveToPoint(context, firstPoint.x, firstPoint.y);
int i = 1;
while (i < self.points.count)
{
CGPoint nextPoint = [[self.points objectAtIndex:i] CGPointValue];
if (nextPoint.x < 0 && nextPoint.y < 0)
{
CGContextDrawPath(context, kCGPathStroke);
if (i < (self.points.count-1))
{
CGContextBeginPath(context);
CGPoint nextPoint2 = [[self.points objectAtIndex:i+1] CGPointValue];
CGContextMoveToPoint(context, nextPoint2.x, nextPoint2.y);
i = i + 2;
}
else
i++;
}
else
{
CGContextAddLineToPoint(context, nextPoint.x, nextPoint.y);
i++;
}
}
CGContextDrawPath(context, kCGPathStroke);
}
-(void)dealloc
{
[points release];
[super dealloc];
}
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [[event touchesForView:self] anyObject];
CGPoint location = [touch locationInView:self];
if (self.points == nil)
{
NSMutableArray *newPoints = [[NSMutableArray alloc] init];
self.points = newPoints;
[newPoints release];
}
[self.points addObject:[NSValue valueWithCGPoint:(location)]];
}
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [[event touchesForView:self] anyObject];
CGPoint location = [touch locationInView:self];
[self.points addObject:[NSValue valueWithCGPoint:(location)]];
[self setNeedsDisplay];
}
-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [[event touchesForView:self] anyObject];
CGPoint location = [touch locationInView:self];
[self.points addObject:[NSValue valueWithCGPoint:(location)]];
CGPoint endPoint = CGPointMake(-99, -99); //"end of path" indicator
[self.points addObject:[NSValue valueWithCGPoint:(endPoint)]];
[self setNeedsDisplay];
}
#end
Adding the canvasView where it's needed:
CanvasView *cv = [[CanvasView alloc] initWithFrame:CGRectMake(0, 0, 320, 640)];
[self.view addSubview:cv];
[cv release];

Answer 2

Don't draw while handling touches. It will slow down the touch handler so much you might get the connect-the-dots-effect you are seeing.
Save the touch coordinates in an array and plan to draw them later.
Look at some simple animation tutorials for how to draw in a drawRect based on a setNeedsDisplay called by an animation UITimer or CADisplayLink. Draw all your line segments there at a more suitable rate.