基于IOS双缓冲绘图技术的研究

基于IOS双缓冲绘图技术的研究
何宇;林晓焕
【摘要】ios是苹果公司研发的界面人性化、功能强大、应用市场广泛的手持设备操作系统,在此操作系统上可以实现非常炫的绘图功能,但是在重绘时会出现屏幕闪
烁和波形不连续的现象,为了解决这个问题,本文在此操作系统平台上提出了双缓冲
技术绘图,双缓冲技术的两次缓冲可以有效的解决重绘时绘图操作和刷新界面操作
之间由于时间间隔带来的问题,经验证,双缓冲技术解决了重绘时屏幕闪烁和波形不
连续的问题,为以后在ios操作系统上实现更炫的绘图奠定了扎实的基础.
【期刊名称】《电子设计工程》
【年(卷),期】2013(021)021
【总页数】3页(P46-48)
【关键词】ios;绘图;重绘;双缓冲
【作者】何宇;林晓焕
【作者单位】西安工程大学电信学院,陕西西安710048;西安工程大学电信学院,陕
西西安710048
【正文语种】中文
【中图分类】TN87
ios是苹果公司研发的手持设备操作系统，是目前最流行的终端设备操作系统之一，由于苹果手持设备强大的硬件功能，以及灵活的平台应用，所以ios可以灵活的处
理复杂的动画。

随着手持设备的普及，越来越多的工作也需要在手持设备上来完成，自定义绘图可以更有目标性的在终端设备上显示出需要重点显示或注意的内容。

目前，基于ios的绘图（即没有用双缓冲技术，后称普通绘图）在重绘时有屏幕闪烁和波形不连续的现象，而双缓冲技术的应用可以让手持设备的界面更清晰，更光滑，更符合人们的视觉效果。

文中主要通过在ios操作系统平台上研究和实现双缓冲技术绘图来解决普通绘图的重绘时屏幕闪烁和波形不连续的问题。

1 双缓冲绘图技术的实现
1.1 双缓冲绘图的原理
基于ios的绘图可以依靠两个不同的库来实现绘图功能，一个是Quartz 2D库，
它是Core Graphics框架的一部分；另一个是OpenGl ES库，它是跨平台的库[1]。

本文将从容易着手，使用方便的Quartz 2D绘图介绍。

Quartz 2D是一个
2D绘图引擎，它起源于Mac OS X，但是在iPhone OS中也有充分的应用[2]。

要实现绘图功能，不仅需要添加绘图所需要的库文件，而且还要继承特定的抽象类。

UIViewController是画面控制的中心类，是组成应用程序的重要元素。

UIView是组成画面的基本元素，UIView是拥有位置属性及一定尺寸的四边形。

在ios上绘
图时，需要重载UIView里的方法来实现[3]。

Quartz 2D在绘图的过程中使用了绘画者模型。

在绘画者模型中，每个连续的绘
制操作都是将一个绘制层放置于一个画布上[4]。

有了画布之后，就需要定义绘图
所在的区域，即绘图上下文。

绘图上下文包括了所有的绘图参数，是一个数据类型，用来封装Quartz绘制图像的输出设备信息[5]。

数据类型包含了绘图所需要的线条的粗细，颜色，绘制的路径方向等。

当我们加载抽象类UIView子类的drawRect:方法时，就会得到画布和绘图上下文，接下来就需要在drawRect:方法中设置与绘图上下文相关的画笔颜色和线条的宽度，一切准备就绪后，就可以在绘图上下文中绘图，完成绘图操作后，图形上下文必须负责将图形呈现到画布上[6]。

当动态（从上到下、从左到右）的绘图时，苹果绘图自带的重绘功能可以帮助开发人员减少不必要的开销。

重绘就是通过不断地调用drawRect:方法里面定义的一小块绘图区域来实现大面积的绘图，这样就减少了系统内存的使用，但是为了减少重载时，不必要的内存消耗，苹果并不建议直接调用drawRect:方法，而是通过调用UIView子类的set Needs Display方法，系统自动调用drawRect:方法来避免资源的浪费。

所谓“双缓冲技术绘图”是指在内存中建立一个“图形设备上下文”，而所有的绘图操作都将在这个“图形上下文缓存区”上进行，在需要显示这个“图形上下文”的时候，再把它更新到屏幕设备上。

图1 应用程序的类图Fig.1 The application diagram
1.2 双缓冲绘图的实现
普通绘图的重绘，是在创建好的图形上下文中设置一段路径，然后通过不断地重绘该段路径来完成想要的图形，普通的重绘在重绘已定义的路径和更新界面之间有时间间隔，所以出现了波形不连续和界面闪烁的现象，如图2所示。

