how to fill an arc sector properly NSBezierPath, Objective-C

Question

on my timer app on mac os x I want to mark the areas of my clock with green, yellow, orange and red. See screenshot below. And I want to fill the elapsed time with transparent grey.

But, as you can see at the screenshot, only the arc segment is filled. But I want the whole sector to be filled. The only thing I can do is [thePath fill];

As always, I assume I´m doing something wrong. But what?

---

Call

[self drawTheArcWithColor:path1  :liveAngle1  :[NSColor greenColor ]  :lineTheWidth];

Method

- (void) drawTheArcWithColor:(NSBezierPath*) thePath :(CGFloat) angle :(NSColor*) theColor :(CGFloat) line {

    [thePath setLineWidth:line];
    [thePath appendBezierPathWithArcWithCenter:centerPoint  radius:2+circleHeight/2 startAngle:angle endAngle:angle+90.0f];

    [theColor setStroke];
    [[NSColor grayColor] setFill];
    [thePath fill];
    [thePath stroke];

}

Answer 1

You need to start the path at the center point, then add the arc segment (implicitly adding a line from the center point to the start of the arc segment) and finally close the path (creating an implicit line from the end of the arc segment to the center point).

- (void) drawTheArcWithColor:(NSBezierPath*) thePath :(CGFloat) angle :(NSColor*) theColor :(CGFloat) line {

   [thePath setLineWidth:line];
   [thePath moveToPoint:centerPoint];
   [thePath appendBezierPathWithArcWithCenter:centerPoint  radius:2+circleHeight/2 startAngle:angle endAngle:angle+90.0f];
   [thePath closePath];

   [theColor setStroke];
   [[NSColor grayColor] setFill];
   [thePath fill];
   [thePath stroke];

}