iOS是怎么"绘画"的?

什么是绘图引擎

如果您以前从事其它平台的图形/界面开发或者游戏开发,一定知道, 不管上层UI怎么呈现和响应, 底层必须有一个绘图引擎. iOS也不例外. 本文详细介绍了iOS Graphics的用法和相关知识, 希望对您的Coding有帮助.

---

• 博客: http://www.cnblogs.com/jhzhu
• 邮箱: jhzhuustc@gmail.com
• 作者: 知明所以
• 时间: 2013-12-31

^此博客需要对CALayer和UIView有基本的了解. 可参考博客谈谈iOS Animation

什么是绘图引擎

绘图引擎, 通俗来说就好比给你一张纸一支笔和若干颜色的颜料, 你可以用它来做最基本的图形绘制.
一个最基本的绘图引擎包括一下接口:

//Code-1
I1. drawLine()      //绘制任意线条,并支持对线条上色.
I2. drawPath()      //根据路径绘制形状,并支持填充颜色.
I3. drawImage()     //绘制图像(e.g. xxx.jpg, xxx.png)
I4. drawGradient()  //绘制渐变填充
I5. transform()     //矩阵映射变换.
I6. drawText()      //绘制文字

不难想象, 有了以上接口, 我们就可以方便的绘制任意想要的图像.
这里强调的是方便, 有些接口并不是必须的. 比如说drawImage(),我们总可以调用有限次drawLine()和drawShape()来绘制任意给定的Image. 但是复杂程度可想而知.
一个绘图引擎设计的目的就是为了方便上层调用, 所以它会封装一些最常用和最基本的接口. 以上5个接口就满足这两个条件之一. 所谓最常用和最基本并没有一个明确的定义, 所以不同的绘图引擎可能会多一些常用接口,但都大同小异.

iOS的绘图引擎

下面我们就Code-1里提到的接口在iOS平台上做一个介绍.

在哪里绘制?

如果我们在XCode里新建一个UIView类, 我们会得到以下代码:

//Code-2
#import "GraphicsViewControllerView.h"
@implementation GraphicsViewControllerView
- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code }
    return self;
}
- (void)drawRect:(CGRect)rect
{
    // Drawing code
}
@end

通常,drawRect()都会被注释起来. 因为, 如果你向UIView添加subView或者设置UIView的显示相关的属性(e.g. backgroundCrolor)的时候, UIKit会自动的把这些参数代表的含义绘制到CALayer上去. 也就是说, 一般情况我们并不需要自己来绘制, UIKit会自动帮我们完成绘制工作.
但是, 当不添加subView, 不设置UIView的显示相关的属性时, 我们就可以通过重载drawRect()来手动绘制图像了.

Context

A graphical context can be thought of as a canvas, offering an enormous number of properties such as pen color, pen thickness, etc. Given the context, you can start painting straight away inside the drawRect: method, and Cocoa Touch will make sure that the attributes and properties of the context are applied to your drawings. We will talk about this more later, but now, let’s move on to more interesting subjects.

drawText

我们新建一个UIView类CustomUIView,如下重载drawRect()方法.
新建CustomUIView的对象,不设置任何属性,添加到显示列表.

//Code-3
- (void)drawRect:(CGRect)rect{
    UIFont *font = [UIFont systemFontWithSize:40.f];
    NSString *myString = @"Some String";
    [myString drawAtPoint:CGPointMake(40, 180) withFont:font];
}

运行, 就可以看到我们没有添加任何UITextField却显示了文字~

more:

关于文字绘制的方法还有 drawInRect:withFont:等几个方法, 可参考官方文档.

setColor

我们把Code-3中的代码添加两行, 变成:

//Code-4
- (void)drawRect:(CGRect)rect{
    UIColor* color = [UIColor blueColor];       //create color
    [color set];                                //set color

    UIFont *font = [UIFont systemFontWithSize:40.f];
    NSString *myString = @"Some String";
    [myString drawAtPoint:CGPointMake(40, 180) withFont:font];
}

就可以看到,文字由黑色变成了蓝色.

more:

UIColor还有两个方法setStroke和setFill分别设置线条颜色和填充颜色. 在后面的章节会用到.set方法影响所有前景色.

drawImage

同样的, 如下重写drawRect方法:

//Code-5
- (void)drawRect:(CGRect)rect{
    /* Assuming the image is in your app bundle and we can load it */
    UIImage *xcodeIcon = [UIImage imageNamed:@"filename.png"];
    [xcodeIcon drawAtPoint:CGPointMake(0.0f, 20.0f)];
}

