52、利用Quartz和OpenGL进行绘图

最新推荐文章于 2026-07-14 09:04:44 发布

原创最新推荐文章于 2026-07-14 09:04:44 发布 · 79 阅读

0 GEO检测

iOS开发之旅：从零到英雄专栏收录该内容

64 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

利用Quartz和OpenGL进行绘图

在iOS开发中，Quartz和OpenGL ES是两种常用的绘图技术。Quartz 2D是一种强大的二维绘图引擎，而OpenGL ES则更侧重于高性能的图形渲染。本文将介绍如何优化Quartz绘图的重绘工作，并通过创建一个名为GLFun的应用程序，展示如何使用OpenGL ES进行绘图。

优化Quartz绘图的重绘工作

在绘图过程中，减少不必要的重绘工作可以显著提高应用程序的性能。通过以下代码，我们可以避免擦除和重绘未受当前拖动影响的视图部分：

_redrawRect = CGRectUnion(_redrawRect,
                          CGRectMake(_lastTouch.x - horizontalOffset,
                                     _lastTouch.y - verticalOffset,
                                     _drawImage.size.width,
                                     _drawImage.size.height));
} else {
    _redrawRect = CGRectUnion(_redrawRect, self.currentRect);
}
_redrawRect = CGRectInset(_redrawRect, -2.0, -2.0);
[self setNeedsDisplayInRect:_redrawRect];

在 touchesMoved: 方法中，我们也可以进行类似的操作：

- (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 = CGRectUnion(redrawRect,
                                  CGRectMake(_lastTouch.x - horizontalOffset,
                                             _lastTouch.y - verticalOffset,
                                             _drawImage.size.width,
                                             _drawImage.size.height));
    }
    _redrawRect = CGRectUnion(_redrawRect, self.currentRect);
    [self setNeedsDisplayInRect:_redrawRect];
}

通过这种方式，我们可以减少重绘的工作量，提高应用程序的性能。

GLFun应用程序的搭建

为了展示OpenGL ES的基本用法，我们将重新创建一个使用OpenGL ES的应用程序，名为GLFun。以下是搭建GLFun应用程序的步骤：
1. 复制项目 ：关闭QuartzFun Xcode项目，在Finder中复制项目文件夹，并将副本重命名为GLFun。
2. 重命名项目 ：双击打开GLFun文件夹，再双击QuartzFun.xcodeproj打开项目。在项目导航器中，将项目名称从QuartzFun改为GLFun。
3. 重命名项目内容 ：确认重命名项目内容，Xcode会提示你进行快照备份。
4. 重命名代码组 ：将包含所有源代码文件的QuartzFun组重命名为GLFun。
5. 添加文件 ：在16 - GLFun文件夹中，找到Texture2D.h、Texture2D.m、OpenGLES2DView.h和OpenGLES2DView.m四个文件，并将它们添加到项目中。
6. 删除Quartz绘图类 ：删除BIDQuartzFunView.h和BIDQuartzFunView.m文件。

以上步骤可以用以下流程图表示：

graph TD;
    A[关闭QuartzFun项目] --> B[复制项目文件夹并重命名为GLFun];
    B --> C[打开GLFun文件夹和QuartzFun.xcodeproj];
    C --> D[重命名项目为GLFun];
    D --> E[确认重命名项目内容并备份];
    E --> F[重命名代码组为GLFun];
    F --> G[添加四个文件到项目];
    G --> H[删除BIDQuartzFunView类];

创建BIDGLFunView类

接下来，我们需要创建一个名为BIDGLFunView的类，用于进行OpenGL ES绘图。具体步骤如下：
1. 创建新文件 ：在项目中选择GLFun文件夹，按下 ⌘N ，选择Objective-C类，命名为BIDGLFunView，并使其成为OpenGLES2DView的子类。
2. 修改BIDGLFunView.h文件 ：将BIDGLFunView.h文件的内容替换为以下代码：

#import "BIDConstants.h"
#import "OpenGLES2DView.h"

@class Texture2D;

@interface BIDGLFunView : OpenGLES2DView
@property CGPoint firstTouch;
@property CGPoint lastTouch;
@property (nonatomic, strong) UIColor *currentColor;
@property BOOL useRandomColor;
@property ShapeType shapeType;
@property (nonatomic, strong) Texture2D *sprite;
@end

修改BIDGLFunView.m文件 ：在BIDGLFunView.m文件中添加以下代码：

#import "BIDGLFunView.h"
#import "UIColor+BIDRandom.h"
#import "Texture2D.h"

@implementation BIDGLFunView

