oreilly.comSafari Books Online.Conferences.


AddThis Social Bookmark Button

Introduction to Quartz 2D for QuickDraw Programmers
Pages: 1, 2

Quartz Drawing Primitives

Quartz understands three different categories of drawing primitives: line art, sampled images, and text. At a fundamental level, text drawing is really just a special case of line art, but the proper imaging of text is a complex enough topic that text drawing receives separate treatment in the API.

Line Art

In order to work with line art, Quartz has the concept of the path. A path is nothing more than a set of infinitely thin lines and curves joined together. Given a path, an application can perform two basic drawing operations. The application can ask Quartz to fill the area inside the path, or it can ask that the computer draw a line that follows the path (this operation is called stroking the path).

These two primitive operations are deceptively flexible, as Quartz offers a rich set of variations to even these simple operations. For example, a Quartz 2D application has broad latitude in selecting the type of "paint" used when drawing: it can change the definitions on what constitutes the "inside" of a path when filling, or it can select different options on how the ends of the stroked path should be drawn.

The fundamental tool used to create paths is the Bézier curve. These curves, named in honor of the famous French CAD pioneer Pierre Bézier, were selected for the imaging model because they offer the artist a good level of flexibility, and they offer the computer elegant mathematics for number crunching. For better or worse, much of the literature on Bézier curves concerns itself with the elegance of the mathematics involved and leaves little room for understanding how to use those curves when drawing. However, the beauty of Bézier curves, and an important reason they are so helpful in computer graphics, is the fact that you don't have to understand the mathematics behind the curves in order to make use of them!

An application specifies the Bézier curves as a series of short curve segments. In the most common case, there are four points in user space that make up each segment. The curve is set up so that, once the numbers are crunched, the path passes through the first point and the last point. The curve is pulled away from a straight line by the two other points in a way that is both mathematically elegant and ultimately intuitive. In order to develop that intuition, QuickDraw programmers who are new to Quartz, and don't care much about the mathematics involved, can get a good sense of how to use Bézier curves by writing a few simple programs and studying the ways that changing the positions of the points in a segment changes the resulting curve.

Sampled Images

The term "sampled images" is a fancy label that encompasses the familiar QuickDraw PixMap. The idea is that you have a large array of pixels where the color of each pixel is specified using some combination of color values from a given color space. Each individual set of color values is called a color sample, and the term "sampled images" follows from that.

In the case of QuickDraw images, the colors are usually specified using either an indexed color space, using the port's color map to specify the individual color samples, or as direct samples in the device's RGB color space. While most of the sampled images you are likely to encounter through Quartz come from grayscale or an RGB color spaces, Quartz is not limited to those spaces alone. Quartz can also handle sampled images that use a CMYK-based color space, or specialized ICC color profile spaces as well.

The underlying API makes it easy to use images from many different color spaces; the application can draw a sampled image simply by specifying where in user space that sampled image should appear. As with the primitive line art operations, Quartz provides a wealth of options related to how the image should be drawn at that point. For example, if drawing the image requires that the computer scale the image up or down, a Quartz application can specify an "interpolation quality" to identify how it would like the destination device to extrapolate the extra pixels that must be drawn. If the image uses a different color space than the destination device, the application also has the option of specifying how colors should be mapped from one color space to another. The primitive drawing operation of "draw this image here" becomes a powerful tool in the hands of Quartz 2D.


The text-handling capabilities of Quartz are much lower-level than those found in the more complex systems of ATSUI and the Cocoa text system. Nevertheless, Quartz provides all of the primitive operations necessary for those more complicated environments to draw their text on a broad selection of output devices. The primary difference between working with text through Quartz 2D and drawing text with QuickDraw is the fact that QuickDraw works with text strings, at the character level, while Quartz 2D is primarily a tool for drawing glyphs.

