Getting Context in Quartz

When you draw with Quartz, you'll usually add the drawing code to the view doing the drawing.
For example, you might create a subclass of UIView and add Quartz function calls to that class's drawRect: method.
drawRect: is the method in UIView that gets called each time a view needs to redraw itself.
In Quartz, drawing happens in a graphics context, also called just a context.
Every view has such a context.
When you want to draw into a view, you need to retrieve the current context and use that to make various Quartz drawing calls.

To retrieve the context, you can do:

CGContextRef context = UIGraphicsGetCurrentContext();

Note: this is a Core Graphics is C function. It is not Objective-C.

Drawing into a Context

Once you've got a graphics context, you can draw into it by passing the context to a variety of Core Graphics functions.

For example,

  CGContextSetLineWidth(context, 2.0);
  CGContextSetStrokeColorWithColor(context, 
     [UIColor redColor].CGColor);
  CGContextMoveToPoint(context, 100.0f, 100.0f);
  CGContextAddLineToPoint(context, 200.0f, 200.0f);
  CGContextStrokePath(context);

This code sets up the stroke width as being 2pixels wide, sets the color as red (Core Graphics supports both a stroke and fill color), sets the starting coordinates of a stroke, then specifies where to draw to, and finally to draw it.
So in Core Graphics, we first create a shape, then tell Quartz to draw it using the information we have set-up.

The Coordinate System

Coordinates in Core Graphics are pairs of floating point numbers.
The upper left corner of the context is (0,0). As you move down y increase, as you move right x increase.
This coordinate is different from OpenGL's in which (0,0) would represent the lower-left corner if one was drawing in 2D.
To specify a point in the coordinate system, some Quartz functions require two floating point numbers as parameters.
Other functions, ask for the point to be embedded in a CGPoint struct that has two float fields: x, and y.
Another common struct is a CGRect, which is a pair of structs, a CGPoint origin, which specifies the top y, left x coordinates or a rectangular region, and a CGSize called size which specifies the width and the height of the rectangle.
It is completely okay for a point to be offscreen, to have negative x and y values, etc.

Specifying Color

There is an Objective-C class that can be used to help specify a color in Core Graphics: UIColor.
Since Core Graphics is a C library, you don't use this class directly but instead use its properties to get a CGColor struct reference.

This is what we did with the line:

CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);

One way to represent colors in Quartz is to use the additive RGBA modes.
This "adds" the red, green and blue components together in a linear combination with parameter alpha of the current color to make a new color.
Combining the three additive colors, gives a color range referred to as the color gamut.
The method of combining colors you learned in grade school, is probably a subtractive model based on red, yellow, and blue. It is almost never used in graphics.
Quartz does support other color models such as HSV, HSL, CMYK.
When working with OpenGL ES though colors are required to be RGBA.

UIColor also has the following method for specifying a color:

[UIColor colorWithRed:1.0f green: 0.0f blue: 0.0f alpha:1.0f];

Drawing Images in a Context

Quartz 2D support drawing images directly into a context.
To do this, you can use the Objective-C class UIImage to work with a Core Graphics struct called CGImage.

UIImage contains methods to draw its image into the current context:

CGPoint drawPoint = CGPointMake(100.0f, 100.0f);
[image drawAtPoint: drawPoint];

Drawing Shapes: Polygons, Lines and Curves

Quartz 2D contains a number of functions to make it easy to create complex shapes.
For example, to draw an ellipse, you define the rectangle into which the ellipse fits, and then call the appropriate Core Graphics functions:
```
CGRect theRect = CGRectMake(0, 0, 100, 100);
CGContextAddEllipseInRect(context, theRect);
CGContextDrawPath(context, kCGPathFillStroke);
```
There are similar methods for rectangles.
There are also methods for arcs, Bézier Curves and paths.

Demo App

To demonstrate Quartz graphics we will make a shape drawing app:
This example is based on code from last years text for this class.
To build this app we will create a new view-based application. To this we will add five files: QuartzTestView.h, QuartzTestView.m, Constant.h, UIColor-Random.h, UIColor-Random.h.
The first two are created by choosing to add to the project a new Objective-C Class of type UIView.
The remaining three are added as empty files and then coding in them.

UIColor-Random

We will use an Objective-C Category to modify the UIColor and add a new method to generate a random color.

Here is the header file:

#import <UIKit/UIKit.h>

