iPhone开发基础教程笔记（十二）--第十二章 使用Quartz和OpenGL绘图

第十二章 使用Quartz和OpenGL绘图

有时应用程序需要能够自定义绘图。一个库是Quartz 2D，她是Core Graphics框架的一部分；另一个库是OpenGL ES，她是跨平台的图形库。OpenGL ES是跨平台图形库OpenGL的简化版。OpenGL ES是OpenGL的一个子集，OpenGL ES是专门为iPhone之类的嵌入式系统（因此缩写字母为“ES”）设计的。

12.1 图形世界的两个视图
Quartz是一组函数、数据类型以及对象，专门设计用于直接在内存中对视图或图像进行控制。
Quartz将正在绘制的视图或图像视为一个虚拟的画布，并遵循所谓的“绘画者模型”。如果绘画者将整个画布涂为红色，然后将画布的下半部分涂为蓝色，那么画布将变为一半红色、一半蓝色或紫色。如果颜料是不透明的，应该为蓝色，如果颜料是半透明的，应该为紫色。每个绘图操作都将被应用于画布，并且处于之前所有绘图操作之上。
另一方面，OpenGL ES以状态机的形式实现。OpenGL ES不允许执行直接影响视图、窗口或图像的操作，他维护一个虚拟的三维世界。当向这个世界中添加对象时，OpenGL会跟踪所有对象的状态。虽然OpenGL ES没有提供虚拟画布，但是却提供了一个进入其世界的虚拟窗口。可以向该世界中添加对象并定义虚拟窗口相对于该世界的位置。然后，OpenGL根据配置方式以及各种对象彼此相对的位置绘制视图，并通过该窗口呈现给用户。这个概念有点抽象。感到迷惑的话，就通过后面的示例理解吧。

Quartz相对比较容易使用。他提供了各种直线、形状以及图像绘制函数。但Quartz 2D仅限于二维绘图。尽管许多Quartz函数会在绘图时利用硬件加速，但无法保证在Quartz中执行的任何操作都得到了加速。
OpenGL同时提供了二维和三维绘图。他经过专门设计，目的是为了充分利用硬件加速。由于他可以跟踪虚拟世界的状态，因此还非常适合用于编写游戏和其他复杂的、图形密集的程序。

12.2 本章的绘图应用程序
我们将分别使用Quartz 2D和OpenGL ES来构建应用程序。
该应用程序的特点是顶部和底部各有一个工具栏，每个工具栏都有一个分段控件。顶部的控件用于更改图形颜色，底部的控件用于更改要绘制的形状。当用户触击和拖动对象时，程序将用所需颜色绘制所选形状。为了最大程度地降低应用程序的复杂性，一次只绘制一种形状。

12.3 Quartz绘图方法
使用Quartz绘制图形时，通常会向绘制图形的视图中添加绘图代码。例如，可能会创建UIView的子类，并向该类的drawRect:方法中添加Quartz函数调用。drawRect:方法是UIView类定义的一部分，并且每次需要重绘视图时都会调用该方法。如果在drawRect:中插入Quartz代码，则会先调用该代码，然后重绘视图。

12.3.1 Quartz 2D的图形上下文
在Quartz 2D中，和在其他Core Graphics中一样，绘图是在“图形上下文”中进行的，通常，只称为上下文。每个视图都有相关联的上下文。要在某个视图中绘图时，你将检索当前上下文，使用此上下文进行各种Quartz图形调用，并且让此上下文负责将图形呈现到视图上。

下面这行代码将检索当前上下文：
CGContextRef context=UIGraphicsGetCurrentContext();

说明：我们使用Core Graphics C函数，而不是使用Obj-C对象来绘图。Core Graphics的API是基于C的，因此在本章的此部分中编写的大多数代码将由C函数调用组成。

定义图形上下文之后，可以将其传递给各种Core Graphics函数来进行绘图。例如：以下代码将在上下文中绘制一条2像素宽的直线：

CGContextSetLineWidth(context,2.0);
CGContextSetStrokeColorWithColor(context,[UIColor redColor].CGColor);
CGContextMoveToPoint(context,100.0f,100.0f);
CGContextAddLineToPoint(context,200.0f,200.0f);
//之前的操作就像用不可见的墨水在书写一样，下一步是告知Quartz使用CGContextStrokePath()绘制直线
CGContextStrokePath(context);

