iOS绘图

介绍

说到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实时刷新屏幕

问题

  1. 比如当在一个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绘图教程

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,088评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,715评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,361评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,099评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 60,987评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,063评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,486评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,175评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,440评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,190评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,550评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2赞 335

推荐阅读更多精彩内容