21

Can anybody explain how the usesEvenOddFillRule property of UIBezierPath works and where it can be used?

I know I may get Vote downs but I really didn't get the explanation in Apple's docs.

Jesse Rusak
  • 56,530
  • 12
  • 101
  • 102
Developer
  • 6,375
  • 12
  • 58
  • 92
  • 2
    The "even-odd fill rule" and "non-zero fill rule" are known concepts from computer graphics. It's reasonably easy to search for them. – millimoose Feb 12 '13 at 20:06
  • @millimoose Thanks for your comment but it would be great if you can provide any link to that information. – Developer Feb 12 '13 at 20:15
  • 4
    Ug, I just hate when someone says "go search for it". The point of SO is to ask questions - NOT just questions that can be looked up. Either HELP, or go away. Anyway, glad this question was here - I'm finding it helpful! :-) – colinta Jan 13 '15 at 23:51

2 Answers2

24

The even-odd fill rule is one way to determine what regions of a path are "inside" the path vs "outside" the path, which is important to know when filling the interior of the path. They usually only differ when a path cuts holes in itself. The even-odd rule will usually not shade those regions, while the other option usually will.

The even-odd rule is simply this:

As you progress in a straight line across the canvas containing the path, count the number of times you cross the path. If you have crossed an odd number of times, you are "inside" the path. If you have crossed an even number of times, you are outside the path.

Thus, if your path consists of two concentric circles in a bulls-eye shape, the even-odd rule would consider the area between the two circles to be "inside" and the area in the center to be "outside".

Another option is called the non-zero winding rule. (This is used if usesEvenOddFillRule is NO). The non-zero again considers a straight line across the path, but counts the intersections a bit differently. It takes into account the direction the path was drawn in. (i.e. a counter-clockwise circle is not the same as a clockwise circle.) It is thus:

As you progress in a straight line across the canvas containing the path, keep a counter, starting at 0. Every time you cross a portion of the path where the path progresses from your left to your right (as observed from the line crossing the path), add one to the counter. Every time you cross a line where the path progresses from your right to your left, subtract one from the counter. If the counter is non-zero, you are inside the path. Otherwise, you are outside.

Thus, in the same concentric circles example, if both circles were drawn in the same direction, then the whole region, both inside and outside the center circle, would be considered "inside' the path. If the circles were drawn in opposite directions, the center region would be considered "outside" the path, as in the even-odd rule.

BJ Homer
  • 48,806
  • 11
  • 116
  • 129
23

A good explanation of fill rules in computer graphics is given here. (This is in a .NET reference, but the exact same principles apply to Quartz.)

http://msdn.microsoft.com/en-us/library/system.windows.media.fillrule.aspx

In short, the even-odd fill rule means that every edge will show up in the output graphics (which may result in a single filled path having "holes" in it), while the nonzero fill rule will, in most cases, end up meaning that a drawn shape is mostly solid even if it contains self-intersections.

A simple example can be seen below. The left image is using even-odd fill rules, and the right one is using nonzero fill rules.

an example of fill rules