@interface UIColor(Random)
+(UIColor *)randomColor;
@end

Here is the implementation file:

#import "UIColor-Random.h"

@implementation UIColor(Random)
+(UIColor *)randomColor
{
    static BOOL seeded = NO;
    if(!seeded) {
        seeded = YES;
        srandom(time(NULL));
    }
    CGFloat red = (CGFloat)random()/(CGFloat)RAND_MAX;
    CGFloat blue = (CGFloat)random()/(CGFloat)RAND_MAX;
    CGFloat green = (CGFloat)random()/(CGFloat)RAND_MAX;
	
    return [UIColor colorWithRed: red green:green blue:blue alpha:1.0f];
}
@end

Constants.h

Constants.h is used mainly to hold two typedef of enum's that are used to give the segments of our segmented controls reasonable names:

typedef enum {
    kLineShape = 0,
    kRectShape,
    kEllipseShape,
    kImageShape
} ShapeType;

typedef enum {
    kRedColorTab = 0,
    kBlueColorTab,
    kYellowColorTab,
    kGreenColorTab,
    kRandomColorTab
} ColorTabIndex;

#define degreesToRadians(x) (3.1415926535897932846 * x /180)

QuartzTestView.h

An object QuartzTestView is a new view we are creating.

We will set an object of this class to be the view used by our view controller.

#import <UIKit/UIKit.h>
#import "Constants.h"

@interface QuartzTestView : UIView {
	CGPoint firstTouch;
	CGPoint lastTouch;
	UIColor *currentColor;
	ShapeType shapeType;
	UIImage *drawImage;
	BOOL useRandomColor;
}
@property CGPoint firstTouch;
@property CGPoint lastTouch;
@property (nonatomic, retain) UIColor *currentColor;
@property ShapeType shapeType;
@property (nonatomic, retain) UIImage *drawImage;
@property BOOL useRandomColor;
@end

As this class is going to respond to touch events we have properties for the start and current location of touch.
As we will support multiple colors we have a property for the currentColor and another for whether to use a random color; we will draw different shapes so have for the current shape. We also have a property that we will use to hold an image resource that we will also be able to draw.

QuartzTestView.m

Here is the implementation of QuartzTestView. The drawRect method is where we override the base UIView ways of drawing things. We also have code to handle touch events (when they start, end and how they change).


#import "QuartzTestView.h"
#import "UIColor-Random.h"


@implementation QuartzTestView

@synthesize firstTouch;
@synthesize lastTouch;
@synthesize currentColor;
@synthesize shapeType;
@synthesize drawImage;
@synthesize useRandomColor;

//we're using initWithCoder as we are loading the view from a nib
// and so init and initWithFrame will never be called
-(id)initWithCoder:(NSCoder *)coder
{
    if((self = [super initWithCoder:coder])) {
        self.currentColor = [UIColor redColor];
        self.useRandomColor = NO;
    if(drawImage == nil)
        self.drawImage = [UIImage imageNamed:@"myphoto.png"];
    }
    return self;
}


// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect 
{
    CGContextRef context = UIGraphicsGetCurrentContext();
	
    CGContextSetLineWidth(context, 2.0);
    CGContextSetStrokeColorWithColor(context, currentColor.CGColor);
    CGContextSetFillColorWithColor(context, currentColor.CGColor);

    CGRect currentRect = CGRectMake(
        (firstTouch.x > lastTouch.x) ? lastTouch.x : firstTouch.x,
        (firstTouch.y > lastTouch.y) ? lastTouch.y : lastTouch.y,
        fabsf(firstTouch.x - lastTouch.x), 
        fabsf(firstTouch.y -lastTouch.y));
    switch (shapeType)
    {
        case kLineShape:
           CGContextMoveToPoint(context, firstTouch.x, firstTouch.y);
           CGContextAddLineToPoint(context, lastTouch.x, lastTouch.y);
           CGContextStrokePath(context);
        break;

        case kRectShape:
           CGContextAddRect(context, currentRect);
           CGContextDrawPath(context, kCGPathFillStroke);
        break;

        case kEllipseShape:
           CGContextAddEllipseInRect(context, currentRect);
           CGContextDrawPath(context, kCGPathFillStroke);
        break;

        case kImageShape: {
           CGFloat horizontalOffset = drawImage.size.width/2;
			
           CGFloat verticalOffset = drawImage.size.width/2;
           CGPoint drawPoint = CGPointMake(lastTouch.x - horizontalOffset, 
               lastTouch.y - verticalOffset);
           [drawImage drawAtPoint:drawPoint];
        break;
        }
        default:
        break;
    }
}