12.3.2 坐标系
左上角为（0,0），向下移动时y增加，向右移动时x增加。
在OpenGL Es中，（0,0）位于左下角，向上移动时y增加，向右移动时x增加。
使用OpenGL时，必须将视图坐标系转换为OpenGL坐标系。这很容易。稍后讲解

12.3.3 指定颜色
UIKit提供了一个Obj-C类：UIColor。你不能在Core Graphics调用中直接使用UIColor对象，但可以使用他的CGColor属性从UIColor实例中检索CGColor引用。

1，iPhone显示的颜色理论
在现代计算机图形中，通常使用argb来表示颜色。在Quartz 2D中，这些值都是CGFloat类型（与iPhone上的float相同），并且只能在0和1中取值。

2，比所看到的颜色还多
除了rgb之外，还有一个a--Alpha，表示透明程度。

对于大多数操作来说，我们不必担心所使用的颜色模型。我们只需从UIColor对象中传递CGColor，Core Graphics会处理任何所需的转换。在使用OpenGL ES时，记住由于OpenGL ES需要采用RGBA来指定颜色，因此Quartz支持其他颜色模型，这一点非常重要。
UIColor的便利方法创建的实例都是使用RGBA颜色模型。
如果不使用便利方法。下面代码：
return [UIColor colorWithRed:1.0f green:0.0f blue:0.0f alpha:1.0f];

12.3.4 在上下文中绘制图像

使用Quartz 2D，可以直接在上下文中绘制图像。这是Obj-C类（UIImage）的另一个示例，你可以使用此类作为操作Core Graphics数据结构（CGImage）的备用选项。此UIImage类包含将图像绘制到当前上下文中的方法。你需要确定此图像出现在上下文中的位置，方法是：指定一个CGPoint来确定图像的左上角或者指定一个CGRect来框住图像，并根据需要调整图像大小使其适合该框。可以在当前上下文中绘制一个UIImage，如下所示：
CGPoint drawPoint=CGPointMake(100.0f,100.0f);
[image drawAtPoint:drawPoint];

12.3.5 绘制形状：多边形、直线和曲线
例如绘制一个椭圆：
CGRect theRect=CGMakeRect(0,0,100,100);
CGContextAddEllipseInRect(context,theRect);
CGContextDrawPath(context,kCGPathFillStroke);

12.3.6 Quartz 2D 工具示例：模式、梯度、虚线模式
Quartz 2D不像OpenGL那么昂贵，却提供了许多吸引人的工具，尽管这些工具中的许多工具不在本书的讨论范围之内，但你应该知道他们的存在。例如，Quartz 2D支持用梯度填充多边形，而不只是用纯色，并且不仅仅支持实线，而且还支持虚线模式。

12.4 构建QuartzFun应用程序
在Xcode中，使用基于视图的应用程序模版创建一个新项目---QuartzFun。
我们将在视图中执行自定义绘图，因此需要创建一个UIView子类。在该子类中，我们将通过覆盖drawRect:方法进行绘图。创建一个新的Cocoa Touch Classes文件，并选择UIView subclass模版。命名为QuartzFunView.m。

与之前一样，我们将定义一些常量，但这次定义的常量是多个类所需要的，并且不是特定于某个类的。我们将只为常量创建头文件，因此通过以下访问创建一个新文件：从Other栏中选择Empty File 模版，命名为Constants.h。
我们还需要创建两个文件，让UIColor类提供返回随机颜色的方法，即为UIColor创建一个类别。同样使用Empty File模版创建两个文件，将他们分别命名为UIColor-Random.h和.m。

12.4.1 创建随机颜色
UIColor-Random.h:

#import <UIKit/UIKit.h>
@interface UIColor(Random)
+ (UIColor *)randomColor;
@end

UIColor-Random.m:

#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

12.4.2 定义应用程序常量
修改Constants.h：

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

typedef enum {
 kRedColorTab=0,
 kBlueColorTab,
 kYellowColorTab,
 kGreenColorTab,
 kRranomColorTab
} ColorTabIndex;
#define degreesToRadian(x) (3.14159265358979323846 * (x) / 180.0)

12.4.3 实现QuartzFunView框架
修改QuartzFunView.h：

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

