UIBezierPath 和 Core Graphics

iOS系统本身提供了两套绘图的框架,即UIBezierPathCore Graphics。而前者所属UIKit,其实是对Core Graphics框架关于path的进一步封装,所以使用起来比较简单。但是毕竟Core Graphics更接近底层,所以它更加强大。

UIBezierPath

可以创建基于矢量的路径,例如椭圆或者矩形,或者有多个直线和曲线段组成的形状。
使用UIBezierPath,你只能在当前上下文中绘图,所以如果你当前处于UIGraphicsBeginImageContextWithOptions函数或drawRect:方法中,你就可以直接使用UIKit提供的方法进行绘图。如果你持有一个context:参数,那么使用UIKit提供的方法之前,必须将该上下文参数转化为当前上下文。幸运的是,调用UIGraphicsPushContext 函数可以方便的将context:参数转化为当前上下文,记住最后别忘了调用UIGraphicsPopContext函数恢复上下文环境。

简言之:我们一般使用UIBezierPath都是在重写的drawRecrt方法这种情形。其绘图的步骤是这样的:
1.重写drawRect方法。但不需要我们自己获取当前上下文context;
2.创建相应图形的UIBezierPath对象,并设置一些修饰属性;
3.渲染,完成绘制。

// 1.重写drawRect方法
- (void)drawRect:(CGRect)rect 
{ 
    // 2.创建图形相应的UIBezierPath对象
    UIBezierPath* aPath = [UIBezierPath bezierPathWithRect:CGRectMake(20, 20, 100, 50)]; 
     // 3.设置一些修饰属性  
    aPath.lineWidth = 8.0; 
    aPath.lineCapStyle = kCGLineCapRound; 
    aPath.lineJoinStyle = kCGLineCapRound; 
    UIColor *color = [UIColor colorWithRed:0 green:0 blue:0.7 alpha:1]; 
    [color set]; 
    // 4.渲染,完成绘制
    [aPath stroke]; 
}

需要理解的东西不多,主要是一些代码需要记忆。所以就不写代码了,直接看别人的代码:绘图1-UIBezierPath


Core Graphics

这是一个绘图专用的API族,它经常被称为QuartZ或QuartZ 2D。Core Graphics是iOS上所有绘图功能的基石,包括UIKit。

要搞清楚Core Graphics就要搞清楚下面几个问题:

** 1.绘图需要 CGContextRef**
CGContextRef即图形上下文。可以这么理解,我们绘图是需要一个载体或者说输出目标,它用来显示绘图信息,并且决定绘制的东西输出到哪个地方。可以形象的比喻context就像一个“画板”,我们得把图形绘制到这个画板上。所以,绘图必须要先有context。

** 2.怎么拿到context?**
** 第一种方法** 是利用cocoa为你生成的图形上下文。当你子类化了一个UIView并实现了自己的drawRect:方法后,一旦drawRect:方法被调用,Cocoa就会为你创建一个图形上下文,此时你对图形上下文的所有绘图操作都会显示在UIView上。

** 第二种方法** 就是创建一个图片类型的上下文。调用UIGraphicsBeginImageContextWithOptions函数就可获得用来处理图片的图形上下文。利用该上下文,你就可以在其上进行绘图,并生成图片。调用UIGraphicsGetImageFromCurrentImageContext函数可从当前上下文中获取一个UIImage对象。记住在你所有的绘图操作后别忘了调用UIGraphicsEndImageContext函数关闭图形上下文。

简言之:

  • 重写UIView的drawRect方法,在该方法里便可得到context;
  • 调用UIGraphicsBeginImageContextWithOptions方法得到context;

3.注意
并不是说一提到绘图,就一定得重写drawRect方法,只是因为通常情况下我们一般采用在drawRect方法里获取context这种方式。

** 4.drawRect方法什么时候触发**

  1. 当view第一次显示到屏幕上时;
  2. 当调用view的setNeedsDisplay或者setNeedsDisplayInRect:
    方法时。

** 步骤:**

  1. 先在drawRect方法中获得上下文context;
  2. 绘制图形(线,图形,图片等);
  3. 设置一些修饰属性;
  4. 渲染到上下文,完成绘图。