The difference between characters and glyphs is a large enough topic to merit an article of its own. Fundamentally, however, you may think of the difference as the difference between an "A" drawn in the Helvetica font versus an "A" drawn in the Times font. Both of these represent the exact same character, the letter A, but the glyphs, the actual pictures, used to represent that character are very different.

In the days of QuickDraw, the act of converting a string of characters into glyphs was very straightforward. With Unicode, multi-directional international text, and complex and beautiful typography, that mapping is now much more complex. Quartz 2D does provide a rudimentary primitive for converting characters to glyphs, but for the most part, Quartz leaves the complex typography to ATSUI or Cocoa text. Instead, Quartz concerns itself primarily with knowing which font it should pull glyphs from, and where an application would like to draw those glyphs in user space. The power of fine control given by the Quartz 2D coordinate system combines with the richness of the color capabilities of Quartz to allow precise typography across the full range of Quartz-compatible devices.

Other Drawing Operations

Related Reading

Cocoa in a Nutshell
A Desktop Quick Reference
By Michael Beam, James Duncan Davidson

Line art, sampled images, and text are the primitive drawing operations in Quartz, but Quartz offers other drawing commands that, for the most part, combine those primitives in various ways. One such mechanism that will be familiar to QuickDraw programmers is the concept of the clipping path. Just as a QuickDraw port contains a clipping region, the Quartz Context has a clipping path.

The same drawing primitives that construct line art can be used to create a mask, or clipping path, for the drawing commands issued in a given context. Any drawing that an application does in the context gets clipped to the inside of the current clipping path. Unlike a QuickDraw region, a pixel-based structure, the Quartz clipping path can draw upon the full power of the floating-point user space coordinate system to provide smoothly clipped edges.

Quartz supplements the drawing primitives with a few higher-level drawing systems that an application can take advantage of. The CGShading drawing system offers a way to create smoothly varying color gradients that maintain their integrity on a broad range of output devices. CGPattern allows an application to efficiently repeat a series of Quartz drawing commands in a grid-like pattern in a way that will be very familiar to QuickDraw programmers who use pixel patterns. The Quartz 2D contains routines for transparent layering of graphics, efficient drop shadows (in come contexts), and the other drawing primitives that give Mac OS X its refreshing appearance.

Final Thoughts

QuickDraw has reached the limits of its evolution, and Apple has deprecated that technology in favor of Quartz 2D for future versions of Mac OS X. Since they try to serve similar goals, QuickDraw and Quartz are similar in many ways.

However, their differences can be strange and exciting for the uninitiated. The transition from QuickDraw to Quartz has both learning curves and "unlearning curves." While both graphics APIs share the concept of a graphics context, the coordinate systems used by each are very different. Along with the differences in the coordinate systems, there are vast differences in the drawing models provided by each API. Quartz uses an abstract coordinate system, very precise drawing primitives, and rich color handling to provide a powerful graphics API that works across a wide variety of devices.

Through the Quartz Extreme technology that pairs drawing contexts with graphics hardware, Quartz has plenty of headroom to grow in features and performance in the future. The time to start thinking about how to move your QuickDraw code to Quartz has arrived. I hope that this article has given you some of the basics needed to make that transition just a little easier.

For More Information

For more information on moving QuickDraw to Quartz 2D, you can read Apple's "Introduction to Transitioning to Quartz 2D" documentation.

For more information on the Quartz 2D API, visit the Quartz 2D Reference.

A wealth of information about Bézier curves and their mathematics is available on the Web. If you are looking for interesting books about the mathematics of Bézier curves and other B-splines I might recommend:

  • An Introduction to Splines for Use in Computer Graphics and Geometric Modeling
    by Richard H. Bartels, John C. Bealty, John C. Beatty, Brian A. Barsky, ISBN: 1558604006
  • Curves and Surfaces for CAGD: A Practical Guide
    by Gerald E. Farin, ISBN: 1558607374

Scott Thompson is a professional, contract software engineer with a long-standing interest in both computer graphics and their mathematics.

Return to