@interface QuartzFunView:UIView {
 CGPoint firstTouch;
 CGPoint lastTouch;
 UIColor *currentColor;
 ShapeType shapeType;
 UIImage *drawImage;
 BOOL useRandomColor;
}
@property ...
@end

切换到QuartzFunView.m：

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

@implementation QuartzFunView

@synthesize ...

- (id)initWithCoder:(NSCoder *)coder
{
 if ((self=[super initWithCoder:coder])) {
  self.currentColor=[UIColor redColor];
  self.useRandomColor=NO;
  if (drawImage==nil) 
    self.drawImage=[UIImage imageNamed:@"iphone.png"];
 }
 return self;
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event 
{
 if (useRandomColor)
   self.currentColor=[UIColor randomColor];
 UITouch *touch=[touches anyObject];
 firstTouch=[touch locationInView:self];
 lastTouch=[touch locationInView:self];
 [self setNeedsDisplay];
}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
 UITouch *touch=[touches anyObject];
 lastTouch=[touch locationInView:self];

 [self setNeedsDisplay];
}

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

 [self setNeedsDisplay];
}

- (void)drawRect:(CGRect)rect {
 //Drawing code
}
...
@end

由于该视图是从nib中加载的，因此，我们首先实现initWithCoder:。请记住nib中的对象实例将存储为归档对象，这与我们在上一章将对象归档和加载到磁盘所使用的机制完全相同。因此，从nib中加载对象实例时，init:或initWithFrame:都不会调用。而是使用initWithCoder:，因此，任何初始化代码都需要在这里添加。

drawRect:方法是此应用程序的主体部分，目前仅包含一条注释。我们首先需要完成应用程序设置，然后再添加绘图代码。

12.4.4 向视图控制器中添加输出口和操作

单击QuartzFunViewController.h:

#import <UIKit/UIKit.h>

@interface QuartzFunViewController:UIViewController {
 IBOutlet UISegmentedControl *colorControl;
}
@property (nonatomic,retain) UISegmentedControl *colorControl;
- (IBAction)changeColor:(id)sender;
- (IBAction)changeShape:(id)sender;
@end

切换到QuartzFunViewController.m:

#import "QuartzFunViewController.h"
#import "QuartzFunView.h"
#import "UIColor-Random.h"
#import "Constants.h"

@implementation QuartzFunViewController
@synthesize colorControl;

- (IBAction)changeColor:(id)sender {
 UISegmentedControl *control=sender;
 NSInteger index=[control selectedSegmentIndex];
  
 QuartzFunView *quartzView=(QuartzFunView *)self.view;
 
 switch (index) {
   case kReadColorTab:
     quartzView.currentColor=[UIColor redColor];
     quartzView.useRandomColor=NO;
     break;
  ...
  case kRandomColorTab:
    quartzView.useRandomColor=YES;
    break;
  default:
    break;
 }
}

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

...
@end


12.4.5 更新QuartzFunViewController.xib
打开QuartzFunViewController.xib，先更改视图的类，单击View图标，cmd+4打开身份检查器，将该类从UIView改为QuartzFunView。
接下来，从库中找到Navigation Bar。确保你控制的是Navigation Bar，而非Navigation Controller。将其紧贴在视图窗口的顶部。接下来，从库中找到Segmented Control，并将该控件拖动到Navigation Bar的顶部。放下该控件之后，他应该仍然处于选中状态。捕捉此分段控件任何一侧的调整大小的点，调整他的大小，以便它占据导航栏的整个宽度。你不会看到任何蓝色引导线，但这种情况下，IB会限制该栏的最大大小，因此只需拖动他直到不能再进一步展开为止。
按Cmd+1调出属性检查器，并将分段数量从2改为5.依次双击各分段，将他们的标签分别改为Red、Blue、Yellow、Green和Random。

按住Ctrl，将File's Owner拖到分段控件上，选择colorControl输出口。接下来，选中分段控件，Cmd+2打开连接检查器，从Value Changed事件拖到File's Owner选择changeColor:操作。

