oreilly.comSafari Books Online.Conferences.


AddThis Social Bookmark Button

Introduction to Cocoa Graphics
Pages: 1, 2, 3

The canvas and the brush

Learning CocoaLearning Cocoa
By Apple Computer, Inc.
Table of Contents
Sample Chapter
Full Description
Read Online -- Safari

A useful way of envisioning how Cocoa drawing works is to think of how you would draw anything else. You'll need a surface to draw onto and something to draw with -- in other words, a canvas and a brush. In Cocoa, the canvas is the class NSView, and the brush is the class NSBezierPath. Let's first look at how we set up our canvas in Project Builder and Interface Builder, and then we'll get to the fun part of actually drawing.

Setting up the canvas

As I said above, Cocoa's canvas is the class NSView. NSView is a class that provides a mechanism for defining an area on the screen to draw to, as well as all of the machinery behind drawing. NSView is a beast of a class, and to go into a detailed description of the inner workings of this beast would be an exercise in duplicating the excellent documentation provided by Apple, and would make this column entirely too long. So I refer you to the NSView class documentation for a detailed understanding of the workings of this class, and here we will talk about how to use it.

We never directly interact with an instance of NSView -- it is an abstract class. Rather, we subclass NSView and add all of our drawing code to the subclass, and interact with the subclass. Project Builder provides a means for creating a skeletal NSView subclass.

The first thing we need to do is to create a new project. Call your new project CocoaDrawing. After the new project opens up, go to the File menu and select "New File". In the New File dialog select "Objective-C NSView Subclass" as the type of file you want to create. Click on Next, and name your new file CocoaDrawing.m. Make sure that CocoaDrawing.h is set to be created as well. Click Finish, and you have your NSView subclass file.

The next step is to let our application know about our subclass of NSView. This is done within Interface Builder (IB). Open Interface Builder by double-clicking on the file MainMenu.nib in your Project. With Interface Builder open, we do a neat little trick of adding our new class, CocoaDrawing, to those classes that IB knows about. We do this by dragging the file CocoaDrawing.h from our project window onto the IB Instances pane.

Screen shot.
Dragging the CocoaDrawing class header from Project Builder into Interface Builder.

This will add our new class, CocoaDrawing, to the list in the Classes pane as shown in the image below. This process of adding a class to IB can be done with any class you create in Project Builder. In fact, this is the reason for all of the IBOutlet and IBAction tags we see in our IB-generated code, so IB can make available any indicated outlets and actions.

Screen shot.
CocoaDrawing added to the list of classes in InterfaceBuilder.

The next step is to drag a CustomView container onto our application's window. From the Cocoa Containers Palette, drag a Custom View object onto the window. With CustomView selected, open the Show Info panel, and under Attributes you should see CocoaDrawing in the class list. Select it and the name of the view will change to CocoaDrawing, and the contents of this view will now be controlled by the code in CocoaDrawing. We're now set and ready to learn about the Cocoa paintbrush. Save your work in IB, return to Project Builder, and move onto the next section.

Screen shot.
Adding a view container to your application's window.

Screen shot.
Changing the CustomView from an NSView to our NSView subclass, CocoaDrawing.

Pages: 1, 2, 3

Next Pagearrow