The first part of this demonstration will create an application that draws a predefined curve in a window that is not re-sizeable. The idea is to get a simple working version up and running in the first place which can then be built upon.
Create the Project
In Xcode, create a new project of type “Cocoa Document-based application”. Save it wherever you like and call it SOBezier. The only project setting that needs to be set is to make sure that Garbage collection is turned on.
Cocoa makes extensive use of the Model-View-Controller (MVC) paradigm. Model objects are responsible for the data or state of the application. View objects are responsible for displaying the data and the Controller objects keep the two in sync. For this basic application, the model class is SOBezierCurve, a subclass of NSObject, which contains the points of the curve and also knows how to draw itself. The view class is SOBezierView, a subclass of NSView, in which the curve is drawn. These are co-ordinated by the MyDocument class, a subclass of NSDocument, which is the controller.
SOBezierCurve – the model
From the Xcode File menu, choose New File and then select a Cocoa Objective-C class. Call this SOBezier curve. This will create the header and the implementation files. Edit them to look like these code listings.
Here, the four points that define the curve are declared and I am using the Objective-C 2.0 @property syntax to make these properties. Two methods are declared. First, an initialiser that creates the curve based on the four points being passed in, and a method that draws the curve.
The implementation is quite simple:
The initialiser just sets the points of the curve to the points that are passed in. the
@sythesize directive lets Objective-C 2.0 create accessors for the properties that are Key Value Coding (KVC) compliant.
DrawCurve: method is responsible for drawing the curve represented by these points. This is where the terminology becomes confusing with the term ‘bezier’ appearing everywhere. The NSBezierPath class is used extensively in Cocoa graphics, (which is why it is so easy to draw bezier curves), so to draw the curve a series of bezier paths are linked together as a single path and then drawn on the view by stroking this single path.
SOBezierView – the view
This class needs to be creates as we did with the SOBezierCurve class. From the Xcode File menu, choose New File and then select a Cocoa Objective-C NSView subclass. Call this file SOBezierView. This will create the header and the implementation files. Edit them to look like these code listings.
This class doesn’t do much at the moment so it is quite small. The interface file just declares an outlet called
doc to the controller, which is the MyDocument object in this case.
The implementation file only has two methods, both of which come from the superclass so they don’t need to be declared in the header file.
initWithFrame: method is where the initialisation code will go. But the important method is the
drawRect: method which is invoked whenever the view needs to draw itself.
The first thing that the
drawRect: method does is set the colour to be used and then calls the NSBezierPath
fillRect: method to fill the entire view window with this colour. The
rect paramater that is passed into the
drawRect: method is the rectangle that is ‘dirty’ and needs to be redrawn, but to keep things simple, this implementation just fills in the whole view. If the view was drawing a number of curves, this dirty rectangle could be used to determine which curves are within this rectangle and the drawing code could be optimised to only draw those curves. The method then uses the outlet to the MyDocument object outlet
doc to access curve object which is then asked to draw itself.
MyDocument – the controller
The MyDocument class was created by Xcode as part of the project.
Edit the header file so that it looks like this listing.
- Here SOBezierCurve is declared to be a class.
curveattribute is declared as a pointer to an SOBezierCurve object.
- This attribute is declared as a property.
The MyDocument.m file contains a lot of generated code. For now the only changes need to be made to the beginning of the file. Edit the code so it looks like this listing.
- Import the header file for the SOBezierCurve class.
- This creates KVC compliant accessors for the
initmethod, called when the object is created, sets up the points to be used for the default curve and then creates an SOBezierCurve object with these points.
Create the User Interface
Here’s a short screencast of how the UI is created. (If a picture is worth a thousand words, how many more is a video worth?).
Once that is done, you can click build and go to see a simple bezier curve drawn on a yellow background. Not very interesting so far, but it’s a good starting point.
The next step will be to add handles to the points so they can be moved around the view causing the curve to change.
Finally, thanks for your attention and I’d appreciate any comments you have, particularly about things you don’t like, so that I can improve this demonstration.
You can get the source code up to this point from the project’s git repository here. A checkout of the Stage1_1 tag will get the code up to this point.
Alternatively, you can download a zip file of the completed version up to this point here: SOBezier_01.zip (60 kb)