Defining winding rules

The enhanced drawing API also introduces the concept of path "winding": the direction for a path. The winding for a path is either positive (clockwise) or negative (counter-clockwise). The order in which the renderer interprets the coordinates provided by the vector for the data parameter determines the winding.

Positive and negative winding

A. Arrows indicate drawing direction

B. Positively wound (clockwise)

C. Negatively wound (counter-clockwise)

Additionally, notice that the Graphics.drawPath() method has an optional third parameter called "winding":

drawPath(commands:Vector.<int>, data:Vector.<Number>, winding:String = "evenOdd"):void

In this context, the third parameter is a string or a constant that specifies the winding or fill rule for intersecting paths. (The constant values are defined in the GraphicsPathWinding class as GraphicsPathWinding.EVEN_ODD or GraphicsPathWinding.NON_ZERO.) The winding rule is important when paths intersect.

The even-odd rule is the standard winding rule and is the rule used by the legacy drawing API. The Even-odd rule is also the default rule for the Graphics.drawPath() method. With the even-odd winding rule, any intersecting paths alternate between open and closed fills. If two squares drawn with the same fill intersect, the area in which the intersection occurs is filled. Generally, adjacent areas are neither both filled nor both unfilled.

The non-zero rule, on the other hand, depends on winding (drawing direction) to determine whether areas defined by intersecting paths are filled. When paths of opposite winding intersect, the area defined is unfilled, much like with even-odd. For paths of the same winding, the area that would be unfilled is filled:

Winding rules for intersecting areas

A.
Even-odd winding rule

B.
Non-zero winding rule

Winding rule names

The names refer to a more specific rule that defines how these fills are managed. Positively wound paths are assigned a value of +1; negatively wound paths are assigned a value of -1. Starting from a point within an enclosed area of a shape, draw a line from that point extending out indefinitely. The number of times that line crosses a path, and the combined values of those paths, are used to determine the fill. For even-odd winding, the count of times the line crosses a path is used. When the count is odd, the area is filled. For even counts, the area is unfilled. For non-zero winding, the values assigned to the paths are used. When the combined values of the path are not 0, the area is filled. When the combined value is 0, the area is unfilled.

Winding rule counts and fills

A.
Even-odd winding rule

B.
Non-zero winding rule

Using winding rules

These fill rules are complicated, but in some situations they are necessary. For example, consider drawing a star shape. With the standard even-odd rule, the shape would require ten different lines. With the non-zero winding rule, those ten lines are reduced to five. Here is the ActionScript for a star with five lines and a non-zero winding rule:

graphics.beginFill(0x60A0FF);
graphics.drawPath( Vector.<int>([1,2,2,2,2]),  Vector.<Number>([66,10, 23,127, 122,50, 10,49, 109,127]),   GraphicsPathWinding.NON_ZERO);

And here is the star shape:

A star shape using different winding rules

A.
Even-odd 10 lines

B.
Even-odd 5 lines

C.
Non-zero 5 lines

And, as images are animated or used as textures on three-dimensional objects and overlap, the winding rules become more important.