现在，从库中拖出Toolbar，放置在窗口底部。然后拖出另一个Segmented Control到工具栏上。
结果是，分段控件在工具栏中居中有点困难，因此我们将提供一点帮助。将Flexible Space bar Button Item从库中拖到位于分段控件左侧的工具栏上。接下来，将另一个Flexible Space bar Button Item拖到位于分段控件右侧的工具栏上。当我们调整该工具栏的大小时，这些项目将使分段控件位于工具栏的中心。单击分段控件将其选中，并调整其大小以使他适合此工具栏，其中左侧两侧各留一点空间。
接下来，Cmd+1打开属性检查器，并将分段从2改为4.标题分别改为Line、Rect、Ellipse和Image。将Value Changed事件连接到File's Owner的ChangeShape:方法。

编译运行应用程序，确保一切正常。目前你还不能在屏幕上绘制形状，但分段控件可以工作。

12.4.6 绘制直线

返回Xcode，编辑QuartzFunView.m，并有以下代码替换空的drawRect:方法。

- (void)drawRect:(CGRect)rect {
 if (currentColor==nil)
   self.currentColor=[UIColor redColor];

 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:firstTouch.y,
   fabsf(firstTouch.x-lastTouch.x),
   fabsf(firstTouch.y-lastTouch.y)
 );
       

 switch (shapeType) {
  case kLineShape:
   CGContextMoveToPoint(context,firstTouch.x,firstToch.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.height /2;
   CGPoint drawPoint=CGPointMake(lastTouch.x-horizontalOffset,lastTouch.y-verticalOffset);
   [drawImage drawAtPoint:drawPoint];
   break;
  }
  //注意，这里使用了花括号。GCC在case语句之后的第一行中声明变量时遇到了问题。这些花括号是我们告诉GCC停止抱怨的一种方式。
  default:
   break;
 }
}

由于Quartz 2D是Core Graphics的一部分。因此在构建和运行之前，需要将Core Graphics框架添加到项目中。

在该应用程序中，你不会注意到速度减慢，但是在更复杂的应用程序中，你会看到某些延迟。该问题由QuartzFunView.m中的方法touchesMoved:和touchesEnded:引起。这两个方法都有下面这行代码：
[self setNeedsDisplay];
很明显，这是我们告知视图重新绘制自身的方式。为避免在拖动期间多次强制重新绘制整个视图，我们可以使用setNeedsDisplayInRect:方法。setNeedsDisplayInRect:是一个NSView方法，该方法会将视图区域的一个矩形部分标记为需要重新显示。我们需要重新绘制的不仅仅是firstTouch和lastTouch之间的矩形，还有当前拖动所包围的任何屏幕部分。如果用户触摸屏幕，然后在屏幕上到处乱画，则只需要重新绘制firstTouch和lastTouch之间的部分，将许多不需要的已绘制的内容留在屏幕上。
答案是跟踪受CGRect实例变量中的特定拖动影响的整个区域。在touchesBegan:中，我们将该实例变量重置为仅用户触摸的点。然后在touchesMoved:和touchesEnded:中，使用一个Core Graphics函数获取当前矩形和存储的矩形的并集，然后存储所得到的矩形。此外，还使用该函数指定需要重新绘制的视图部分。该方法为我们提供了受当前拖动影响的正在运行的全部区域。
我们立刻在drawRect:方法中计算当前矩形，以便绘制椭圆形和矩形形状。我们将该计算结果移动到新方法中，以便在所有3个额外i只中使用此新方法，而没有重复代码。准备好了吗？让我们开始吧！
对QuartzFunView.h进行以下更改：

...
{
...
CGRect redrawRect;
}
...
@property (readonly) CGRect currentRect;
@property CGRect redrawRect;
@end

切换到QuartzFunView.m:

...
@synthesize redrawRect;
@dynamic currentRect;

- (CGRect)currentRect {
 return CGRectMake (
   (firstTouch.x>lastTouch.x)?lastTouch.x:firstTouch.x,
   (firstTouch.y>lastTouch.y)?lastTouch.y:firstTouch.y,
   fabsf(firstTouch.x-lastTouch.x),
   fabsf(firstTouch.y-lastTouch.y)
 );
}

