iOS绘图

2016-02-25 本文已影响10957人齐滇大圣

介绍###

说到iOS的绘图肯定就是Core Graphics。

Core Graphics Framework是一套基于C的API框架，使用了Quartz作为绘图引擎。它提供了低级别、轻量级、高保真度的2D渲染。该框架可以用于基于路径的绘图、变换、颜色管理、脱屏渲染，模板、渐变、遮蔽、图像数据管理、图像的创建、遮罩以及PDF文档的创建、显示和分析。

获取图形上下文####

Core Graphics API所有的操作都在一个上下文中进行。所以在绘图之前需要获取该上下文并传入执行渲染的函数中。如果你正在渲染一副在内存中的图片，此时就需要传入图片所属的上下文。获得一个图形上下文是我们完成绘图任务的第一步，你可以将图形上下文理解为一块画布。如果你没有得到这块画布，那么你就无法完成任何绘图操作。

 获取图形上下文的几种方式：
 1.drawRect:
 2.inContext:    (-(void)drawInContext:(CGContextRef)ctx   - (void)drawLayer:(CALayer*)layer inContext:(CGContextRef)ctx)
 3.UIGraphicsBeginImageContextWithOptions

 两大绘图框架：
 UIKit
 像UIImage、NSString（绘制文本）、UIBezierPath（绘制形状）、UIColor都知道如何绘制自己。
 这些类提供了功能有限但使用方便的方法来让我们完成绘图任务。一般情况下，UIKit就是我们所需要的。
 
 Core Graphics
 这是一个绘图专用的API族，它经常被称为QuartZ或QuartZ 2D。Core Graphics是iOS上所有绘图
 功能的基石，包括UIKit。

6种绘图的形式####

第一种UIKit框架drawRect:

在UIView的子类方法drawRect：中绘制一个蓝色圆
- (void) drawRect: (CGRect) rect {                   

    UIBezierPath* p = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0,0,100,100)]; 
    [[UIColor blueColor] setFill]; 
    [p fill]; 
}

第二种Core Graphics框架inContext:

- (void)drawRect:(CGRect)rect{
    //当前上下文及画布为当前view
    CGContextRef con = UIGraphicsGetCurrentContext();
    CGContextAddEllipseInRect(con, CGRectMake(0,0,100,100));
    CGContextSetFillColorWithColor(con, [UIColor blueColor].CGColor);
    CGContextFillPath(con);
}

第三种UIKit框架inContext:

drawInContext:方法

@interface TestLayer : CALayer

@end

@implementation TestLayer

- (void)drawInContext:(CGContextRef)ctx{

      UIGraphicsPushContext(ctx);
      UIBezierPath* p = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0,0,100,100)];
      [[UIColor blueColor] setFill];
      [p fill];
      UIGraphicsPopContext();
}

@end

@implementation XXXViewController{
- (void)viewDidLoad{

      [super viewDidLoad];

      //1.创建自定义的layer
      TestLayer *layer=[TestLayer layer];
      //2.设置layer的属性
      layer.backgroundColor= [UIColor blackColor].CGColor;
      layer.frame=CGRectMake(100, 100, 200, 200);

      [layer setNeedsDisplay];
      //3.添加layer
      [self.view.layer addSublayer:layer];
}
@end


drawLayer: inContext:方法

@interface MyLayerDelegate : NSObject

@end

@implementation MyLayerDelegate

- (void)drawLayer:(CALayer*)layer inContext:(CGContextRef)ctx {

      UIGraphicsPushContext(ctx);
      UIBezierPath* p = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0,0,100,100)];
      [[UIColor blueColor] setFill];
      [p fill];
      UIGraphicsPopContext();
}
@end

@implementation XXXViewController{

      MyLayerDelegate *_layerDeleagete;
      CALayer         *_layer;
}

- (void)viewDidLoad{

      [super viewDidLoad];
      _layerDeleagete = [[MyLayerDelegate alloc] init];

      //1.创建自定义的layer
      _layer=[CALayer layer];
      //2.设置layer的属性
      _layer.backgroundColor= [UIColor blackColor].CGColor;
      _layer.frame=CGRectMake(100, 100, 200, 200);

      _layer.delegate = _layerDeleagete;
      [_layer setNeedsDisplay];

      //3.添加layer
      [self.view.layer addSublayer:_layer];
}

- (void)dealloc{
      _layer.delegate = nil;
}
@end

第四种Core Graphics框架inContext:

