Draw a polygon with one color for a stroke and another for filling?

Question

I am having problems drawing some lines that are stroking with color and then filling their insides (they make a polygon) with another.

UIColor *houseBorderColor = [UIColor colorWithRed:(170/255.0) green:(138/255.0) blue:(99/255.0) alpha:1]; CGContextSetStrokeColorWithColor(context, houseBorderColor.CGColor); CGContextSetLineWidth(context, 3); // Draw the polygon CGContextMoveToPoint(context, 20, viewHeight-19.5); CGContextAddLineToPoint(context, 200, viewHeight-19.5); // base CGContextAddLineToPoint(context, 300, viewHeight-119.5); // right border CGContextAddLineToPoint(context, 120, viewHeight-119.5); CGContextAddLineToPoint(context, 20, viewHeight-19.5); // Fill it CGContextSetRGBFillColor(context, (248/255.0), (222/255.0), (173/255.0), 1); //CGContextFillPath(context); // Stroke it CGContextStrokePath(context); 

With the comment of CGContextStrokePath I get this result:

But if I uncomment CGContextStrokePath and fill the polygon, the color fills the strokes:

How do you achieve this result (without repeating the entire drawing process twice):

Answer 1

you can use

 CGContextDrawPath(context, kCGPathFillStroke); 

instead

 CGContextFillPath(context); CGContextStrokePath(context); 

The problem is that both CGContextFillPath() and CGContextStrokePath(context) clear the current path so that only the first operation succeeds and the second operation does not draw anything. CGContextDrawPath() combines fill and stroke without clearing the path between them.

Answer 2

Using UIBezierPath, you can do this:

 UIBezierPath *path = [[UIBezierPath alloc] init]; [path moveToPoint:CGPointMake(20, viewHeight-19.5)]; [path addLineToPoint:CGPointMake(200, viewHeight-19.5)]; [path addLineToPoint:CGPointMake(300, viewHeight-119.5)]; [path addLineToPoint:CGPointMake(120, viewHeight-119.5)]; [path addLineToPoint:CGPointMake(20, viewHeight-19.5)]; [[UIColor colorWithRed:(248/255.0) green:(222/255.0) blue:(173/255.0) alpha:1.0] setFill]; [path fill]; [[UIColor colorWithRed:(170/255.0) green:(138/255.0) blue:(99/255.0) alpha:1.0] setStroke]; [path stroke]; 

Answer 3

When you execute or fill a path in a context, the context deletes the path for you (it expects it to be executed). You must add the path again if you want to fill it after stroking.

It is probably best to create a local variable CGPathRef path , build a path, add it, hit, add it again, fill it.

 CGMutablePathRef path = CGPathCreateMutable(); CGPathMoveToPoint(path, nil, 20, viewHeight-19.5); CGPathAddLineToPoint(path nil, 200, viewHeight-19.5); // base CGPathAddLineToPoint(path nil, 300, viewHeight-119.5); // right border CGPathAddLineToPoint(path nil, 120, viewHeight-119.5); CGPathAddLineToPoint(path nil, 20, viewHeight-19.5); CGContextAddPath(context, path); CGContextFillPath(context); // possibly modify the path here if you need to CGContextAddPath(context, path); CGContextStrokePath(context);