- (void)drawRect:(CGRect)rect {
 ...
 switch (shapeType) {
  case kLineShape:
   ...
  case kRectShape:
   CGContextAddRect(context,self.currentRect);
   CGContextDrawPath(context,kCGPathFillStroke);
   break;
  case kEllipseShape:
   CGContextAddEllipseInRect(context,self.currentRect);
   CGContextDrawPath(context,kCGPathFillStroke); 
   break;
  case kImageShape: 
   ...
  default:
   break;
 }
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event 
{
 if (useRandomColor)
   self.currentColor=[UIColor randomColor];
 UITouch *touch=[touches anyObject];
 firstTouch=[touch locationInView:self];
 lastTouch=[touch locationInView:self];

 if (shapeType==kImageShape) {
   CGFloat horizontalOffset=drawImage.size.width/2;
   CGFloat verticalOffset=drawImage.size.height /2;
   redrawRect=CGRectMake(firstTouch.x-horizontalOffset,firstTouch.y-verticalOffset,drawImage.size.width,drawImage.size.height);
 }
 else
  redrawRect=CGRectMake(firstTouch.x,firstTouch.y,0,0);

 [self setNeedsDisplay];

}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
 UITouch *touch=[touches anyObject];
 lastTouch=[touch locationInView:self];

 if (shapeType==kImageShape) {
   CGFloat horizontalOffset=drawImage.size.width/2;
   CGFloat verticalOffset=drawImage.size.height /2;
   redrawRect=CGRectMake(firstTouch.x-horizontalOffset,firstTouch.y-verticalOffset,drawImage.size.width,drawImage.size.height);
 }
 else
  redrawRect=CGRectUnion(redrawRect,self.currentRect);
 redrawRect=CGRectInSet(redrawRect,-2.0,-2.0);

 [self setNeedsDisplayInRect:redrawRect];
}

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

 if (shapeType==kImageShape) {
   CGFloat horizontalOffset=drawImage.size.width/2;
   CGFloat verticalOffset=drawImage.size.height /2;
   redrawRect=CGRectMake(firstTouch.x-horizontalOffset,firstTouch.y-verticalOffset,drawImage.size.width,drawImage.size.height);
 }
 
 redrawRect=CGRectUnion(redrawRect,self.currentRect);
 

 [self setNeedsDisplayInRect:redrawRect];
}

@end

仅增加了几行代码，我们就减少了重新绘制视图所需的大量工作（不再需要擦除和重新绘制未受当前拖动影响的视图部分）。像这样妥善处理iPhone宝贵的处理器周期，可以在应用程序性能方面产生巨大差别，尤其是当应用程序变得更加复杂时。

12.5 一些OpenGL ES基础知识
对OpenGL ES的详细介绍本身就是一本书，因此我们在此不对其进行讨论。我们使用OpenGL ES重新创建我们的Quartz 2D应用程序，只是为了让你对其有个基本了解，并且向你提供一些示例代码。

说明：准备在你自己的应用程序中添加OpenGL时，请顺便浏览一下http:www.khronos.org/opengles/，该网页是OpenGL ES标准组的主页。更好的做法是访问此页并搜索单词“tutorial”：http://www.khronos.org/developers/resources/opengles/。

让我们开始创建应用程序吧

构建GLFun应用程序
在Xcode中创建一个基于视图的新应用程序，命名为GLFun。为了节省时间，将文件Constants.h、UIColor-Random.h、UIColor-Random.m和iPhone.png从Quartz-Fun项目复制到这个新项目中。
打开GLFunViewController.h并进行和QuartzFunViewController.h相同的修改：
声明一个IBOutlet UISegmentedControl *colorControl;
- (IBAction)changeColor:(id)sender;
- (IBAction)changeShape:(id)sender;

切换到GLFunViewController.m并进行以下更改：

- (IBAction)changeColor:(id)sender
{
 UISegmentedControl *control=sender;
 NSInteger index=[control selectedSegmentIndex];

 GLFunView *glView=(GLFunView *)self.view;
 switch (index) {
  case kRedColorTab:
   glView.currentColor=[UIColor redColor];
   glView.useRandomColor=NO;
   break;
  ...
 }
}

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

这里唯一不同的是我们引用一个名为GLFunView的视图，而不是QuartzFunView的视图。进行绘图的代码包含在UIView的子类中。

