3

I have used both UIBezierPath and CAShapeLayer before. But almost every time in conjunction with filling the object contained within the path with color inside. But I would like this time to fill the color outside of the object contained by the UIBezierPath.

I just wrote and ran the following simple code trying to get myself acquainted with the fillRule property:

CAShapeLayer *myLayer = (CAShapeLayer *) self.layer; //size: 320 X 480
UIBezierPath *testPath = [UIBezierPath bezierPathWithOvalInRect:(CGRect){{100, 100}, 100, 100}]; //a simple circle
myLayer.fillRule = kCAFillRuleNonZero; // have tried this as well: kCAFillRuleEvenOdd;
myLayer.path = testPath.CGPath;
myLayer.fillColor = [UIColor whiteColor].CGColor;

But the color is filled nonetheless inside. What I would like to find out is, how can I fill the color outside of the path? If I am using fillRule wrong here, I would like to know if there is other methods that can achieve this. Thanks in advance.

Alex Zavatone
  • 4,106
  • 36
  • 54
Unheilig
  • 16,196
  • 193
  • 68
  • 98

1 Answers1

11

The main problem is that you can't really fill the outside of a shape, since there's no generic way to define what that means. What you need to do is first plot a path around the "outside" of your shape, and then add the circle as a subpath. How you do that depends on which fill rule you want to use. EvenOdd is the easiest:

CAShapeLayer *myLayer = (CAShapeLayer *) self.layer;
UIBezierPath *testPath = [UIBezierPath bezierPathWithRect:self.bounds];
[testPath appendPath:[UIBezierPath bezierPathWithOvalInRect:(CGRect){{100, 100}, 100, 100}]];
myLayer.fillRule = kCAFillRuleEvenOdd;
myLayer.path = testPath.CGPath;
myLayer.fillColor = [UIColor whiteColor].CGColor;

NonZero is a little bit harder because you have to force the path to be counter-clockwise which isn't an option for most of the UIBezierPath convenience methods:

CAShapeLayer *myLayer = (CAShapeLayer *) self.layer;
UIBezierPath *testPath = [UIBezierPath bezierPathWithRect:self.bounds];
UIBezierPath *counterClockwise = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100) radius:100 startAngle:0 endAngle:M_PI clockwise:NO];
[counterClockwise appendPath:[UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100) radius:100 startAngle:M_PI endAngle:0 clockwise:NO]];
[testPath appendPath:counterClockwise];
myLayer.fillRule = kCAFillRuleNonZero;
myLayer.path = testPath.CGPath;
myLayer.fillColor = [UIColor redColor].CGColor;

Depending on how you're constructing your actual path it may not make a difference either way.

If you haven't seen it already, the winding rules documentation has some nice diagrams that I find helpful.

Alex Zavatone
  • 4,106
  • 36
  • 54
  • Hi, hey, you're really good at this. +1. Thanks. For the sake of completeness, would the same thing be possible with `CGMutablePath`s? Thanks in advance. – Unheilig Oct 16 '13 at 12:40
  • Nonetheless, I would mark this an answer first. Hopefully you could elaborate a bit more on `CGMutablePath`s with this. – Unheilig Oct 16 '13 at 12:42
  • 1
    Yeah, the same basic idea applies for `CGPath`s using CGPathAddArc, etc. –  Oct 17 '13 at 01:28
  • Thanks, if you don't mind, can you please provide some code sample with `CGPath` in your answer above? If it's not too much trouble. Thanks in advance. – Unheilig Oct 17 '13 at 01:31