// Basic idea for touch handlers is to store in fields the touch info and redraw
- (void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event 
{
    if(useRandomColor)
        self.currentColor = [UIColor randomColor];
    UITouch *touch = [touches anyObject]; //touches recieves all 
                                          //finger presses we just need one
    firstTouch = [touch locationInView:self]; //store touch start info
    lastTouch = [touch locationInView:self];

    [self setNeedsDisplay]; // redraw view
}
- (void) touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event {
    NSLog(@"hi there, this method does nothing");
}
	
-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{	
    UITouch *touch = [touches anyObject];
    lastTouch = [touch locationInView:self];
    [self setNeedsDisplay]; // redraw view	
}

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];
    lastTouch = [touch locationInView:self];
    [self setNeedsDisplay]; // redraw view	
}

- (void)dealloc 
{
    [currentColor release];
    [drawImage release];
    [super dealloc];
}

@end

QuartzTestViewController.h

The view controller class is responsible for handler events from the two segmented controls. To do this we have methods changeColor and changeShape.

#import <UIKit/UIKit.h>

@interface QuartzTestViewController : UIViewController {
    IBOutlet UISegmentedControl *colorControl;
}

@property (nonatomic, retain) UISegmentedControl *colorControl;
-(IBAction)changeColor:(id)sender;
-(IBAction)changeShape:(id)sender;
@end

We have an IBOutlet for the color segmented control, because when someone is drawing an image they can't select a color for the image so we turn off the color segmented control. Thus, we need a reference to it to do this.

QuartzTestViewController.m

The implementation of changeColor and changeShape is pretty straightforward:

#import "QuartzTestViewController.h"
#import "QuartzTestView.h"
#import "UIColor-Random.h"
#import "Constants.h";

@implementation QuartzTestViewController

@synthesize colorControl;

- (IBAction)changeColor:(id)sender {
    UISegmentedControl *control = sender;
    NSInteger index = [control selectedSegmentIndex];
	
    QuartzTestView *quartzView = (QuartzTestView *)self.view;
	
    switch (index)
    {
        case kRedColorTab:
           quartzView.currentColor = [UIColor redColor];
           quartzView.useRandomColor = NO;
        break;
        case kBlueColorTab:
           quartzView.currentColor = [UIColor blueColor];
           quartzView.useRandomColor = NO;
        break;
        case kYellowColorTab:
           quartzView.currentColor = [UIColor yellowColor];
           quartzView.useRandomColor = NO;
        break;
        case kGreenColorTab:
           quartzView.currentColor = [UIColor greenColor];
           quartzView.useRandomColor = NO;
        break;
        case kRandomColorTab:
           quartzView.useRandomColor = YES;
        break;
        default:
        break;
    }
}

- (IBAction)changeShape:(id)sender {
    UISegmentedControl *control = sender;
    [(QuartzTestView *)self.view setShapeType:[control selectedSegmentIndex]];
    if([control selectedSegmentIndex] == kImageShape)
        colorControl.hidden = YES;
    else
        colorControl.hidden = NO;
}

- (void)viewDidLoad {
    [super viewDidLoad];
}



- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}

- (void)didReceiveMemoryWarning {
    // Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];
}


- (void)dealloc {
    [colorControl release];
    [super dealloc];
}

@end

QuartzTestViewController.xib

To complete the project we open QuartzTestViewController.xib in interface builder, we click on the view then switch to the identity inspector and make sure the class of the view is changed from UIView to QuartzTestView.
We drag out two segmented controls.
For the color one, in the control attributes we set that it has five segments and then give labels for each segment.
For the shape one, in the control attributes we set that it has four segments and then give labels for each segment.
We drag out a Navigation bar and place it at the top of the screen and we draw out a toolbar and place it at the bottom of the screen.
We delete the button on the latter and then draw our two segmented controls to the appropriate bars.
Finally, we hook-up the segmented control IBOutlet of the file's owner to the color segmented control; and we hook up the valueChanged methods of the two segmented controls to the appropriate shapeChanged or colorChanged of the file's owners.

Graphics iPhone

Outline

Graphics on the iPhone