Question

I am building a drawing type tool into my app.

It takes a touch points from the user and draws lines between the points. If the user creates 3 touch points or greater, it joins the last point to the first point.

An extract of the code is :

startPoint = [[secondDotsArray objectAtIndex:i] CGPointValue];
    endPoint = [[secondDotsArray objectAtIndex:(i + 1)] CGPointValue];
    CGContextAddEllipseInRect(context,(CGRectMake ((endPoint.x - 5.7), (endPoint.y - 5.7)
                                                   , 9.0, 9.0)));
    CGContextDrawPath(context, kCGPathFill);
    CGContextMoveToPoint(context, startPoint.x, startPoint.y);
    CGContextAddLineToPoint(context, endPoint.x, endPoint.y);
    CGContextStrokePath(context);

I wish to “color in ” the area contained within these paths.
What should I look at?

Answer 1

You need to use the CGContextFillPath API. You should be careful of how you define the path, though:

• Start by calling CGContextMoveToPoint on the initial point
• Proceed by drawing all segments except the closing one with CGContextAddLineToPoint
• Close the path with CGContextClosePath. Do not add line to point on the final segment.

The call of CGContextFillPath will produce a path colored with the fill color that you have previously set.

Here is an example:

CGPoint pt0 = startPoint = [[secondDotsArray objectAtIndex:0] CGPointValue];
CGContextMoveToPoint(context, pt0.x, pt0.y);
for (int i = 1 ; i < noOfDots ; i++) {
    CGPoint next = [[secondDotsArray objectAtIndex:i] CGPointValue];
    CGContextAddLineToPoint(context, next.x, next.y);
}
CGContextClosePath(context);
CGContextFillPath(context);