继续操作之前，你需要在项目中添加几个文件。在12 GLFun文件夹中，你可以找到4个文件，名称分别为Texture2D.h、Texture2D.m、OpenGLES2DView.h和OpenGLES2DView.m。这些文件中的代码是由苹果公司编写的，他们使得在OpenGL ES中绘制图像更容易。如果你愿意，可以在自己的程序中随意使用这些文件。
OpenGL ES本身并没有sprite或图像；他具有纹理，但纹理必须绘制在对象上。在OpenGL ES中绘制图像的方法是绘制一个多边形，然后将纹理映射到该多边形上，以便他与多边形的大小完全匹配。Texture2D将相对比较复杂的过程封装到一个易于使用的类中。
OpenGLES2DView是一个UIView子类，他使用OpenGL进行绘图。我们设置此视图的目的是便于在一对一的基础上映射OpenGL ES的坐标系和视图的坐标系。OpenGL Es是一个三维系统。OpenGLES2DView将OpenGL 3-D世界映射到2-D视图的像素。注意，尽管视图的OpenGL上下文之间是一对一的关系，但是y坐标仍然是翻转的，因此我们必须将y坐标从视图坐标系转换为OpenGL坐标系。
若要使用OpenGLES2DView类，首先要将其子类化，然后实现draw方法进行实际绘图。还可以在视图中实现所需的任何其他方法，如与触摸有关的方法。

使用UIView子类模版创建一个新文件，命名为GLFunView.m。现在，你可以双击GLFunViewController.xib，然后设计其界面。

完成之后，保存返回Xcode。单击GLFunView.h：

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

@interface GLFunView:OpenGLES2DView {
 CGPoint firstTouch;
 CGPoint lastTouch;
 UIColor *currentColor;
 BOOL useRandomColor;

 ShapeType shapeType;
 
 Texture2D *sprite;
}
@property ...
@end

此类与QuartzFunView.h非常相似，但他不使用UIImage来存放图像，我们使用Texture2D来简化将图像绘制到OpenGL ES上下文中的过程。我们还将超类从UIView改成OpenGLES2DView，以便视图支持使用OpenGL ES进行二维绘图。

切换到GLFunView.m：

- (id)initWithCoder:(NSCoder *)coder
{ if (self=[super initWithCoder:coder]) {
   self.currentColor=[UIColor redCorlo];
   self.useRandomColor=NO;
  }
  return self;
}

