How to mask parts of overlapping UIBezierPaths

Question

I'm drawing a graph where there is a dot at each graph point:

To draw the graph line I'm using UIBezierPath:moveToPoint: and to draw the dots I'm drawing two circles at each point using UIBezierPath:makeCircleAtLocation:.

How can I remove the graph line where it passes through each dot? So that the dot is just pure white inside?

TIA

The code:

- (void) addDotAtLocation:(CGPoint)location radius:(CGFloat)radius withInnerColor: (UIColor*) innerColor andOuterColor: (UIColor*) outerColor
{
    [outerColor setFill];
    UIBezierPath *circle = [self makeCircleAtLocation:location  radius:5.0f];
    [circle fill];
    [innerColor setFill];
    circle = [self makeCircleAtLocation:location  radius:4.0f];
    [circle fill];
}


- (UIBezierPath *) makeCircleAtLocation:(CGPoint)location radius:(CGFloat)radius
{
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path addArcWithCenter:location
                    radius:radius
                startAngle:0.0
                  endAngle:M_PI * 2.0
                 clockwise:YES];

     return path;
}



UIBezierPath *barGraph = [UIBezierPath bezierPath];    
CGPoint plotPoint = ...
[barGraph moveToPoint:plotPoint];

for (int ii = 1; ii < [self.testData count]; ++ii)
{
    dataPoint = self.testData[ii];
    x = [self convertTimeToXPoint:dataPoint.time];
    y = [self convertDataToYPoint:dataPoint.dataUsage];
    plotPoint = CGPointMake(x, y);
    [barGraph addLineToPoint:plotPoint];
    [self addDotAtLocation:plotPoint radius:5.0 withInnerColor:[UIColor whiteColor] andOuterColor:[UIColor blackColor]];
}

Answer 1

Try to distinguish in your mind between constructing a bezier path (it's just a path) and drawing the path (stroking and/or filling). The order in which you draw is the "layering" order. So you want to stroke your graph lines - all of your graph lines - first, and then and only then you want to stroke and fill your circles.

That is not what you are doing now. You are constructing the graph bezier path first, but then you are stroking and filling your circles and only then you stroke the graph path so of course it ends up "in front".

So, here's your code (condensed for clarity):

UIBezierPath *barGraph = [UIBezierPath bezierPath];    
[barGraph moveToPoint:plotPoint]; // this does NOT draw
for (int ii = 1; ii < [self.testData count]; ++ii)
{
    // ...
    [barGraph addLineToPoint:plotPoint]; // this does NOT draw
    [self addDotAtLocation:...]]; // THIS DRAWS!
}
// and you see we still have not drawn any of the graph lines yet

Thus you are clearly drawing in the opposite of the order you desire.

Answer 2

[circle fill];

Being circle the name of your path