Professional Documents
Culture Documents
Ads by Google
Iphone
Drawing
C# Graphics Drawing
Draw
Table of Contents
Purchase and download the fully updated iOS 5 Edition of this book in Print ($27.99) or eBook ($12.99) format. iPhone iOS 5 Development Essentials Print and eBook (ePub/PDF) editions contain 56 chapters.
eBookFrenzy.com
As previously discussed in Drawing iPhone 2D Graphics with Quartz, the Quartz 2D API is the primary mechanism by which 2D drawing operations are performed within iPhone applications. Having provided an overview of Quartz 2D as it pertains to iPhone development in that chapter, the focus of this chapter is to provide a tutorial that provides examples of how 2D drawing is performed. If you are new to Quartz 2D and have not yet read Drawing iPhone 2D Graphics with Quartz it is recommended that you do so now before embarking on this tutorial.
Contents
1 2 3 4 5 6 The iPhone Drawing Example Application Creating the New Project Creating the UIView Subclass Locating the drawRect Method in the UIView Subclass Drawing a Line Drawing Paths
www.techotopia.com/index.php/An_iPhone_Graphics_Drawing_Tutorial_using_Quartz_2D
1/17
12/30/11
7 Drawing a Rectangle 8 Drawing an Ellipse or Circle 9 Filling a Path with a Color 10 Drawing an Arc 11 Drawing a Cubic Bzier Curve 12 Drawing a Quadratic Bzier Curve 13 Dashed Line Drawing 14 Drawing an Image into a Graphics Context
www.techotopia.com/index.php/An_iPhone_Graphics_Drawing_Tutorial_using_Quartz_2D
2/17
12/30/11
Click on the Next button and in the subsequent screen, name the class implementation file draw2D.m and select the Also create draw2D.h option if it is not already selected before clicking on the Finish button. Double click on the draw2DViewController.xib file so that it loads into the Interface Builder tool and select the UIView component in the View window. Display the Identity Inspector (Tools -> Identity Inspector or press the Command+4 key combination) and change the Class setting from UIView to our new class named draw2D:
eBookFrenzy.com
www.techotopia.com/index.php/An_iPhone_Graphics_Drawing_Tutorial_using_Quartz_2D
3/17
12/30/11
In the remainder of this tutorial we will modify the code in the drawRect method to perform a variety of different drawing operations.
www.techotopia.com/index.php/An_iPhone_Graphics_Drawing_Tutorial_using_Quartz_2D
4/17
12/30/11
Drawing a Line
In order to draw a line on an iPhone screen using Quartz 2D we first need to obtain the graphics context for the view:
CGContextRef context = UIGraphicsGetCurrentContext();
Once the context has been obtained, the width of the line we plan to draw needs to be specified:
CGContextSetLineWidth(context, 2.0);
Next, we need to create a color reference. We can do this by specifying the RGBA components of the required color (in this case opaque blue):
CGFloat components[] = {0.0, 0.0, 1.0, 1.0}; CGColorRef color = CGColorCreate(colorspace, components);
Using the color reference and the context we can now specify that the color is to be used when drawing the line:
CGContextSetStrokeColorWithColor(context, color);
The next step is to move to the start point of the line that is going to be drawn:
CGContextMoveToPoint(context, 0, 0);
The above line of code indicates that the start point for the line is the top left hand corner of the device display. We now need to specify the end point of the line, in this case 300, 400:
CGContextAddLineToPoint(context, 300, 400);
Having defined the line width, color and path, we are ready to draw the line and release the colorspace and color reference objects:
CGContextStrokePath(context); CGColorSpaceRelease(colorspace); CGColorRelease(color);
Bringing this all together gives us a drawRect method that reads as follows:
- (void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSetLineWidth(context, 2.0); CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB(); CGFloat components[] = {0.0, 0.0, 1.0, 1.0}; CGColorRef color = CGColorCreate(colorspace, components); CGContextSetStrokeColorWithColor(context, color); CGContextMoveToPoint(context, 0, 0); CGContextAddLineToPoint(context, 300, 400); CGContextStrokePath(context); CGColorSpaceRelease(colorspace); CGColorRelease(color); }
www.techotopia.com/index.php/An_iPhone_Graphics_Drawing_Tutorial_using_Quartz_2D
5/17
12/30/11
When compiled and run, the application should display as illustrated in the following figure:
Note that in the above example we manually created the colorspace and color reference. As described in Drawing iPhone 2D Graphics with Quartz colors can also be created using the UIColor class. For example, the same result as outlined above can be achieved with fewer lines of code as follows:
- (void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSetLineWidth(context, 2.0); CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor); CGContextMoveToPoint(context, 0, 0); CGContextAddLineToPoint(context, 300, 400); CGContextStrokePath(context); }
Drawing Paths
As you may have noticed, in the above example we draw a single line by essentially defining the path between two points. Defining a path that comprises multiple points allows us to draw using a sequence of straight lines all connected to each other using repeated calls the CGContextAddLineToPoint() function. Non-straight lines may also be added to a shape using calls to, for example, the CGContextAddArc() function. The following code draws a diamond shape:
- (void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext();
www.techotopia.com/index.php/An_iPhone_Graphics_Drawing_Tutorial_using_Quartz_2D
6/17
12/30/11
CGContextSetLineWidth(context, 2.0); CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor); CGContextMoveToPoint(context, 100, 100); CGContextAddLineToPoint(context, 150, 150); CGContextAddLineToPoint(context, 100, 200); CGContextAddLineToPoint(context, 50, 150); CGContextAddLineToPoint(context, 100, 100); CGContextStrokePath(context); }
When executed, the above code should produce output that appears as follows:
Drawing a Rectangle
Rectangles are drawn in much the same way as any other path is drawn, with the exception that the path is defined by specifying the x and y co-ordinates of the top left hand corner of the rectangle together with the rectangles height and width. These dimensions are stored in a CGRect structure and passed through as an argument to the CGContextAddRect function:
- (void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSetLineWidth(context, 2.0); CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor); CGRect rectangle = CGRectMake(60,170,200,80);
www.techotopia.com/index.php/An_iPhone_Graphics_Drawing_Tutorial_using_Quartz_2D
7/17
12/30/11
The above code will result in the following display when compiled and executed:
When compiled, the above code will produce the following graphics:
www.techotopia.com/index.php/An_iPhone_Graphics_Drawing_Tutorial_using_Quartz_2D
8/17
12/30/11
In order to draw a circle simply define a rectangle with equal length sides (a square in other words).
The above code produces the following graphics on the device or simulator display when compiled and run:
www.techotopia.com/index.php/An_iPhone_Graphics_Drawing_Tutorial_using_Quartz_2D
9/17
12/30/11
The following code draws a rectangle with a blue border and then fills the rectangular space with red:
- (void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSetLineWidth(context, 2.0); CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor); CGRect rectangle = CGRectMake(60,170,200,80); CGContextAddRect(context, rectangle); CGContextStrokePath(context); CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor); CGContextFillRect(context, rectangle); }
When added to the example application, the resulting display should appear as follows:
www.techotopia.com/index.php/An_iPhone_Graphics_Drawing_Tutorial_using_Quartz_2D
10/17
12/30/11
Drawing an Arc
An arc may be drawn by specifying two tangent points and a radius using the CGContextAddArcToPoint() function:
- (void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSetLineWidth(context, 2.0); CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor); CGContextMoveToPoint(context, 100, 100); CGContextAddArcToPoint(context, 100,200, 300,200, 100); CGContextStrokePath(context); }
www.techotopia.com/index.php/An_iPhone_Graphics_Drawing_Tutorial_using_Quartz_2D
11/17
12/30/11
The above code will cause the following curve to be drawn when compiled and executed in our example application:
www.techotopia.com/index.php/An_iPhone_Graphics_Drawing_Tutorial_using_Quartz_2D
12/17
12/30/11
The above code, when executed, will display a curve that appears as illustrated in the following figure:
www.techotopia.com/index.php/An_iPhone_Graphics_Drawing_Tutorial_using_Quartz_2D
13/17
12/30/11
www.techotopia.com/index.php/An_iPhone_Graphics_Drawing_Tutorial_using_Quartz_2D
14/17
12/30/11
The corresponding drawRect code that drew the above line reads as follows:
- (void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSetLineWidth(context, 5.0); CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor); CGFloat dashArray[] = {2,6,4,2}; CGContextSetLineDash(context, 3, dashArray, 4); CGContextMoveToPoint(context, 10, 200); CGContextAddQuadCurveToPoint(context, 150, 10, 300, 200); CGContextStrokePath(context); }
www.techotopia.com/index.php/An_iPhone_Graphics_Drawing_Tutorial_using_Quartz_2D
15/17
12/30/11
- (void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); UIImage *myImage = [UIImage imageNamed:@"pumpkin.jpg"]; CGPoint imagePoint = CGPointMake(0, 0); [myImage drawAtPoint:imagePoint]; [myImage release]; }
As is evident when the application is run, the size of the image far exceeds the available screen size:
Using the drawInRect method of the UIImage object we can scale the image to fit better on the screen:
- (void)drawRect:(CGRect)rect { UIImage *myImage = [UIImage imageNamed:@"pumpkin.jpg"]; CGRect imageRect = CGRectMake(10, 10, 300, 400); [myImage drawInRect:imageRect]; [myImage release]; }
www.techotopia.com/index.php/An_iPhone_Graphics_Drawing_Tutorial_using_Quartz_2D
16/17
12/30/11
Purchase and download the fully updated iOS 5 Edition of this book in Print ($27.99) or eBook ($12.99) format. iPhone iOS 5 Development Essentials Print and eBook (ePub/PDF) editions contain 56 chapters.
eBookFrenzy.com
Previous Table of Contents Drawing iPhone 2D Graphics with Quartz Retrieved from "http://www.techotopia.com/index.php/An_iPhone_Graphics_Drawing_Tutorial_using_Quartz_2D"
This page was last modified 13:52, 25 March 2011. Copyright 2011 Techotopia.com. All Rights Reserved.
www.techotopia.com/index.php/An_iPhone_Graphics_Drawing_Tutorial_using_Quartz_2D
17/17