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

Solution 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

Solution 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

Solution 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

Solution 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);
    }
}

View more solutions

Comments

[phonecoddy]

Thanks, so this basically runs down to the fact, that I have to render a path with one color, before I draw a path with another color? Creating two contexts, one for the blue lines and one for the red ones does not work, because they are using the same context in the end?

[drawnonward]

Yes, for each change in color you must draw the path and clear it. You can do it all in the same context.

[Sumeet Mourya]

What is the transformedPoint in your answer?

[John Riselvato]

Good point, funny how 3 years have gone by and no one thought to ask that. I'm pretty sure you can just use "point" in replace of "transformedPoint". I'll test it later today to verify. @Mady

[Sumeet Mourya]

I have done this yesterday, while checking again the code.... but thanks

[Sumeet Mourya]

Yes, I have fixed that.