- (id)initWithCoder:(NSCoder*)coder {
    if (self = [super initWithCoder:coder]) {
        _currentColor = [UIColor redColor];
        _useRandomColor = NO;
        _sprite = [[Texture2D alloc] initWithImage:[UIImage
                                                   imageNamed:@"iphone.png"]];
        glBindTexture(GL_TEXTURE_2D, _sprite.name);
    }
    return self;
}

- (void)draw  {
    glLoadIdentity();

    glClearColor(0.78f, 0.78f, 0.78f, 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: {
            glDisable(GL_TEXTURE_2D);
            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: {
            glDisable(GL_TEXTURE_2D);
            // 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: {
            glDisable(GL_TEXTURE_2D);
            GLfloat vertices[720];

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

            glVertexPointer(2, GL_FLOAT , 0, vertices);
            glDrawArrays(GL_TRIANGLE_FAN, 0, 360);
            break;
        }
        case kImageShape:
            glEnable(GL_TEXTURE_2D);
            [_sprite drawAtPoint: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

OpenGL ES绘图与Quartz绘图的比较

OpenGL ES和Quartz在绘图方式上有很大的不同。下面以绘制直线和椭圆为例，比较两者的差异。

绘制直线

Quartz绘制直线的代码如下：

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 2.0);
CGContextSetStrokeColorWithColor(context, _currentColor.CGColor);
CGContextMoveToPoint(context, _firstTouch.x, _firstTouch.y);
CGContextAddLineToPoint(context, _lastTouch.x, _lastTouch.y);
CGContextStrokePath(context);

OpenGL ES绘制直线的代码如下：

glLoadIdentity();
glClearColor(0.78, 0.78f, 0.78f, 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);
glDisable(GL_TEXTURE_2D);
GLfloat vertices[4];
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);
glBindRenderbufferOES(GL_RENDERBUFFER_OES, viewRenderbuffer);
[context presentRenderbuffer:GL_RENDERBUFFER_OES];

可以看出，OpenGL ES的代码更为复杂，需要更多的步骤来完成相同的任务。

绘制椭圆

Quartz绘制椭圆的代码如下：

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 2.0);
CGContextSetStrokeColorWithColor(context, _currentColor.CGColor);
CGContextSetFillColorWithColor(context, _currentColor.CGColor);
CGRect currentRect;
CGContextAddEllipseInRect(context, self.currentRect);
CGContextDrawPath(context, kCGPathFillStroke);

OpenGL ES绘制椭圆的代码如下：

glLoadIdentity();
glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
glDisable(GL_TEXTURE_2D);
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);
GLfloat vertices[720];
GLfloat xradius = fabsf((_firstTouch.x - _lastTouch.x)/2);
GLfloat yradius = fabsf((_firstTouch.y - _lastTouch.y)/2);
for (int i = 0; i <= 720; i+=2) {
    GLfloat xOffset = (_firstTouch.x > _lastTouch.x) ?
    _lastTouch.x + xradius : _firstTouch.x + xradius;
    GLfloat yOffset = (_firstTouch.y < _lastTouch.y) ?
    self.frame.size.height - _lastTouch.y + yradius :
    self.frame.size.height - _firstTouch.y + yradius;
    vertices[i] = (cos(degreesToRadian(i / 2))*xradius) + xOffset;
    vertices[i+1] = (sin(degreesToRadian(i / 2))*yradius) +
    yOffset;
}
glVertexPointer (2, GL_FLOAT , 0, vertices);
glDrawArrays (GL_TRIANGLE_FAN, 0, 360);
glBindRenderbufferOES(GL_RENDERBUFFER_OES, viewRenderbuffer);
[context presentRenderbuffer:GL_RENDERBUFFER_OES];

OpenGL ES没有直接绘制椭圆的函数，需要手动计算顶点数组，代码更加复杂。

更新BIDViewController和Nib文件

为了使应用程序正常工作，我们还需要对BIDViewController.m文件和Nib文件进行一些修改。

更新BIDViewController.m文件

将所有对BIDQuartzFunView的引用改为BIDGLFunView。具体修改如下：
- 将 #import "BIDQuartzFunView.h" 替换为 #import "BIDGLFunView.h" 。
- 在 changeColor: 方法中，将 BIDQuartzFunView *funView = (BIDQuartzFunView *)self.view; 替换为 BIDGLFunView *funView = (BIDGLFunView *)self.view; 。
- 在 changeShape: 方法中，将 [(BIDQuartzFunView *)self.view setShapeType:[control selectedSegmentIndex]]; 替换为 [(BIDGLFunView *)self.view setShapeType:[control selectedSegmentIndex]]; 。

更新Nib文件

将Nib文件中的视图类从BIDQuartzFunView改为BIDGLFunView。具体步骤如下：
1. 打开BIDViewController.xib文件。
2. 在Dock中选择Quartz Fun View，按下 ⌥⌘3 打开身份检查器。
3. 将类从BIDQuartzFunView改为BIDGLFunView。