图2 普通重绘的波形图Fig.2 Waveform diagram of ordinary redraw
要用双缓冲技术实现绘图功能，首先需要创建图形上下文 CGContextRef，苹果
为双缓冲绘图提供了API CGContextRef CGBitmapContextCreate（void*data，size_t width，size_t height，size_t bitsPerComponent，size_t bytesPerRow，CGColorSpaceRef colorspace，CGBitmapInfo bitmapInfo）其中data是指
绘图操作被渲染的内存区域，width和height分别是被渲染内存区域的宽度和高度，bitsPerComponent指被渲染内存区域上的控件在屏幕每个像素点上需要使
用的bits位，colorspace指被渲染内存区域的颜色格式。

由于整个绘图区域的大小是在父视图调用抽象类UIView的子视图时设置的，所以需要在initWithFrame方法里面根据父视图传回的 CGRect的大小设置绘图需要
渲染的区域，然后在 drawRect:里调用 CGColorSpaceCreateDeviceRGB（）设
置渲染区域的RGB颜色格式。

绘图的渲染区设置好后，就需要设置画笔的颜色和
画笔的粗细，CGContextSetStroke ColorWithColor方法可以设置画笔的颜色，CGContextSetLineWidth可以设置画笔的粗细，为了应用更符合客户端的操作，本文在父视图里设置了颜色按钮和粗细按钮，用户可以按照自己的想法选择颜色和画笔的粗细，接下来就需要创建绘制的路径，首先需要把画笔移动到起始点CGContextMoveToPoint，然后移动路径到另一点CGContext AddLineToPoint，一点到另一点的方式多种多样，本文主要是通过正弦波路径到达，即CGContextMoveToPoint（context，self.progress，260+sin
（（3.1415926/45）*self.progress）*50）； self.progress+=0.5；
floatt=self.progress； CGPointgoPoint=CGPointMake （t， 260 +sin （（3.1415926/45）*t）*50）；CGContextAddLineToPoint（context，goPoint.x， goPoint.y）；现在可以用前面设置好的画笔CGContextStrokePath（）绘制创建的正弦波路径。

到此终于完成了第一次缓冲。

现在把第一次绘制的图形CGBitmapContextCreateImage缓冲到二次缓冲区CGImageRef，为了避免内存泄漏，在这里可以CGContextRelease（）释放第一次缓冲区的图形上下文，然后把二次缓冲区的内容通过UIImage的类方法转换
为UIImage型，最后调用drawInRect:把最终缓冲好的内容显示在屏幕上，此时
就可以看见清晰的波形。

如图3所示，根据不同的画笔颜色和画笔粗细绘制出了
光滑的波形，并且在绘制波形的过程中，可以点击保存按钮来保存绘制的波形。

图3 双缓冲重绘波形图Fig.3 Waveform diagram of double buffering redraw 2 实验结果与分析
普通绘图的波形如图2所示，与双缓冲绘制的波形如图3所示相比较，发现普通
绘图的（0，0）点在屏幕的左上角，双缓冲绘图的（0，0）点在屏幕的左下角，
所以就会出现两个图所示的波峰（波谷）相反的情况。

在代码调试的时候，波形从
左到右逐步绘制，但是普通绘图先在绘图上下文中绘制波形，然后将绘制的波形呈现在屏幕上，这两步之间有一定的时间差，所以普通绘图看上去不仅屏幕闪烁，而且波形也不连续。

双缓冲技术巧妙的解决了普通绘图产生的屏幕闪烁和波形不连续的现象。

双缓冲技术绘图先在创建的内存区域实现两次缓冲绘图，最后把整个内存区域直接绘制到屏幕上，这样人们的视觉就不会看到绘图操作和更新屏幕操作之间由于时间差而引起的屏幕闪烁和波形断断续续的现象。

3 结论
经验证，利用双缓冲技术绘图巧妙的解决了普通绘图在重绘时引起的屏幕闪烁和波形不连续的现象，使绘制出的波形画面更清晰、更符合人们的视觉效果，为基于ios操作系统强大动画功能的画面质感提供了有力的保障。

【相关文献】
[1]Mark D，Nutting J，LaMarche J.iphone 4与ipad开发基础教程[M].北京：清华大学出版社，2012.
[2]XMobileApp.iPhone创意开发入门与实践[M].北京：人民邮电出版社，2010.
[3]王志刚，王中元，朱蕾，等.iphone UIKit详解[M].北京：电子工业出版社，2012.
[4]DevDiv移动开发社区.ios开发实战体验[M].北京：海洋出版社，2012.
[5]刘威.Objective-C编程之道ios设计模式解析 [M].北京：人民邮电出版社，2011.
[6]夏伟频.ios编程[M].武汉：华中科技大学出版社，2013.。