View source for Drawing iOS 4 iPhone 2D Graphics with Quartz (Xcode 4)

<table border="0" cellspacing="0" width="100%">
<tr>
<td width="20%">[[Detecting iOS 4 iPhone Touch Screen Gesture Motions (Xcode 4)|Previous]]<td align="center">[[iPhone iOS 4 Development Essentials Xcode 4 Edition|Table of Contents]]<td width="20%" align="right">[[An iOS 4 iPhone Graphics Drawing Tutorial using Quartz 2D (Xcode 4)|Next]]</td>
<tr>
<td width="20%">Detecting iOS 4 iPhone Touch Screen Gesture Motions (Xcode 4)<td align="center"><td width="20%" align="right">An iOS 4 iPhone Graphics Drawing Tutorial using Quartz 2D (Xcode 4)</td>
</table>
<hr>


<htmlet>ios9_upgrade</htmlet>


The ability to draw two dimensional graphics on the iPhone is provided as part of the Core Graphics Framework in the form of the Quartz 2D API. The iOS implementation of Quartz on the iPhone is the same implementation as that provided with Mac OS X and provides a set of C functions designed to enable the drawing of 2D graphics in the form of images, lines and shapes together with range of fill patterns and gradients.

In this chapter we will provide an overview of Quartz 2D. The next chapter, entitled [[An iOS 4 iPhone Graphics Drawing Tutorial using Quartz 2D (Xcode 4)|An iOS 4 iPhone Graphics Drawing Tutorial using Quartz 2D]], provides a step-by-step tutorial designed to teach the basics of two dimensional drawing on the iPhone.

== Introducing Core Graphics and Quartz 2D ==

Quartz 2D is a two dimensional graphics drawing engine that makes up the bulk of the UIKit Core Graphics Framework. It is a C based application programming interface (API) and as such is utilized primarily through calls to a range of C functions. Quartz 2D drawing typically takes place on a UIView object (or, more exactly a subclass thereof). Drawings are defined in terms of the paths that a line must follow and rectangular areas into which shapes (rectangles, ellipses etc) must fit.

== The drawRect Method ==

The first time a view is displayed, and each time part of that view needs to be redrawn as a result of another event, the drawRect method of the view is called. Drawing is achieved, therefore, by subclassing the UIView class, implementing the drawRect method and placing within that method the Quartz 2D API calls to draw the graphics.
 
In instances where the drawRect method is not automatically called, a redraw may be forced via a call to the setNeedsDisplay or setNeedsDisplayInRect methods.

== Points, Coordinates and Pixels ==
<htmlet>adsdaqbox_flow</htmlet>
The Quartz 2D API functions work on the basis of points. These are essentially the x and y coordinates of a two dimensional coordinate system on the device screen with 0, 0 representing the top left hand corner of the display. These coordinates are stored in the form of CGFloat variables. 

An additional C structure named CGPoint is used to contain both the x and y coordinates to specify a point on the display. Similarly, the CGSize structure stores two CGFloat values designating the width and height of an element on the screen. 
Further, the position and dimension of a rectangle can be defined using the CGRect structure which contains a CGPoint (the location) and CGSize (the dimension) of a rectangular area.

Of key importance when working with points and dimensions is that these values do not correspond directly to screen pixels. In other words there is not a one to one correlation between pixels and points. Instead the underlying framework decides, based on a scale factor, where a point should appear and at what size, relative to the resolution of the display on which the drawing is taking place. This enables the same code to work on both higher and lower resolution screens (for example an iPhone 3GS screen and an iPhone 4 retina display) without the programmer having to worry about it.

For more precise drawing requirements, iOS version 4 and later allows the scale factor for the current screen to be obtained from UIScreen, UIView, UIImage, and CALayer classes allowing the correlation between pixels and points to be calculated for greater drawing precision. For iPhone OS 3 or older the scale factor is always returned as 1.0.

== The Graphics Context ==