#import "CustomView.h"
@implementation CustomView
- (void)drawRect:(CGRect)rect
{ 
    // 1.获取上下文 
    CGContextRef ctx = UIGraphicsGetCurrentContext(); 
    // --------------------------实心圆 
    // 2.画图 
    CGContextAddEllipseInRect(ctx, CGRectMake(10, 10, 50, 50)); 
    [[UIColor greenColor] set]; 
    // 3.渲染 
    CGContextFillPath(ctx); 

    // --------------------------空心圆 
    CGContextAddEllipseInRect(ctx, CGRectMake(70, 10, 50, 50)); 
    [[UIColor redColor] set]; 
    CGContextStrokePath(ctx); 

    // --------------------------椭圆 
    //画椭圆和画圆方法一样,椭圆只是设置不同的长宽 
    CGContextAddEllipseInRect(ctx, CGRectMake(130, 10, 100, 50)); 
    [[UIColor purpleColor] set]; 
    CGContextFillPath(ctx); 

    // --------------------------直线 
    CGContextMoveToPoint(ctx, 20, 80); // 起点 
    CGContextAddLineToPoint(ctx, self.frame.size.width-10, 80); //终点
    // CGContextSetRGBStrokeColor(ctx, 0, 1.0, 0, 1.0); // 颜色 
    [[UIColor redColor] set]; // 两种设置颜色的方式都可以 
    CGContextSetLineWidth(ctx, 2.0f); // 线的宽度 
    CGContextSetLineCap(ctx, kCGLineCapRound); // 起点和重点圆角 
    CGContextSetLineJoin(ctx, kCGLineJoinRound); // 转角圆角 
    CGContextStrokePath(ctx); // 渲染(直线只能绘制空心的,不能调用CGContextFillPath(ctx);) 

    // --------------------------三角形 
    CGContextMoveToPoint(ctx, 10, 150); // 第一个点 
    CGContextAddLineToPoint(ctx, 60, 100); // 第二个点 
    CGContextAddLineToPoint(ctx, 100, 150); // 第三个点 
    [[UIColor purpleColor] set]; 
    CGContextClosePath(ctx); 
    CGContextStrokePath(ctx); 

    // --------------------------矩形 
    CGContextAddRect(ctx, CGRectMake(20, 170, 100, 50)); 
    [[UIColor orangeColor] set];
    // CGContextStrokePath(ctx); // 空心 
    CGContextFillPath(ctx); 

    // --------------------------圆弧 
    CGContextAddArc(ctx, 200, 170, 50, M_PI, M_PI_4, 0); 
    CGContextClosePath(ctx); 
    CGContextFillPath(ctx); 

    // --------------------------文字 
    NSString *str = @"你在红楼,我在西游"; 
    NSMutableDictionary *dict = [NSMutableDictionary dictionary];     
    dict[NSForegroundColorAttributeName] = [UIColor whiteColor]; // 文字颜色     
    dict[NSFontAttributeName] = [UIFont systemFontOfSize:14]; // 字体 
    [str drawInRect:CGRectMake(20, 250, 300, 30) withAttributes:dict]; 

    // --------------------------图片 
    UIImage *img = [UIImage imageNamed:@"yingmu"];
    // [img drawAsPatternInRect:CGRectMake(20, 280, 300, 300)]; // 多个平铺
    // [img drawAtPoint:CGPointMake(20, 280)]; // 绘制到指定点,图片有多大就显示多大 
    [img drawInRect:CGRectMake(20, 280, 80, 80)]; // 拉伸
}

效果:

8D3FCAAC-2D8F-490F-A7AC-DF792176182E.png

绘图它能干什么?为什么要学习它?

我们常用绘图来自定义一些视图控件,以达到我们个性化的需求。
若自定义视图控件:我们可以子类化一个UIView,然后重写它的drawRect方法。在drawRect里进行图形绘制,从而实现自定义控件,完成酷炫个性化的控件。

文/Wang66(简书作者)原文链接:http://www.jianshu.com/p/8e6e960eea7d著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

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

推荐阅读更多精彩内容