Basic graphics with Core Graphics. In this tutorial we cover the following topics
- General information
- First basic project
One of the main components of Core Graphics is a set of APIs called Quartz 2D. This is a collection of functions, data types, and objects designed to let us draw directly into a view or an image in memory. Quartz 2D treats the view or image that is being drawn into as a virtual canvas. It follows what’s called a painter’s model, which is just a fancy way of saying that the drawing commands are applied in much the same way that paint is applied to a canvas.
Quartz 2D provides a variety of line, shape, and image drawing functions. Though easy to use, Quartz 2D is limited to two-dimensional drawing.
When using Quartz 2D (Quartz for short), we will usually add the drawing code to the view doing the drawing. For example, we might create a subclass of UIView
and add Quartz function calls to that class’s drawRect:
method. The drawRect:
method is part of the UIView
class definition and is called every time a view needs to redraw itself.
In Quartz, as in many other graphics libraries, drawing happens in a graphics context, usually referred to simply as a context. Every view has an associated context. We retrieve the current context and use it to make various Quartz drawing calls, and let the context worry about rendering our drawing onto the view. We can think of this context as a sort of canvas. The system provides us with a default context where the contents will appear on the screen. However, it’s also possible to create a context of our own for doing drawing that we don’t want to appear immediately, but to save for later or use for something else. We’re going to be focusing mainly on the default context, which we can acquire with this line of code:
1 |
CGContextRef context = UIGraphicsGetCurrentContext(); |
A graphics context is an opaque data type (CGContextRef
) that encapsulates all the information Quartz uses to draw images to an output device, such as a PDF file, a bitmap, or a window on a display. The information inside a graphics context includes graphics drawing parameters and a device-specific representation of the paint on the page. All objects in Quartz are drawn to, or contained by, a graphics context.
Thanks to graphics context, when we draw with Quartz, all device-specific characteristics are contained within the specific type of graphics context we use. In other words, we can draw the same image to a different device simply by providing a different graphics context to the same sequence of Quartz drawing routines. We do not need to perform any device-specific calculations; Quartz does it for us.
- Step 1: create a new project
Create a new project- Select File | New | Project...
- Select Single View Application on the template selection sheet.
- As the product name enter
iOS Graphics Basic
- Set the Language to Objective-C, devices pop-up button to Universal and make sure the check box labeled Use Core Data is unchecked.
- Step 2: add a new class
Add a new class- Select iOS Graphics Basic folder from the Project Navigator (the folder that currently contains the app delegate and view controller files) and next select File | New | File...
- Select Cocoa Touch Class on the template selection sheet.
- As the class name enter
MainView
and make it a subclass ofUIView
- Step 3: add a code
- Single-click
MainView.m
and add/modify the following code123456789101112131415#import "MainView.h"@implementation MainView// 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, 1.0);CGContextSetStrokeColorWithColor(context, [UIColor greenColor].CGColor);CGContextMoveToPoint(context, 0.0, 0.0);CGContextAddLineToPoint(context, 20.0, 20.0);CGContextStrokePath(context);}@end
- Single-click
- Step 4: change a class for the View Controller's View
- Select Main.storyboard from the Project Navigator to open Interface Builder.
- Select View item from View Controller from Document Outline.
- Select Class item located in Custom Class section in Identity inspector.
- Change the class name form
UIView
toMainView
- Step 5: run the application
Run the application. Verify that our line has been drawn on "restricted" area at the top of the screen just under the carrier informaton.
- Step 6: add a new view
- Select a View component from a Library and drop it on existing view.
- Set all necessary constraints.
- Select this View item from Document Outline.
- Select Class item located in Custom Class section in Identity inspector.
- Change the class name from
UIView
toMainView
- Select a View component from a Library and drop it on existing view.
- Step 7: run the application
This time, because we have two views implementing the same classMainView
, two lines have been drawn.
- Step 8: change a class for the View Controller's View
Repeat steps from Step 4- Select Main.storyboard from the Project Navigator to open Interface Builder.
- Select View item from View Controller from Document Outline.
- Select Class item located in Custom Class section in Identity inspector.
- Change the class name from
MainView
toUIView
- Step 9: run the application
This time we should see only one, well located, line.