drawInContext:方法
- (void)drawInContext:(CGContextRef)ctx{
      CGContextAddEllipseInRect(ctx, CGRectMake(0,0,100,100));
      CGContextSetFillColorWithColor(ctx, [UIColor blueColor].CGColor);
      CGContextFillPath(ctx);
}


drawLayer: inContext:方法
- (void)drawLayer:(CALayer*)layer inContext:(CGContextRef)ctx {     

      UIGraphicsPushContext(ctx); 
      UIBezierPath* p = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0,0,100,100)];
      [[UIColor blueColor] setFill]; [p fill]; UIGraphicsPopContext(); 
}

第五种UIKit框架UIGraphicsBeginImageContextWithOptions

@implementation XXXViewController

- (void)viewDidLoad{

    [super viewDidLoad];                
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(100,100), NO, 0);
    UIBezierPath* p = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0,0,100,100)];
    [[UIColor blueColor] setFill];
    [p fill];
    UIImage* im = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    /*---------------------------------*/
    UIImageView  *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
    [imageView setImage:im];
    [self.view addSubview:imageView];
}
@end

第六种Core Graphics框架UIGraphicsBeginImageContextWithOptions

@implementation XXXViewController

- (void)viewDidLoad{

    [super viewDidLoad];        
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(100,100), NO, 0);
    CGContextRef con = UIGraphicsGetCurrentContext();    
    CGContextAddEllipseInRect(con, CGRectMake(0,0,100,100));
    CGContextSetFillColorWithColor(con, [UIColor blueColor].CGColor);    
    CGContextFillPath(con);    
    UIImage* im = UIGraphicsGetImageFromCurrentImageContext();    
    UIGraphicsEndImageContext();

    /*---------------------------------*/
    UIImageView  *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
    [imageView setImage:im];
    [self.view addSubview:imageView];
}

注意####

使用- (void)drawRect:(CGRect)rect需要注意的地方

以下方法调用drawRect

1.如果在UIView初始化时没有设置rect大小，将直接导致drawRect不被自动调用。

2.该方法在调用sizeThatFits后被调用，所以可以先调用sizeToFit计算出size。然后系统自动调用drawRect:方法。

3.通过设置contentMode属性值为UIViewContentModeRedraw。那么将在每次设置或更改frame的时候自动调用drawRect:。

4.直接调用setNeedsDisplay，或者setNeedsDisplayInRect:触发drawRect:，但是有个前提条件是rect不能为0.

若要实时画图，不能使用gestureRecognizer，只能使用touchbegan等方法来掉用setNeedsDisplay实时刷新屏幕

问题####

比如当在一个view上绘制一条线之类的，是直接用addsubView添加一个UIView控件好，还是在drawRect：里用绘图代码绘制一条线好？
哪种更高效，或者一样？

文章内存恶鬼drawRect里有提到，使用drawRect方法被调用，它就会为视图分配一个寄宿图，这个寄宿图的像素尺寸等于视图大小乘以contentsScale
(这个属性与屏幕分辨率有关，我们的画板程序在不同模拟器下呈现的内存用量不同也是因为它)的值。
比如在iphone6上UIView的frame为
CGRectMake(0, 0, SCREEN_SIZE.width*5, SCREEN_SIZE.height*5)则内存增加为750*5*1334*5*4/1024/2024,相当于95.4M内存

所以当使用drawRect：时，即使里面没写任何绘制代码，也会分配一个寄宿图，内存也会对应的增加。

文中提到一旦你实现了CALayerDelegate协议中的-drawLayer:inContext:
方法或者UIView中的-drawRect:方法（其实就是前者的包装方法），图层就创建了一个绘制上下文。内存也会暴增。

但是使用我上面inContext：方法获取上下文，好像是不会产生寄宿图的，内存也不会增加的那么夸张。测试例子

咨询了原文作者，他说其实在inContext：调用之前会创建一个合适大小的寄宿图，这个合适大小实际上是由系统控制的，它有一个依据是绘制内容，所以绘制内容越大内存也会越大的。还有layer的frame变大也会增大内存，然后layer的frame增大到某一个限度之后，frame再增大内存也不会增加了。所以整个增加的内存其实是受到多个方面的影响的，只是这个增加的内存不知道怎么算了？

所以能不用drawRect：就尽量不用吧

源码，应用场景####

以上六种方式绘制圆的代码
绘图代码比较常用就是图表和绘画板这两种场景。

两个可以学习的源码：
图表：BEMSimpleLineGraph
绘画板：Brushes

参考####

iOS绘图教程