- (void)draw
{
 glLoadIdentity();
 
 glClearColor(1.0f,1.0f,1.0f,1.0f);
 glClear(GL_COLOR_BUFFER_BIT);

 CGColorRef color=currentColor.CGColor;
 const CGFloat *components=CGColorGetComponents(color);
 CGFloat red=components[0];
 CGFloat green=components[1];
 CGFloat blue=components[2];

 glColor4f(red,green,blue,1.0);

 switch (shapeType) {
  case kLineShape:{
    if (sprite) {
      [sprite release];
      self.sprite=nil;
    }
    GLFloat vertices[4];

    //Convert coordinates
    vertices[0]=firstTouch.x;
    vertices[1]=self.frame.size.height-firstTouch.y;
    vertices[2]=lastTouch.x;
    vertices[3]=self.frame.size.height-lastTouch.y;
    glLineWidth(2.0);
    glVertexPointer(2,GL_FLOAT,0,vertices);
    glDrawArrays(GL_LINES,0,2);
    break;
  }
  case kRectShape:{
    if (sprite) {
      [sprite release];
      self.sprite=nil;
    }
    
    //Calculate bounding rect and store in vertices
    GLfloat vertices[8];
    GLfloat minX=(firstTouch.x>lastTouch.x)?lastTouch.x:firstTouch.x;
    GLfloat minY=(self.frame.size.height-firstTouch.y > self.frame.size.height-lastTouch.y ) ?
                  self.frame.size.height-lastTouch.y:self.frame.size.height-firstTouch.y;
    GLfloat maxX=(firstTouch.x>lastTouch.x)?firstTouch.x:lastTouch.x;
    GLfloat maxY=(self.frame.size.height-firstTouch.y > self.frame.size.height-lastTouch.y ) ?
                  self.frame.size.height-firstTouch.y:self.frame.size.height-lastTouch.y;

    vertices[0]=maxX;
    vertices[1]=maxY;
    vertices[2]=minX;
    vertices[3]=maxY;
    vertices[4]=minX;
    vertices[5]=minY;
    vertices[6]=maxX;
    vertices[7]=minY;

    glVertexPointer(2,GL_FLOAT,0,vertices);
    glDrawArrays(GL_TRIANGLE_FAN,0,4);
    break;
  }
  case kEllipseShape:{
    if (sprite) {
      [sprite release];
      self.sprite=nil;
    }
        
    GLfloat vertices[720];
    GLfloat xradius=(firstTouch.x>lastTouch.x)? (firstTouch.x-lastTouch.x)/2:(lastTouch.x-firstTouch.x)/2;
    GLfloat yradius=(self.frame.size.height-firstTouch.y>self.frame.size.height-lastTouch.y)?
              ((self.frame.size.height-firstTouch.y)-(self.frame.size.height-lastTouch.y))/2:
              ((self.frame.size.height-lastTouch.y)-(self.frame.size.height-firstTouch.y))/2;
    for (int i=0;i<=720;i+=2)
    {
      GLfloat xOffset=(firstTouch.x>lastTouch.x)?lastTouch.x+xradius:firstTouch.x+xradius;
      GLfloat yOffset=(self.frame.size.height-firstTouch.y>self.frame.size.height-lastTouch.y)?
                self.frame.size.height-lastTouch.y+yradius:
                self.frame.size.height-firstTouch.y+yradius;
      vertices[i]=(cos(degreesToRadian(i))*xradius)+xOffset;
      vertices[i+1]=(sin(degreesToRadian(i))*yradius)+yOffset;
    }
    glVertexPointer(2,GL_FLOAT,0,vertices);
    glDrawArrays(GL_TRIANGLE_FAN,0,360);
    break;
  }
  case kImageShape:
    if (sprite==nil) {      
      self.sprite=[[Texture2D alloc] initWithImage:[UIImage imageNamed:@"iphone.png"]];
      glBindTexture(GL_TEXTURE_2D,sprite.name);
    }
    [sprite drawAtPoin:CGPointMake(lastTouch.x,self.frame.size.height-lastTouch.y)];
    break;
  default:
    break;
 }
 glBindRenderbufferOES(GL_RENDERBUFFER_OES,viewRenderbuffer);
 [context presentRenderbuffer:GL_RENDERBUFFER_OES];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{ if (useRandomColor)
   self.currentColor=[UIColor randomColor];
  UITouch *touch=[[event touchesForView:self] anyObject];
  firstTouch=[touch locationInView:self];
  lastTouch=[touch locationInView:self];
  [self draw];
}

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

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
 UITouch *touch=[touches anyObject];
 lastTouch=[touch locationInView:self];
 
 [self draw];
}
@end

解析:
在initWithCoder:方法中，我们没有创建Texture2D对象。由于我们绘制的形状没有纹理，因此不需要加载纹理。如果加载纹理，OpenGL ES将在绘制多边形时尝试使用纹理。因此，我们需要采取一些步骤以确保在绘制其他形状时不加载纹理。处理此问题的首选方法就是延迟加载纹理。

下面是draw方法：
首先，我们重置虚拟机世界以便删除任何旋转、转换或已经应用于他的其他变换：

 glLoadIdentity();

接下来，我们将背景清除为白色： 

 glClearColor(1.0f,1.0f,1.0f,1.0f);
 glClear(GL_COLOR_BUFFER_BIT);

之后，我们必须通过分割UIColor并从中拖出各个RGB组件来设置OpenGL绘图颜色。

 CGColorRef color=currentColor.CGColor;
 const CGFloat *components=CGColorGetComponents(color);
 CGFloat red=components[0];
 CGFloat green=components[1];
 CGFloat blue=components[2];
 glColor4f(red,green,blue,1.0);

若要绘制直线，我们需要两个顶点，这意味着我们需要包含4个元素的数组。在Quartz中，我们使用CGPoint struct来存放这些点。在OpenGL中，点未嵌入到struct中，相反，我们用组成需要绘制的形状的所有点来填充数组。因此，若要在OpenGL ES中绘制一条从点（100,150）到点(200,250)的直线，我们将创建一个如下所示的顶点数组：

vertex[0]=100;
vertex[1]=150;
vertex[2]=200;
vertex[3]=250;

我们的数组格式为{x1,y1,x2,y2,x3,y3}。
该方法中的下一段代码将两个CGPoint结构转换为顶点数组：

    //Convert coordinates
    vertices[0]=firstTouch.x;
    vertices[1]=self.frame.size.height-firstTouch.y;
    vertices[2]=lastTouch.x;
    vertices[3]=self.frame.size.height-lastTouch.y;

