SOBezier – Getting started.

stompy — Wed, 30 Jul 2008 22:00:55 +0000

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.

MVC Classes

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.

//  SOBezierCurve.h

#import 

@interface SOBezierCurve : NSObject {

    NSPoint pt1;

    NSPoint pt2;

    NSPoint ControlPt1;

    NSPoint ControlPt2;

}
@property (readwrite) NSPoint pt1;

@property (readwrite) NSPoint pt2;

@property (readwrite) NSPoint ControlPt1;

@property (readwrite) NSPoint ControlPt2;
- (id)initWithPt1:(NSPoint)point1

              Pt2:(NSPoint)point2

       ControlPt1:(NSPoint)cPoint1

       ControlPt2:(NSPoint)cPoint2;

- (void)drawCurve;
@end

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:

//  SOBezierCurve.m

#import "SOBezierCurve.h"

@implementation SOBezierCurve
@synthesize pt1, pt2, ControlPt1, ControlPt2;
- (id)initWithPt1:(NSPoint)point1

              Pt2:(NSPoint)point2

       ControlPt1:(NSPoint)cPoint1

       ControlPt2:(NSPoint)cPoint2

{

    // Designated initialiser.

    if (![super init]) {

        return nil;

    }

    pt1 = point1;

    pt2 = point2;

    ControlPt1 = cPoint1;

    ControlPt2 = cPoint2;

    return self;

}
- (void)drawCurve

{

    NSBezierPath *path = [NSBezierPath bezierPath];

    // Move to the first control point

    [path moveToPoint:ControlPt1];

    // Add a line from the control point to the first point of the curve

    [path lineToPoint:pt1];

    // Create the curve

    [path curveToPoint:pt2 controlPoint1:ControlPt1 controlPoint2:ControlPt2];

    // Draw a line from the end of the curve to the second control point

    [path lineToPoint:ControlPt2];

    // Now draw the curve

    [[NSColor blackColor] set];

    [path stroke];

}
@end

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.

The 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.

//  SOBezierView.h

#import 

@class MyDocument;
@interface SOBezierView : NSView {

    IBOutlet MyDocument *doc;

}
@end

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.

//  SOBezierView.m

#import "SOBezierView.h"

#import "MyDocument.h"

#import "SOBezierCurve.h"

@implementation SOBezierView
- (id)initWithFrame:(NSRect)frame {

    self = [super initWithFrame:frame];

    if (self) {

        // Initialization code here.

    }

    return self;

}
- (void)drawRect:(NSRect)rect {

    [[NSColor yellowColor] set];

    [NSBezierPath fillRect:[self bounds]];

    [[doc curve] drawCurve];

}
@end

The 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.

//  MyDocument.h

//  SOBezier

#import 

@class SOBezierCurve;                          // 1

@interface MyDocument : NSDocument

{

    SOBezierCurve *curve;                      // 2

}

@property (readwrite) SOBezierCurve *curve;    // 3

@end

Here SOBezierCurve is declared to be a class.
The curve attribute 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.

//  MyDocument.m

//  SOBezier


#import "MyDocument.h"

#import "SOBezierCurve.h"                                   // 1


@implementation MyDocument
@synthesize curve;                                          // 2



- (id)init                                                  // 3

{
self = [superinit];
if (self) {
NSPoint p1 = NSMakePoint(100, 150);
NSPoint p2 = NSMakePoint(300, 150);
NSPoint cP1 = NSMakePoint(100, 225);
NSPoint cP2 = NSMakePoint(300, 75);


        curve = [[SOBezierCurve alloc] initWithPt1:p1 
Pt2:p2 
ControlPt1:cP1 
ControlPt2:cP2];


    }
returnself;

}
.

.

.
@end

Import the header file for the SOBezierCurve class.
This creates KVC compliant accessors for the curve attribute.
The init method, 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.

Next Steps

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.

Resources

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)

SOBezier – A Cocoa Tutorial

stompy — Tue, 29 Jul 2008 15:00:26 +0000

I am going to start a series of tutorials that will build a basic Mac application that draws and manipulates bezier curves. Following the example of the Hillegass book I am going to be building the application up bit by bit; adding functionality in stages. Although the sample code available on the Apple site and elsewhere on the net is quite detailed, it is sometimes hard to see how an application can be built up in small steps.

Because I am a fan of version control, and also because it can show the stages that the application is built up in, the git repository is available online, but if you don’t have (or want to use) git, I’ll also have zip files of the project as it goes along.

The screen shot looks a little dull right now, but I am planning to have support for preference panes, changing the curve, undo/redo, printing, archiving, and copying amongst other things.

Also, if there is enough support for it, I might screencast some of the stages.

I hope you’ll join me.

Stompy.org » SOBezier