iPad (very) simple drawing

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

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.

Answer 2

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];