我们看到图像被绘制出来了.

more:

UIImage还有其他绘制方法:

drawInRect:
drawAsPatternInRect:
drawAtPoint:blendMode:alpha:
drawInRect:blendMode:alpha:

方法名已经很清楚的说明了方法的用途. 具体可参考官方文档

drawLine

这两个是绘图引擎里最基本的, 所以放在一起讲述.

//Code-6: drawLine
- (void)drawRect:(CGRect)rect{ 

    /* Step1 设置绘图颜色 */
    [[UIColor brownColor] set];

    /* Step2 获取当期的画布: Graphic Context */
    CGContextRef currentContext = UIGraphicsGetCurrentContext();

    /* Step3 设置线条宽度 */
    CGContextSetLineWidth(currentContext,5.0f);

    /* Step4 把画笔移动到起始点 */
    CGContextMoveToPoint(currentContext,50.0f, 10.0f);

    /* Step5 从起始点绘制线条到终点 */
    CGContextAddLineToPoint(currentContext,100.0f, 200.0f);

    /* Step6 提交绘制 */
    CGContextStrokePath(currentContext); 

}

如果想连续绘制多条线, 可以再Code-6中的Step5和Step6之间多次调用CGContextAddLineToPoint().

more:

CGContextSetLineJoin可以改变线条交叉点的样式.

drawPath

如果我们想快速绘制一条折线, 调用drawLine就显得有些臃肿. 所以有了drawPath, 它是drawLine的加强版.
drawPath的一般步骤如下:

//Code-7: drawPath
- (void)drawRect:(CGRect)rect{ 

    /* Step1 获取当期的画布: Graphic Context */
    CGContextRef currentContext = UIGraphicsGetCurrentContext();

    /* Step2 创建 path */
    CGMutablePathRef path = CGPathCreateMutable();

    /* Step3 移动到起始点 */
    CGPathMoveToPoint(path,NULL, screenBounds.size.width, screenBounds.origin.y);

    /* Step4 绘制一个椭圆 */
    CGPathAddEllipseInRect(path, &CGAffineTransformIdentity, CGRectMake(0, 320, 320, 160));

    /* Step5 再添加一条直线 */
    CGPathAddLineToPoint(path,NULL, screenBounds.origin.x, screenBounds.size.height);

    /* Step6 向画布添加path */
    CGContextAddPath(currentcontext, path);

    /* Step7 设置绘制类型: kCGPathStroke(绘制边缘), kCGPathFill(填充path内区域), kCGPathFillStroke(包含前面两项)*/
    CGContextDrawPath(currentcontext, kCGPathFillStroke);

    /* Step8 提交绘制 */
    CGContextStrokePath(currentContext); 

    /* Step9 release path */
    CGPathRelease(path);

}

more:

常见几何图形的绘制接口: CGPathAddCurveToPoint,CGPathAddArcToPoint,CGPathAddRect等等...

transform

iOS中的transform使用CGAffineTransform表示的. 你可以用矩阵方式构造任意二维变换:

/*
a: The value at position [1,1] in the matrix.
b: The value at position [1,2] in the matrix.
c: The value at position [2,1] in the matrix.
d: The value at position [2,2] in the matrix.
tx: The value at position [3,1] in the matrix.
ty: The value at position [3,2] in the matrix.
*/
CGAffineTransformMake(CGFloat a, CGFloat b, CGFloat c, CGFloat d, CGFloat tx, CGFloat ty)

矩阵表示为:

iOS也提供了常见变换的快速构建方式:

CGAffineTransformIdentity           //单位矩阵, 不做任何变换
CGAffineTransformMakeRotation       //旋转
CGAffineTransformMakeScale          //缩放
CGAffineTransformMakeTranslation    //平移

在Code-7 Step4中, 绘制path时用到了单位矩阵CGAffineTransformIdentity, 表示不做任何变换. 通常情况下, 都是在绘制阶段把transform作为参数传入. 上面提到的CGPathAddCurveToPoint,CGPathAddArcToPoint,CGPathAddRect函数都有一个transform参数.

iOS绘图在项目中的应用

通常, 我们只需要随心所欲的对UIView增加subView, UIKit会自动帮我们绘制. 但是下列情况下可能需要手动绘制:

1. 优化UITableViewCell的时候. 如果我们的cell很复杂, 有很多subView, 就会变得很卡顿. 就需要手动绘制了. 可参考博客: 优化UITableView性能或者IOS详解TableView——性能优化及手工绘制UITableViewCell
2. 暂未想到, 以后想到再说.