oreilly.comSafari Books Online.Conferences.


AddThis Social Bookmark Button Programming With Cocoa

Introduction to Cocoa Graphics


Since the beginning of this column, I have primarily discussed how to use Cocoa for the purposes of making applications with user interfaces. I've also talked about the fundamentals of object-oriented programming (OOP), as well as how the most commonly used Cocoa classes are used in applications. Today I'm going to shift our focus from those subjects to the area of drawing and 2D graphics in Cocoa. I'll start out "small" today by discussing the basics of how to draw simple shapes in a window.

In future columns, I'll get into drawing more complicated shapes, implementing animations, as well as working with raw image data. Before that, however, let's start with the basics.

Rectangles, sizes, and points

Rectangles, sizes, and points are represented by three Cocoa data types that are actually nothing more than C structs. They are respectively NSRect, NSSize, and NSPoint.

NSPoint (or more simply, a "point") is the most fundamental of these three data types, so we will talk about it first. A point in Cocoa is a variable that stores a coordinate pair, that is the x and y values of a location on the coordinate plane of our drawing surface. We will discuss the drawing surface in more detail later on, but suffice it to say that the drawing surface coordinate plane is just a Cartesian coordinate plane that we've all learned about in geometry. The origin (0,0) of the plane is in the lower left corner of your drawing surface, and positive x-values extend to the right, while up is positive in the y-direction. In this system, one unit of distance is equivalent to one pixel on your screen; keep that in mind when visualizing sizes of objects that you will draw onscreen.

So what about points? How does Cocoa represent them? NSPoint is formally a C structure of the following constitution:

typedef struct _NSPoint {
    float x;
    float y;
} NSPoint;

If you're unfamiliar with the intricacies of C, the typedef statement simply defines a new data type -- NSPoint -- that is equivalent to the more fundamental data type struct _NSPoint. So whenever we talk about NSPoint, we are talking about the structure shown above. If you are unfamiliar with C structs, then you might do well to go back to your preferred C reference and read up on it a bit.

To initialize an NSPoint variable, we use the Foundation function NSMakePoint, which takes two arguments, the x and y coordinates of the point, and returns an NSPoint variable initialized to those arguments. The following line of code shows how we use this:

NSPoint p = NSMakePoint(10, 45);

To fully leverage these variables (NSPoint, NSRect, and NSSize), you must know how to access the structure members. In other words, given an NSPoint variable, how do we determine the x-coordinate value or the y-coordinate value of that point? The answer is the period operator. The period operator refers to the how we access structure members using the structVariable.memberName syntax.

For example, if we wanted to retrieve the x and y coordinates from an NSPoint structure variable, we would do the following:

float xCoord = p.x;
float yCoord = p.y;

Where given the point above, xCoord would take the value "10", and yCoord would have the value "45". With NSPoints out of the way, let's move on to NSRect and NSSize, the other two data types that we will frequently interact with.


NSRect (or more simply, "rect") is another custom data type defined in the Foundation framework. A rect defines a rectangular region in the drawing area. It's not a shape, but it could define the boundary of a shape, the boundary of a window, the boundary of a drawing view, an area to fill with a color or anything else of that nature. Rects are determined by an origin point, and a size, which is simply a width and height. The formal definition of NSRect, as documented in the Foundation reference, is the following:

typedef struct _NSRect {
    NSPoint origin;
    NSSize size;
} NSRect;

The origin member is an NSPoint object that indicates the bottom left corner of the rectangle. NSSize is simply a structure data type that contains values for the height and width of the rect as its members. NSSize has the following formal definition:

typedef struct _NSSize {
    float width;
    float height;
} NSSize;

To create a rect, we use the Foundation function NSMakeRect, which takes four arguments: the x- and y-coordinates of the origin, the width, and the height. If we wanted to create an NSRect variable, we would do the following:

NSRect r = NSMakeRect(10, 10, 100, 150);

Comment on this articleYou don't have to be Degas to draw in Cocoa. Have you tried using NSRect, NSSize, and NSPoint? How did it go?
Post your comments

This creates a rectangle with an origin at the point (10,10), with a width of 100, and a height of 150. So the top right corner of the rectangle would be at the point (110, 160).

Because the members of NSRect are themselves structure variables, we must use the period operator twice to drill down and access the most fundamental pieces of information about the rect. For example, to access the value of the x-coordinate of the rect we created above, we would do the following:

float xOrigin = r.origin.x;

If we wanted to know the height of a rect, we would do something similar:

float width = r.size.width;

With a handle on the fundamental data types that we will use in Cocoa drawing, let's get on to see how to draw shapes.

Pages: 1, 2, 3

Next Pagearrow