Patterns

In many ways, creating patterns is similar to creating shadings. Quartz 2D patterns are constructed from a single seed image called a pattern cell. The pattern is an efficient mechanism for repeating that cell on a regularly spaced grid to color an area of the graphics context. The application controls the contents of the cell and the spacing of the cells in both the horizontal and vertical directions. Patterns are drawn in their own coordinate system, and you can also control the mapping between that coordinate system and user space. Your pattern cells can contain any Quartz 2D graphics including images.

Quartz 2D allows you to create two different kinds of patterns, a colored pattern and a stencil pattern. The computer can draw a colored pattern with no additional information other than the colors specified by the cell's image. With a stencil pattern, the pattern cell defines a shape but contains no color information. In this sense it is very much like a resolution independent image mask. When drawing a stencil pattern, your application must supply a color for the pattern to be drawn with.

One challenging thing to grasp about patterns is the fact that Quartz 2D treats a pattern as a custom color in a very specialized color space when drawing. In that sense, a pattern is a lot like the polka-dotted paint that cartoon characters sometimes use. Regardless of where they apply that paint, the polka dot pattern is always reproduced faithfully. Because Quartz 2D treats patterns as special kinds of colors, Quartz 2D can apply them when stroking and filling graphics.

This chapter explores all these characteristics of patterns. You will learn how to use Quartz 2D to create patterns and use them in your drawings.

Cells, Spacing, and Transformations

A cell is simply a rectangular drawing space that contains Quartz 2D graphics. For colored patterns, the cell's graphic will define both color and shape information. For a stencil pattern, the cell's graphic includes shapes but no colors. Figure 13.5 contains a very simple example of a cell that contains some basic line art.

Figure 13.5. A Simple Cell

In this figure, and in some of the figures to follow, a dotted line has been added that shows where the boundary of the cell is. In this case the bounding rectangle of the cell is 48 points square. For this example, and cell, a color cell is used.

If you asked Quartz 2D to draw this cell in a pattern with a cell spacing of 48 points in the x and y directions, the results might look something like this

Figure 13.6. Pattern Drawn with 48 Point Spacing

The left side of this illustration shows the cells with their boundaries marked. The rectangle on the right shows how Quartz 2D might draw this pattern when it is used to fill a rectangle.

One of the drawing options you can change when you create a pattern is the spacing of the cells. You can change the horizontal and vertical spacing of the pattern's cell independently. If you ask Quartz to draw the pattern with a horizontal spacing of 72 points and a vertical spacing of 60 points, the resulting pattern might look something like this

Figure 13.7. Pattern Drawn with a Different Spacing

The computer takes the additional spacing and uses it to insert blank space between the pattern cells.

In this example, the spacing is the same size as the cell's height and width, but you could just as easily use values that are smaller. If the graphics of adjacent cells overlap, Mac OS X will still draw the pattern to the best of its ability. However, the order in which Quartz draws the pattern is undefined. The effect you get from drawing an overlapping pattern to the screen may not match the effect of drawing that pattern to a PDF or the printer.

In addition to changing the spacing of a pattern, you can also apply a transformation to it. The tiled graphic of a pattern is drawn in its own coordinate space, the pattern space. A Quartz 2D application can supply an affine transform that defines how the computer maps the tiled graphic from pattern space to user space. You can use this to achieve patterns where the tiling consists of just about any parallelogram. If you draw the tiling of Figure 13.6 into a rectangle, applying a transformation between pattern space and user space at the same time, the results might look something like Figure 13.8.

Figure 13.8. The Pattern Drawn with a Transformation

When you draw a pattern with a transformation, the mathematics involved can introduce small errors into the spacing of a pattern, particularly when working with bitmap contexts. Quartz can compensate for these spacing errors by slightly warping the cells in-place within the pattern. Your application has some control over whether or not the computer makes this trade-off. Quartz 2D defines three constants that affect the spacing versus shape trade-off.

kCGPatternTilingNoDistortion - This option asks Quartz to keep the shape of the pattern cells consistent as possible. This option comes with a cost of the pattern spacing. Some cells may be off by as much as a pixel in either direction.
kCGPatternTilingConstantSpacingMinimalDistortion - With this option, the computer keeps the spacing of cells constant but might have to distort some of the cells (again, by as much as a pixel in either direction).
kCGPatternTilingConstantSpacing - This option is very similar to the previous one. This option asks Quartz 2D to keep the spacing constant, but it does not perform the rigorous calculations needed to keep the distortion of the cells to a minimum. As a result, this option will allow the computer to draw your pattern more quickly, but individual cells may be distorted more than if you had used kCGPatternTilingConstantSpacingMinimalDistortion.

Colored and Stencil Patterns

In introducing patterns the difference between colored and stencil patterns were briefly discribed. A color pattern is one where the color of the cell is defined as part of that cell. In a stencil pattern, your cell defines the shapes that you want to draw, but all of the shapes in the cell are drawn in the same color. You supply the color when you draw the pattern, not when the cell is created.

The cell defined in Figure 13.5 is a color pattern cell. The cell itself contains two colors, a gray and black. The figures that follow show the effects of using this cell in a colored pattern.

Figure 13.9 shows a stencil cell and several rectangles that are filled with a stencil pattern using that cell. In each rectangle is drawn the stencil pattern with a different color. Each rectangle was drawn using the same pattern, with just a different color supplied each time pattern was drawn.