通过以上步骤，我们完成了GLFun应用程序的创建，并展示了OpenGL ES和Quartz在绘图方面的差异。虽然OpenGL ES更为强大，但使用起来也更加复杂。在实际开发中，我们需要根据具体需求选择合适的绘图技术。

利用Quartz和OpenGL进行绘图（续）

总结OpenGL ES绘图流程

OpenGL ES的绘图过程可以总结为以下三个步骤：
1. 在上下文绘制 ：设置绘图的各种参数，如颜色、顶点数组等，进行具体的图形绘制操作。
2. 渲染上下文到缓冲区 ：将绘制的内容渲染到缓冲区中。
3. 呈现渲染缓冲区 ：将缓冲区中的内容显示到屏幕上。

以下是一个简单的表格总结OpenGL ES绘制直线的流程：
| 步骤 | 操作 | 代码示例 |
| — | — | — |
| 1. 绘制准备 | 重置变换、清除背景、设置颜色、禁用纹理 | glLoadIdentity(); glClearColor(0.78, 0.78f, 0.78f, 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); glDisable(GL_TEXTURE_2D); |
| 2. 定义顶点数组 | 将CGPoint转换为顶点数组 | GLfloat vertices[4]; vertices[0] = _firstTouch.x; vertices[1] = self.frame.size.height - _firstTouch.y; vertices[2] = _lastTouch.x; vertices[3] = self.frame.size.height - _lastTouch.y; |
| 3. 绘制图形 | 设置线宽、传递顶点数组、绘制图形 | glLineWidth(2.0); glVertexPointer (2, GL_FLOAT , 0, vertices); glDrawArrays (GL_LINES, 0, 2); |
| 4. 渲染和呈现 | 绑定渲染缓冲区、呈现渲染缓冲区 | glBindRenderbufferOES(GL_RENDERBUFFER_OES, viewRenderbuffer); [context presentRenderbuffer:GL_RENDERBUFFER_OES]; |

不同图形绘制的复杂度分析

从前面绘制直线和椭圆的代码可以看出，Quartz和OpenGL ES在不同图形绘制上的复杂度差异明显。以下是一个对比表格：
| 图形类型 | Quartz复杂度 | OpenGL ES复杂度 | 原因 |
| — | — | — | — |
| 直线 | 低 | 高 | Quartz有简单的API直接绘制直线，而OpenGL ES需要更多步骤设置和传递顶点数组 |
| 椭圆 | 低 | 高 | Quartz有直接绘制椭圆的API，OpenGL ES没有，需要手动计算大量顶点数组 |
| 矩形 | 低 | 中 | 两者都需要计算顶点，但OpenGL ES需要更多的设置和渲染步骤 |
| 图像 | 低 | 低 | 有Texture2D类的帮助，OpenGL ES绘制图像相对简单 |

触摸事件处理差异

在处理触摸事件时，Quartz和OpenGL ES的处理方式也有所不同。Quartz通常是告诉视图需要重新显示，而OpenGL ES则直接调用 draw 方法。以下是两者触摸事件处理的代码对比：

Quartz触摸事件处理

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    // 处理触摸开始事件
    [self setNeedsDisplay];
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    // 处理触摸移动事件
    [self setNeedsDisplay];
}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
    // 处理触摸结束事件
    [self setNeedsDisplay];
}

OpenGL ES触摸事件处理

- (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];
}

可以看出，OpenGL ES不需要手动指定需要更新的屏幕部分，它会自动利用硬件加速以最高效的方式进行绘制。

选择合适的绘图技术

在实际开发中，选择Quartz还是OpenGL ES进行绘图需要根据具体需求来决定。以下是一些选择的建议：
- 简单图形绘制和快速开发 ：如果应用程序只需要绘制简单的二维图形，如直线、矩形、椭圆等，并且对性能要求不是特别高，Quartz是一个不错的选择。它的API简单易用，开发效率高。
- 高性能图形渲染和复杂场景 ：如果应用程序需要处理大量的图形、动画，或者需要进行三维图形的渲染，OpenGL ES更适合。它可以利用硬件加速，提供更高的性能，但开发难度也相对较大。

以下是一个简单的决策流程图：

graph TD;
    A[需求分析] --> B{图形复杂度};
    B -->|简单二维图形| C{性能要求};
    C -->|低| D[选择Quartz];
    C -->|高| E{是否有大量图形或动画};
    E -->|否| D;
    E -->|是| F[选择OpenGL ES];
    B -->|复杂图形或三维图形| F;

通过以上对Quartz和OpenGL ES绘图技术的详细分析，我们可以更好地理解它们的特点和差异，在实际开发中做出更合适的选择，以满足不同应用程序的需求。