Defining winding rules

Flash Player 10 and Adobe AIR 1.5 also introduce 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
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
Winding rules for intersecting areas

A.
Even-odd winding rule

B.
Non-zero winding rule