Stroke

The stroke defines a basic set of rendering attributes for different parts of widget components. The rendering attributes defined by the stroke describe the shape of the mark made by a pen drawn along the outline of some shape and the decorations applied at the ends and joins of path segments of the shape. These rendering attributes include:

The pen width, measured perpendicularly to the pen trajectory.

The decoration applied to the ends of unclosed subpaths and dash segments. The three different decorations are: None, Round, and Square.

The decoration applied at the intersection of two path segments. The three different decorations are: Bevel, Miter, and Round.

The limit to trim a line join that has a Miter decoration. A line join is trimmed when the ratio of miter length to stroke width is greater than the Miter Limit value. The miter length is the diagonal length of the miter, which is the distance between the inside corner and the outside corner of the intersection. The smaller the angle formed by two line segments, the longer the miter length and the sharper the angle of intersection. The default Miter Limit value of 10.0 causes all angles less than 11 degrees to be trimmed. Trimming miters converts the decoration of the line join to bevel.

Dash Array and Dash Phase attributes define how to make a dash pattern by alternating between opaque and transparent sections.

Dash Array is a number of values representing the lengths of the dash segments. Alternate entries in the array represent the user space lengths of the opaque and transparent segments of the dashes. As the pen moves along the outline of the shape to be stroked, the user-space distance that the pen travels is accumulated. The distance value is used to index into the dash array. The pen is opaque when its current cumulative distance maps to an even element of the dash array and transparent otherwise.

The dash phase is a distance that represents an offset into the dashing pattern. In other words, the dash phase defines the point in the dashing pattern that will correspond to the beginning of the stroke.

The image below illustrates how strokes with different dash arrays and phase look like:

Was this page helpful?

Tell us more

Send

Thank you!