Almost without exception, all Quartz API function calls require that the graphics context be passed as an argument. Each view has its own context which is responsible for performing the requested drawing tasks and subsequently rendering those drawings onto the corresponding view. The graphics context can be obtained with a call to the UIGraphicsGetCurrentContext() function which returns a result of type CGContextRef:

<pre>
CGContextRef graphics_context = UIGraphicsGetCurrentContext();
</pre>

== Working with Colors in Quartz 2D ==

The Core Graphics CGColorRef data type is used to store colors when drawing with Quartz. This data type holds information about the colorspace of the color (RGBA, CMYK or gray scale) together with a set of component values that specify both the color and the transparency of that color. For example, the color red with no transparency would be defined with the RGBA components 1.0, 0.0, 0.0, 1.0.

A colorspace can be created via a Quartz API function call. For example, to create an RGB colorspace:

<pre>
CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB();
</pre>

If the function fails to create a colorspace, it will return a NULL value. In the case of a successful creation, the colorspace must be released when no longer required via a call to the CGColorSpaceRelease() function:

<pre>
CGColorSpaceRelease(colorspace);
</pre>

Gray scale and CMYK color spaces may similarly be created using the CGColorSpaceCreateDeviceGray() and CGColorSpaceCreateDeviceCMYK() functions respectively.

Once the colorspace has been created, the next task is to define the components. The following declaration defines a set of RGBA components for a semi-transparent blue color:

<pre>
CGFloat components[] = {0.0, 0.0, 1.0, 0.5};
</pre>

With both the colorspace and the components defined, the CGColorRef structure can be created:

<pre>
CGColorRef color = CGColorCreate(colorspace, components);
</pre>

The color may then be used to draw using the Quartz 2D drawing API functions. When no longer required the color must be released:

<pre>
CGColorRelease (color);
</pre>

Another useful method for creating colors involves the UIKit UIColor class. Whilst this class cannot be used directly with the Quartz function since it an Objective-C class, it is possible to extract a color in CGColorRef format from the UIColor class by referencing the CGColor property. 

The advantage offered by UIColor, in addition to being object oriented, is that it includes a range of convenience methods that can be used to create colors. For example, the following code uses the UIColor class to create the color red, and then accesses the CGColor property for use as an argument to CGCreateSetStrokeColorWithColor() C function:

<pre>
CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
</pre>

The color selection and transparency can be further refined using this technique simply by specifying additional components in conjunction with the UIColor colorWith<color> methods. For example:

<pre>
[UIColor colorWithRed:1.0 green:0.3f blue:0.8f alpha:0.5f];
</pre>

As we can see, the use of UIColor avoids the necessity to create colorspaces and components when working with colors. Refer to the Apple documentation for more details of the range of methods provided by the UIColor class. 

== Summary ==

This chapter has covered some of the basic principles behind the drawing of two dimensional graphics on the iPhone using the Quartz 2D API. Topics covered included obtaining the graphics context, implementing the drawRect method and the handling of colors and transparency. In [[An iOS 4 iPhone Graphics Drawing Tutorial using Quartz 2D (Xcode 4)|An iOS 4 iPhone Graphics Drawing Tutorial using Quartz 2D]], this theory will be put into practice with examples of how to draw a variety of shapes and images on an iPhone screen.


<htmlet>ios9_upgrade</htmlet>



<htmlet>ezoicbottom</htmlet>
<hr>
<table border="0" cellspacing="0" width="100%">
<tr>
<td width="20%">[[Detecting iOS 4 iPhone Touch Screen Gesture Motions (Xcode 4)|Previous]]<td align="center">[[iPhone iOS 4 Development Essentials Xcode 4 Edition|Table of Contents]]<td width="20%" align="right">[[An iOS 4 iPhone Graphics Drawing Tutorial using Quartz 2D (Xcode 4)|Next]]</td>
<tr>
<td width="20%">Detecting iOS 4 iPhone Touch Screen Gesture Motions (Xcode 4<td align="center"><td width="20%" align="right">An iOS 4 iPhone Graphics Drawing Tutorial using Quartz 2D (Xcode 4)</td>
</table>