定义顶点数组之后，指定线宽，使用方法glVertextPointer()将该数组传递到OpenGL ES中，并通知OpenGL ES绘制数组：

    glLineWidth(2.0);
    glVertexPointer(2,GL_FLOAT,0,vertices);
    glDrawArrays(GL_LINES,0,2);

在OpenGL ES中完成绘图之后，我们必须告诉他渲染其缓冲器，并且告诉我们的视图上下文显示新渲染的缓冲器：

 glBindRenderbufferOES(GL_RENDERBUFFER_OES,viewRenderbuffer);
 [context presentRenderbuffer:GL_RENDERBUFFER_OES];

为了阐明在OpenGL中绘图的过程由3个步骤组成。首先，在上下文中绘图。其次，完成所有绘图之后，将上下文呈现到缓冲器中。第三，呈现渲染缓冲器，即当像素实际绘制到屏幕上时。

正如你所见，OpenGL示例比较长，当查看绘制椭圆的过程时，Quartz 2D和OpenGL ES之间的差别变得更加明显。OpenGL ES不知道如何绘制椭圆。OpenGL是OpenGL ES的老大哥甚至前辈，他有许多生成常见的二维和三维形状的便利函数，而这些便利函数只是从OpenGL ES分离出来的一部分功能，这使得OpenGL更加精简并且更加适合在嵌入式设备中使用。因此，更多责任落在了开发人员的身上。

为了绘制椭圆，我们将定义一个顶点数组，该数组存放720个GLfloat，这将存放360个点的x和y位置，围绕圆一度一个。我们可以更改点数来提高或降低此圆的平滑度。

    GLfloat vertices[720];

接下来，我们将根据存储在firstTouch和lastTouch中的两个点计算此椭圆的水平半径和垂直半径。

    GLfloat xradius=(firstTouch.x>lastTouch.x)? (firstTouch.x-lastTouch.x)/2:(lastTouch.x-firstTouch.x)/2;
    GLfloat yradius=(self.frame.size.height-firstTouch.y>self.frame.size.height-lastTouch.y)?
              ((self.frame.size.height-firstTouch.y)-(self.frame.size.height-lastTouch.y))/2:
              ((self.frame.size.height-lastTouch.y)-(self.frame.size.height-firstTouch.y))/2;

然后，我们将围绕圆进行循环，计算围绕圆的正确的点：

    for (int i=0;i<=720;i+=2)
    {
      GLfloat xOffset=(firstTouch.x>lastTouch.x)?lastTouch.x+xradius:firstTouch.x+xradius;
      GLfloat yOffset=(self.frame.size.height-firstTouch.y>self.frame.size.height-lastTouch.y)?
                self.frame.size.height-lastTouch.y+yradius:
                self.frame.size.height-firstTouch.y+yradius;
      vertices[i]=(cos(degreesToRadian(i))*xradius)+xOffset;
      vertices[i+1]=(sin(degreesToRadian(i))*yradius)+yOffset;
    }

最后，我们将顶点数组提供给OpenGL ES，通知OpenGL ES绘制并渲染他，然后通知上下文呈现新渲染的图像：

    glVertexPointer(2,GL_FLOAT,0,vertices);
    glDrawArrays(GL_TRIANGLE_FAN,0,360);
 glBindRenderbufferOES(GL_RENDERBUFFER_OES,viewRenderbuffer);
 [context presentRenderbuffer:GL_RENDERBUFFER_OES];

绘制矩形的方法就不再赘述了。
绘制图像的方法也不再赘述。

不需要告知OpenGL ES将更新屏幕的哪些部分。他会计算出来并且利用硬件加速以最高效的方式绘制。但是，在编译运行之前，需要就爱那个这两个框架链接到你的项目。按照第五章介绍的添加Core Graphics框架的说明，然后选择OpenGLES.framework和QuartzCore.framework。

提示：如果你想创建一个全屏的OpenGL ES应用程序，不必手动构建他。Xcode为你提供了一个实用的模版。该模版为你设置了屏幕和缓冲器，甚至将一些示例绘图和动画代码放置到类中，以便你可以看到放置你的代码的位置。这个模版是OpenGL ES Application模版。

12.6 小结
本章介绍的只是一小点皮毛。