Really weird drawRect behavior??

Question

I have a very simple app where a user can draw. A user taps 3 times and an angle will be drawn at those 3 taps. At the location of each tap, there is a circle. Below is a picture of what it looks like:

On the first tap, only a circle is created because there are no other points to connect to (as it should). On the second tap it connects a line (as it should) from the first to second tap. On the third tap, it gets weird and connects from edge of the second circle (should be in the center?) to the third tap. Any ideas why on earth this is happening??

After 3 taps:

Another example of 3 taps:

This is how i'm drawing:

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    UITouch *touch = [touches anyObject];
    [self setOpacity:o];
    if (CGPointEqualToPoint(first, CGPointZero)) {
        first = [touch locationInView:self];
    }
    else if (!CGPointEqualToPoint(first, CGPointZero) && CGPointEqualToPoint(second, CGPointZero)) {
        second = [touch locationInView:self];
    }
    else if (!CGPointEqualToPoint(first, CGPointZero) && !(CGPointEqualToPoint(second, CGPointZero)) && CGPointEqualToPoint(third, CGPointZero)) {
        third = [touch locationInView:self];
    }
    else {
        first = [touch locationInView:self];
        second = CGPointZero;
        third = CGPointZero;
    }

    [self setNeedsDisplay];
}

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();

if (!CGPointEqualToPoint(first, CGPointZero)) {
    CGRect rectangle = CGRectMake(first.x - 10, first.y - 10, 20, 20);
    CGContextAddEllipseInRect(context, rectangle);
    CGContextMoveToPoint(context, first.x, first.y);

    if (!CGPointEqualToPoint(second, CGPointZero)) {
        CGContextAddLineToPoint(context, second.x, second.y);
        CGRect rectangle2 = CGRectMake(second.x - 10, second.y - 10, 20, 20);
        CGContextAddEllipseInRect(context, rectangle2);
    }

    if (!CGPointEqualToPoint(third, CGPointZero)) {
        CGContextAddLineToPoint(context, third.x, third.y);
        CGRect rectangle3 = CGRectMake(third.x - 10, third.y - 10, 20, 20);
        CGContextAddEllipseInRect(context, rectangle3);
        }

        CGContextStrokePath(context);
    }
}

Answer 1

Because your current position is changed after you draw second ellipse CGContextAddEllipseInRect(context, rectangle2); Try this:

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();

    UIColor * w = [UIColor whiteColor] ;
    UIColor * r = [UIColor redColor] ;
    CGContextSetStrokeColorWithColor(context, w.CGColor) ;
    CGContextSetFillColorWithColor(context, r.CGColor) ;

    if (!CGPointEqualToPoint(first, CGPointZero)) {
        CGRect rectangle = CGRectMake(first.x - 10, first.y - 10, 20, 20);
        CGContextAddEllipseInRect(context, rectangle);
        CGContextMoveToPoint(context, first.x, first.y);

        if (!CGPointEqualToPoint(second, CGPointZero)) {
            CGContextAddLineToPoint(context, second.x, second.y);
            CGRect rectangle2 = CGRectMake(second.x - 10, second.y - 10, 20, 20);
            CGContextAddEllipseInRect(context, rectangle2);
            CGContextMoveToPoint(context, second.x, second.y);
        }

        if (!CGPointEqualToPoint(third, CGPointZero)) {
            CGContextAddLineToPoint(context, third.x, third.y);
            CGRect rectangle3 = CGRectMake(third.x - 10, third.y - 10, 20, 20);
            CGContextAddEllipseInRect(context, rectangle3);
        }

        CGContextStrokePath(context);
    }
}