iPhone CGContext: drawing two lines with two different colors

Question

I am having some troubles using the CGContext with an iPhone app. I am trying to draw several lines with different colors, but all the lines always end up having the color which was used last. I tried several approaches, but haven't been lucky.

I set up a small sample project to deal with that issue. This is my code, I use in the drawRect method. I am trying to draw a red and a blue line:

- (void)drawRect:(CGRect)rect{
    NSLog(@"drawrect!");
    CGContextRef bluecontext = UIGraphicsGetCurrentContext(); 
    CGContextSetLineWidth(bluecontext, 2.0);
    CGContextSetStrokeColorWithColor(bluecontext, [UIColor blueColor].CGColor);
    CGContextMoveToPoint(bluecontext, 1, 1);
    CGContextAddLineToPoint(bluecontext, 100, 100);
    CGContextSetStrokeColorWithColor(bluecontext, [UIColor redColor].CGColor);
    CGContextAddLineToPoint(bluecontext, 200, 100);
    CGContextStrokePath(bluecontext);
}

thanks for your help

Answer 1

Insert this code just before you set the stroke color the second time:

CGContextStrokePath(bluecontext);
CGContextBeginPath(bluecontext);

All the AddLine and AddOther calls are building a path. The path is drawn with a call like StrokePath, using the most recently set colors and other attributes. You are trying to draw two separate paths, so you must call Begin and Stroke for each path. Begin is sort of implicit when you start drawing, although it does not hurt to call it yourself. The basic flow of drawing is:

CGContextBeginPath(bluecontext); // clears any previous path
// add lines, curves, rectangles, etc...
CGContextStrokePath(bluecontext); // renders the path

Answer 2

Thats what you need.

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextClearRect(context, rect);
CGContextSetLineWidth(context, 2.0);

CGContextBeginPath(context);
CGContextSetStrokeColorWithColor(context, [UIColor orangeColor].CGColor);
CGContextMoveToPoint(context, 1, 1);
CGContextAddLineToPoint(context, 100, 100);
CGContextStrokePath(context); // and draw orange line}

CGContextBeginPath(context);
CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
CGContextMoveToPoint(context, 100, 100);
CGContextAddLineToPoint(context, 200, 100);     
CGContextStrokePath(context); // draw blue line

Answer 3

I think this could be working.

CGContextRef bluecontext = UIGraphicsGetCurrentContext(); 
CGContextSetLineWidth(bluecontext, 2.0);
CGContextSetStrokeColorWithColor(bluecontext, [UIColor blueColor].CGColor);
CGContextMoveToPoint(bluecontext, 1, 1);
CGContextAddLineToPoint(bluecontext, 100, 100);

CGContextStrokePath(bluecontext); // draw blue line


CGContextSetStrokeColorWithColor(bluecontext, [UIColor redColor].CGColor);
CGContextAddLineToPoint(bluecontext, 200, 100);

CGContextStrokePath(bluecontext); // and draw red line

Answer 4

If you are interested in the way it looks in a loop:

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

    CGPoint startingPoint = [[pointsArray objectAtIndex:0] CGPointValue];
    CGContextMoveToPoint(context, startingPoint.x, startingPoint.y); //start at this point

    for (int i = 1; i < [pointsArray count]; i++) {
        CGContextBeginPath(context);
        //start at the previous point
        CGContextMoveToPoint(context, 
               [[pointsArray objectAtIndex:i-1] CGPointValue].x, 
               [[pointsArray objectAtIndex:i-1] CGPointValue].y);

        CGPoint point = [[pointsArray objectAtIndex:i] CGPointValue];
        if (point.y < 50) { // if y is less then 50 use red color
            CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
        } else { // else use blue color
            CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);

        }
        CGContextAddLineToPoint(context, point.x, point.y); //draw to this point
        CGContextStrokePath(context);
    }
}