iOS绘图—— UIBezierPath 和 Core Graphics

前言

iOS系统自己提供了两套绘图的框架，即UIBezierPath 和 Core 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.渲染，完成绘制。

- (void)drawRect:(CGRect)rect // 1.重写drawRect方法 { UIBezierPath* aPath = [UIBezierPath bezierPathWithRect:CGRectMake(20, 20, 100, 50)]; // 2.建立图形相应的UIBezierPath对象 // 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]; [aPath stroke]; // 4.渲染，完成绘制 }

须要理解的东西很少，主要是一些代码须要记忆。因此就不写代码了，直接看别人的代码：绘图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)]; // 拉伸 }

---

绘图它能干什么？为何要学习它？

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

结尾

关于绘图，其实在我当前接触的项目中用得不多，可是之后确定会接触到。像这种不经常使用但比较重要的内容，我以为要作到初步理解，而后梳理总结，到最后深度理解。因此写这篇文章。

文／Wang66（简书做者） 原文连接：http://www.jianshu.com/p/8e6e960eea7d 著做权归做者全部，转载请联系做者得到受权，并标注“简书做者”。