Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Apple > Operating Systems

QuickDraw Basics

  • Print
  • + Share This
So, you're ready to jump right into drawing a fancy shape such as an oval filled with a checkerboard pattern, right? No you aren't! Before drawing shapes, make sure that you know about the graphics grid that's used to define the size and window location of a shape. You also need to know how to go about setting drawing parameters, such as the thickness of the lines used to draw shapes. Topics such as these are covered in this article on QuickDraw basics by expert author Dan Parks Sydow.
This article is excerpted from Mac OS X Programming, by Dan Parks Sydow.
From the author of

Coordinate System

When your program draws, it needs to specify where to draw. There are two components to this specification. Your program should specify the window to which to draw, and it should specify where in that window the drawing is to take place.

Drawing always takes place in a port, which is a graphics entity used to hold information about a drawing. Every window has its own port, and the screen (monitor) itself includes a port. The screen's port makes it possible for the desktop to be displayed. Note that the desktop isn't a window, yet it gets drawn to. A window's port makes it possible to specify to which window to draw, in the event a program enables more than one window at a time to be open.

You tell your program which port to draw to by passing to the SetPortWindowPort routine the window in which the drawing will occur. Typically, this is done within a window update routine, before any drawing takes place:

void UpdateWindow( WindowRef window )  
  SetPortWindowPort( window );

  // now start drawing

Specifying where within a window a drawing should take place is done by specifying the coordinates at which to draw. Macintosh windows make use of a coordinate grid system. In this system, every pixel in the content area of a window is defined by a coordinate pair. The content area is the area drawn to. This area excludes the window title bar and scroll bars, if present.

The grid is a coordinate system that has a horizontal component and a vertical component. The upper-left pixel in a window's content area has a horizontal component of 0 (zero pixels from the left side of the window) and a vertical component of 0 (zero pixels from the top of the window). The horizontal component of the pair is specified first, followed by the vertical component. Thus, the upper-left pixel of a window is referred to as (0, 0).

To specify the pixel located 20 pixels in from the left side of the window, but still in the uppermost row of pixels, you'd refer to the pixel as (20, 0). Figure 1 illustrates this. In this figure, the circled pixel is 60 pixels in from the left side of the window and 20 pixels down from the top of the window, so to reference this one pixel, you'd use the coordinate pair of (60, 20).

Figure 1 - The coordinate system of a window.

The MoveTo routine specifies the starting location for drawing based on a coordinate pair global to the window. Another routine, Move, specifies the starting location based on the current drawing location. Here are the prototypes for those two routines:

void MoveTo( SInt16 h, SInt16 v );
void Move( SInt16 h, SInt16 v );

To see these routines used in conjunction with one another, consider this snippet:

MoveTo( 40, 80 );
Move( 70, 10 );

The call to MoveTo moves the starting location to the pixel 40 pixels in from the left side of the window and 80 pixels down from the top of the window. The call to Move moves the starting point 70 pixels to the left of its current position of 40 pixels in, and 10 pixels down from its current position of 80 pixels down. After both routines execute, the result is that the new starting position for drawing is at pixel ( 110, 90 ).

To use Move to move the starting position to the left or up, use negative values. For instance, to move the starting position left 10 pixels and up 20 pixels, call Move like this:

Move( -10, -20 );

Line and Shape Drawing and the Graphics Environment

Each port has its own graphics environment. That is, a port has a set of properties that a program makes use of when drawing to that port. Consider this snippet:

SetPortWindowPort( window );

MoveTo( 20, 60 );
LineTo( 120, 60 );

The preceding call to MoveTo specifies that the drawing should start 20 pixels from the left side of the window and 60 pixels down from the top of that window. LineTo is a drawing routine that draws a line from the current starting location to the specified ending location. The call to LineTo specifies that a line should be drawn from that starting point and extend to the point 120 pixels from the left side of the window and 60 pixels down from the top of the window. The result is a horizontal line 100 pixels in length. That line will be black, and it will have a thickness of one pixel. The line has these attributes because a graphics port has a graphics environment, and that environment assigns its various fields default values. One of those fields is line thickness, which is initially set to one pixel. Collectively, these fields that affect line and shape drawing make up a conceptual drawing device referred to as the graphics pen.

There are a few access routines that enable you to change the attributes of the graphics pen. You've already seen that Move and MoveTo move the graphics pen (though you might not have known that what was being affected by these routines was, in fact, the graphics pen). To change the pixel size of lines drawn in a port, call SetPortPenSize:

void SetPortPenSize( CGrafPtr port, 
           Point   penSize );

A CGrafPtr is a pointer to a color graphics port, which is the type of port associated with a window. Rather than simply passing the WindowRef, you need to pass a pointer to the window's port. That's easy enough to do with the GetWindowPort routine. Assuming the window is a WindowRef variable, here's how you can change the size of the graphics pen so that it draws lines that have a height of 8 pixels and a width of 5 pixels:

Point  thePenSize = { 8, 5 };

SetPortPenSize( GetWindowPort( window ), thePenSize );

Use the PenNormal routine to return the current port's graphics pen to its initial, or default, state:


Text Drawing and the Graphics Environment

The characteristics of text drawn to a window also are under the control of the port's graphics environment, though the graphics pen won't affect the look of the text. For instance, if you call SetPortPenSize to change the thickness of the graphics pen, the thickness of lines will be affected, but the thickness of the text won't be. To change the look of the text, use any of the following routines:

void TextFont( SInt16 font);
void TextFace( StyleParameter face );
void TextSize( SInt16 size );

TextFont establishes the font used in drawing text to the current graphics port. The font parameter specifies the font family ID. Each font is considered a family, and each family has an ID. A font family ID of 0 is used to represent the system font. This system font ID is the initial value that a graphics port uses for the display of text. Rather than trying to determine what ID is associated with any one font family, simply use the FMGetFontFamilyFromName routine to let the system supply your program with this information. Pass FMGetFontFamilyFromName the exact name of a font, prefaced with \p, and the routine returns the ID for that font. Use that value in a call to TextFont:

FMFontFamily	fontFamily;

fontFamily = FMGetFontFamilyFromName( "\pTimes" );
TextFont( fontFamily );

TextFace sets the style of the font in which text is drawn. The face parameter can be any one, or any combination, of the following constants: normal, bold, italic, underline, outline, shadow, condense, and extend. To set the face to one particular style, use the appropriate style constant. After the following call, all text drawn with DrawString will be in bold:

TextFace( bold );

To set the face to a combination of styles, use a plus (+) sign between each style:

TextFace( italic + underline + shadow );

To change the size of text drawn to a window, use the TextSize routine. Pass a size in points. A 12-point size is common and is considered a de facto standard for text. The initial setting for the text size is 0, which represents the size of the system font. This line of code sets the text size to twice the normal size:

TextSize( 24 );
  • + Share This
  • 🔖 Save To Your Account