Essay on Computer Graphics and Figure

Submitted By DanaChoi
Words: 2318
Pages: 10

1 Aim. The purpose of this lab is to introduce students to the following topics: 1.1. The Painter’s model

1.2. Graphics contexts (specifically bitmap, pdf and layer)

1.3. Opaque data types

1.4. Graphics states

1.5. 2D Graphics coordinate systems

1.6. Paths and clipping areas

1.7. Gradients

1.8. Rendering text

2. Reading. Prior to or during the conduct of this lab, students are encouraged to read:

2.1. Apple Developer

2.2. Quartz2D Programming Guide

2.2.1. Overview

2.2.2. Graphics Contexts

2.2.3. Paths

2.2.4. Gradients

2.2.5. Transparency Layers

2.2.6. Text

2.3. Core Graphics Framework Reference 2.4. Color Theory

2.5. Creating Instances of CGRect, CGSize, CGPoint

2.6. UIColor Class Reference

3. Instructions. The instruction tutorial is divided into ten relatively brief sections. Each section is as independent as possible, although since graphics is dependent on a lot of information, there will be overlap. We will use a single project in Xcode for this lab, but we will change the classes or storyboards as required to illustrate the demos for the respective sections. Source code is available for each of the sections, so you can import the source or build from scratch. The important thing is that you understand how and why different statements are used. Also, notice the mix of syntax between the Foundation library that we are used to (e.g. [object message]) and what Quartz2D uses (e.g. message()). 3.1. The Painter’s Model and Graphics Contexts. Most 2D computer graphics are based on the idea of the “Painter’s Model”. The core idea is that you start with a blank area (like a canvas), and as you draw things to the canvas, they cover things that were previously drawn. The consequence to you is that order of drawing is important.

3.1.1. Create a new class (subclass of UIView) called DemoPainterModelView. Go into the Identity Inspector and set the class for the initial view for the iPhone storyboard to DemoPainterModelView.

3.1.2. This demo basically does four things. The code is given in Figure 3.1.1.

3.1.2.1. Obtains a reference to the graphics context for drawing.

3.1.2.2. Defines some custom colors (using an ARGB color model, see paragraphs 3.2 and 3.6 for more).

3.1.2.3. Defines some shapes (which are effectively special cases of paths, see paragraph 3.4 for more).

3.1.2.4. Paints the scene.

Figure 3.1.1 – The Painter’s Model

3.1.3. Build and run this code, and you get Figure 3.1.2.

Figure 3.1.2 – Painted Model, Version 1

3.1.4. Go back to the code and re-arrange the filling order so that center is first instead of last. Since you draw that, and then draw on top of it, the effect that is achieved is given in Figure 3.1.3.

Figure 3.1.3 – The Painter’s Model, Version 2

3.1.5. Go and uncomment the first command. Since the things that we want to draw are no longer visible, Quartz2D improves performance by simply not drawing them. When you build and run with this modification, you get the result in Figure 3.1.4.

Figure 3.1.4 – The Painter’s Model, MIA

3.2. Opaque data types are used by Quartz2D to create objects that your application operates on to achieve a particular output. Some selected opaque data types are shown in Table 3.2.1. In the demo in 3.1, we have already seen CGColorRef. The full table of opaque data types (and the graphics state) is in the overview of the Quartz programming guide.

Data Type
Purpose
CGPathRef
Vector graphics to create paths that you fill or stroke.
CGImageRef
Represent bitmap images and bitmap image masks based on sample data that you supply.
CGLayerRef
Represent a drawing layer that can be used for repeated drawing (such as for backgrounds or patterns) and for off-screen drawing.
CGGradientRef
Paint gradients.
CGColorRef
Informs Quartz how to interpret color.
CGFontRef
Draws text.
Table 3.2.1 – Selected Opaque Data Types

3.3. The