QuartzTutorial02

Just to remind myself, and others, this is from the Quartz 2D Wiki.

Drawing in Quartz 2D

The drawing model utilized by Quartz 2D is based on PDF specification 1.4. Drawing takes place using a Cartesian coordinate system, where text, vectors, or bitmap images are placed on a grid. However, drawing output is not sent directly to the output device. Quartz 2D uses graphics contexts, environments in which drawing takes place. Each graphics context defines how the drawing should be presented: in a window, sent to a printer, an OpenGL layer, or off-screen. Each context rasterizes the drawing at the desired resolution without altering the data that defines the drawing. Thus, contexts are the mechanism by which Quartz 2D employs resolution- and device-independence. For example, a window context may rasterize an object to the appropriate screen resolution to create actual graphics on the display. The same object can be sent to a printing context at a much higher resolution. This permits the same graphics commands to yield output on any device using the most appropriate resolution.

Now, continuing from Tutorial 1. Noting the above text, the important thing to remember is that a Context is something that defines how the drawing will be represented. So you need to define the Context. Then, and only then, can you define the data that does the drawing.

This tutorial should be a whole lot shorter as well, because we are just going to build on what we did in Tutorial 1. If you want to, you can begin by building a complete interface, and call it QuartzTutorial02, or simply use the original Tutorial 01 that we did previously.

Remember where we left off last time? A simple red rectangle. Click to open the image in a new tab.

QuartzTutorial02-01a
A simple red rectangle

 

This is what the code looks like, in place.

QuartzDrawingView.h

QuaertzTutorial02-04

 

Interesting thing here. You can leave out the line in this that declares the action.

– (void) drawRect:(NSRect)frame;

and the app still runs. XCode is updated regularly, and some of the old conventions can be ingored. It will remind you when they can’t be.

 

QuartzDrawingView.m

QuaertzTutorial02-03

 

Let’s have another look at this code.


#import "QuartzDrawingView.h"

@implementation QuartzDrawingView

- (id)initWithFrame:(NSRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code here.
}
return self;
}

- (void)drawRect:(NSRect)frame
{
// Drawing code here.
[[NSColor redColor] set];
[NSBezierPath fillRect:frame];

}

@end

The first part simply declares the CustomView as a start up Frame. You can do other things with this later. It’s a bit like a place marker. Indeed, you can take it out – and the app will still work.

This can be removed if you like… for now.

- (id)initWithFrame:(NSRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code here.
}
return self;
}

That leaves this bit.

- (void)drawRect:(NSRect)frame
{
// Drawing code here.
[[NSColor redColor] set];
[NSBezierPath fillRect:frame];

}

What you are doing is simply declaring a Context – (NSRect)frame – remember that word? – and then drawing in it with the instructions following the //Drawing code here.

Ok, now lets get a little more complex and do something a little fancier.

Open the QuartsDrawingView.m file, and replace the contents with this code.

- (void)drawRect:(NSRect)rect
{
// Obtains a graphics context for the view.
CGContextRef myContext = [[NSGraphicsContext currentContext] graphicsPort];
// ********** Your drawing code here **********

// 3. Sets a red fill color that’s fully opaque. For information on colors and alpha (which sets opacity)
CGContextSetRGBFillColor (myContext, 1, 0, 0, 1);

// 4. Fills a rectangle whose origin is (0,0) and whose width is 200 and height is 100.
CGContextFillRect (myContext, CGRectMake (0, 0, 200, 100 ));

// 5. Sets a blue fill color that’s partially transparent
CGContextSetRGBFillColor (myContext, 0, 0, 1, .5);
// 6. Fills a rectangle whose origin is (0,200) and whose width is 100 and height is 200
CGContextFillRect (myContext, CGRectMake (0, 0, 100, 200));

// Obtains a new graphics context for the view.
CGRect ourRect;

// Set the fill colour to opaque green, and draw it above and to the right of the current set.
CGContextSetRGBFillColor(myContext, 0.0, 1.0, 0.0, 1.0);

// Set up the rectangle for drawing
ourRect.origin.x = ourRect.origin.y = 120.0;
ourRect.size.width = 130.0;
ourRect.size.height = 100.0;
// Draw the filled rectangle
CGContextFillRect(myContext, ourRect);

}

Now when you run your app, it will look like this…

QuaertzTutorial02-05

That’s it for this tutorial folks. Now you can see why we went to all the trouble of setting up the whole Project in the first tutorial – so we don’t have to do it every time.

Watch this space – Tutorial number 3 will be on the way soon!

Best of programming.

Robert Chalmers.
Author, Writer, Programmer, TESOL.

@ShanghaiTimes

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA * Time limit is exhausted. Please reload CAPTCHA.