前言
iOS系统本身提供了两套绘图的框架，即 UIBezierPath 和** Core Graphics**。而前者所属UIKit，其实是对Core Graphics框架关于path的进一步封装，所以使用起来比较简单。但是毕竟Core Graphics更接近底层，所以它更加强大。
UIBezierPath
-可以创建基于矢量的路径，例如椭圆或者矩形，或者有多个直线和曲线段组成的形状。
-UIBezierPath是UIKit中的一个关于图形绘制的类，是通过Quartz 2D也就是CG（Core Graphics）CGPathRef的封装得到的，从高级特性支持来看不及CG。
-使用UIBezierPath，你只能在当前上下文中绘图，所以如果你当前处于UIGraphicsBeginImageContextWithOptions函数或drawRect：方法中，你就可以直接使用UIKit提供的方法进行绘图。如果你持有一个context：参数，那么使用UIKit提供的方法之前，必须将该上下文参数转化为当前上下文。幸运的是，调用UIGraphicsPushContext 函数可以方便的将context：参数转化为当前上下文，记住最后别忘了调用UIGraphicsPopContext函数恢复上下文环境。
UIBezierPath对象
1、对象创建方法
// 创建基本路径
+ (instancetype)bezierPath;
// 创建矩形路径
+ (instancetype)bezierPathWithRect:(CGRect)rect;
// 创建椭圆路径
+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;
// 创建圆角矩形
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius; // rounds all corners with the same horizontal and vertical radius
// 创建指定位置圆角的矩形路径
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;
// 创建弧线路径
+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;
// 通过CGPath创建
+ (instancetype)bezierPathWithCGPath:(CGPathRef)CGPath;
2、相关属性和方法
- 属性
// 与之对应的CGPath
@property(nonatomic) CGPathRef CGPath;
- (CGPathRef)CGPath NS_RETURNS_INNER_POINTER CF_RETURNS_NOT_RETAINED;
// 是否为空
@property(readonly,getter=isEmpty) BOOL empty;
// 整个路径相对于原点的位置及宽高
@property(nonatomic,readonly) CGRect bounds;
// 当前画笔位置
@property(nonatomic,readonly) CGPoint currentPoint;
// 线宽
@property(nonatomic) CGFloat lineWidth;
// 终点类型 (路径的终点形状,该属性适用于开放路径的起点和终点, 默认为kCGLineCapButt(方形结束, 结束位置正好为精确位置), 其他可选项为kCGLineCapRound(圆形结束, 结束位置超过精确位置半个线宽)和kCGLineCapSquare(方形结束, 结束位置超过精确位置半个线宽))
@property(nonatomic) CGLineCap lineCapStyle;
typedef CF_ENUM(int32_t, CGLineCap) {
kCGLineCapButt,
kCGLineCapRound,
kCGLineCapSquare
};
// 交叉点的类型(路径的连接点形状,默认为kCGLineJoinMiter(全部连接), 其他可选项为kCGLineJoinRound(圆形连接)和kCGLineJoinBevel(斜角连接))
@property(nonatomic) CGLineJoin lineJoinStyle;
typedef CF_ENUM(int32_t, CGLineJoin) {
kCGLineJoinMiter,
kCGLineJoinRound,
kCGLineJoinBevel
};
// 两条线交汇处内角和外角之间的最大距离,需要交叉点类型为kCGLineJoinMiter是生效，最大限制为10
@property(nonatomic) CGFloat miterLimit;
// 个人理解为绘线的精细程度，默认为0.6，数值越大，需要处理的时间越长
@property(nonatomic) CGFloat flatness;
// 决定使用even-odd或者non-zero规则
@property(nonatomic) BOOL usesEvenOddFillRule;
- 方法
//反方向绘制path
- (UIBezierPath *)bezierPathByReversingPath;
// 设置画笔起始点
- (void)moveToPoint:(CGPoint)point;
// 从当前点到指定点绘制直线
- (void)addLineToPoint:(CGPoint)point;
// 添加弧线
- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise NS_AVAILABLE_IOS(4_0);
// center弧线圆心坐标 radius弧线半径 startAngle弧线起始角度 endAngle弧线结束角度 clockwise是否顺时针绘制
//添加贝塞尔曲线
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;
// endPoint终点 controlPoint控制点
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;
// endPoint终点 controlPoint1、controlPoint2控制点
// 移除所有的点，删除所有的subPath
- (void)removeAllPoints;
//填充
- (void)fill;
// 路径绘制
- (void)stroke;
//使用一条直线闭合路径的起点和终点, 该方法同时也会更新当前点到新直线的终点(即路径的起点)
//- (void)closePath
注意：我们一般使用UIBezierPath都是在重写的drawRect方法这种情形。其绘图的步骤是这样的：
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.渲染，完成绘制
}
3、具体demo如下
- 3.1 直线的绘制
- (void)drawRect:(CGRect)rect{
[[UIColor redColor] set];
UIBezierPath* path = [UIBezierPath bezierPath];
path.lineWidth = 5.f;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineCapRound;
// 起点
[path moveToPoint:CGPointMake(20, 100)];
// 绘制线条
[path addLineToPoint:CGPointMake(200, 20)];
[path stroke];
}
直线
- 3.2 矩形的绘制
3.2.1 直角矩形
- (void)drawRect:(CGRect)rect{
[[UIColor redColor] set];
// 创建矩形路径对象
UIBezierPath * path = [UIBezierPath bezierPathWithRect:CGRectMake(50, 50, 150, 100)];
path.lineWidth = 5.f;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineCapRound;
[path stroke];
}
直角矩形
3.2.2 圆角矩形
- (void)drawRect:(CGRect)rect{
[[UIColor redColor] set];
// 创建圆角矩形路径对象
UIBezierPath* path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 20, 150, 100) cornerRadius:30]; // 圆角半径为30
path.lineWidth = 5.f;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineCapRound;
[path stroke];
}
圆角矩形
3.2.3圆角矩形
- (void)drawRect:(CGRect)rect{
[[UIColor redColor] set];
UIBezierPath* path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 20, 150, 100) byRoundingCorners:UIRectCornerTopLeft cornerRadii:CGSizeMake(30, 30)];
path.lineWidth = 5.f;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineCapRound;
[path stroke];
}
指定位置圆角矩形
corners：圆角位置 cornerRadii：圆角大小
typedef NS_OPTIONS(NSUInteger, UIRectCorner) {
UIRectCornerTopLeft = 1 << 0,
UIRectCornerTopRight = 1 << 1,
UIRectCornerBottomLeft = 1 << 2,
UIRectCornerBottomRight = 1 << 3,
UIRectCornerAllCorners = ~0UL
};
- 4 圆形和椭圆形
4.1 圆形
- (void)drawRect:(CGRect)rect{
[[UIColor redColor] set];
// 创建圆形路径对象
UIBezierPath * path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 50, 100, 100)];
path.lineWidth = 5.f;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineCapRound;
[path stroke];
}
圆形图片
4.2 椭圆形
- (void)drawRect:(CGRect)rect{
[[UIColor redColor] set];
// 创建椭圆形路径对象
UIBezierPath * path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 50, 100, 100)];
path.lineWidth = 5.f;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineCapRound;
[path stroke];
}
椭圆形图片
- 5 曲线
5.1 弧线
- (void)drawRect:(CGRect)rect{
[[UIColor redColor] set];
// 创建弧线路径对象
UIBezierPath* path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100)
radius:70
startAngle:3.1415926
endAngle:3.1415926 *3/2
clockwise:YES];
path.lineWidth = 5.f;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineCapRound;
[path stroke];
}
弧线
center：弧线圆心坐标
radius：弧线半径
startAngle：弧线起始角度
endAngle：弧线结束角度
clockwise：是否顺时针绘制
默认坐标系统中的角度值
5.2 贝塞尔曲线1
- (void)drawRect:(CGRect)rect{
[[UIColor redColor] set];
UIBezierPath* path = [UIBezierPath bezierPath];
path.lineWidth = 5.f;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineCapRound;
[path moveToPoint:CGPointMake(20, 100)];
// 给定终点和控制点绘制贝塞尔曲线
[path addQuadCurveToPoint:CGPointMake(150, 100) controlPoint:CGPointMake(20, 0)];
[path stroke];
}
5.3 贝塞尔曲线2
- (void)drawRect:(CGRect)rect{
[[UIColor redColor] set];
UIBezierPath* path = [UIBezierPath bezierPath];
path.lineWidth = 5.f;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineCapRound;
[path moveToPoint:CGPointMake(20, 100)];
// 给定终点和两个控制点绘制贝塞尔曲线
[path addCurveToPoint:CGPointMake(220, 100) controlPoint1:CGPointMake(120, 20) controlPoint2:CGPointMake(120, 180)];
[path stroke];
}
- 6 扇形
- (void)drawRect:(CGRect)rect{
[[UIColor redColor] set]; // 画笔颜色设置
UIBezierPath * path = [UIBezierPath bezierPath]; // 创建路径
[path moveToPoint:CGPointMake(100, 100)]; // 设置起始点
[path addArcWithCenter:CGPointMake(100, 100) radius:75 startAngle:0 endAngle:3.14159/2 clockwise:NO]; // 绘制一个圆弧
path.lineWidth = 5.0;
path.lineCapStyle = kCGLineCapRound; //线条拐角
path.lineJoinStyle = kCGLineCapRound; //终点处理
[path closePath]; // 封闭未形成闭环的路径
[path stroke]; // 绘制
}
扇形图片
- 7 多边形
- (void)drawRect:(CGRect)rect{
[[UIColor redColor] set];
UIBezierPath* path = [UIBezierPath bezierPath];
path.lineWidth = 5.f;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineCapRound;
// 起点
[path moveToPoint:CGPointMake(100, 50)];
// 添加直线
[path addLineToPoint:CGPointMake(150, 50)];
[path addLineToPoint:CGPointMake(200, 100)];
[path addLineToPoint:CGPointMake(200, 150)];
[path addLineToPoint:CGPointMake(150, 200)];
[path addLineToPoint:CGPointMake(100, 200)];
[path addLineToPoint:CGPointMake(50, 150)];
[path addLineToPoint:CGPointMake(50, 100)];
[path closePath];
//根据坐标点连线
[path stroke];
[path fill];
}
多边形图片
CoreGraphics
这是一个绘图专用的API族，它经常被称为
QuartZ或QuartZ 2D。Core Graphics是iOS上所有绘图功能的基石，包括UIKit。
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:方法时。
5、步骤：
- 1.先在drawRect方法中获得上下文context；
- 2.绘制图形（线，图形，图片等）；
- 3.设置一些修饰属性；
- 4.渲染到上下文，完成绘图。
#import "CustomView.h"
@implementation CustomView
- (void)drawRect:(CGRect)rect
{
/****************1、实心圆***********************/
//获取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
//画图
CGContextAddEllipseInRect(ctx, CGRectMake(20, 20, 100, 100));
[[UIColor redColor] set];
//渲染
CGContextFillPath(ctx);
/****************2、空心圆***********************/
CGContextRef ctx1 = UIGraphicsGetCurrentContext();
CGContextAddEllipseInRect(ctx, CGRectMake(20, 200, 80, 100));
[[UIColor yellowColor] set];
//渲染
CGContextStrokePath(ctx1);
/****************3、直线***********************/
CGContextMoveToPoint(ctx1, 200, 200);
CGContextAddLineToPoint(ctx1, 300, 300);
[[UIColor redColor] set];
CGContextSetLineWidth(ctx1, 5);
CGContextSetLineCap(ctx1, kCGLineCapRound);// 起点和重点圆角
CGContextSetLineJoin(ctx1, kCGLineJoinRound);// 转角圆角
CGContextStrokePath(ctx1);//渲染（直线只能绘制空心的，不能调用CGContextFillPath(ctx);）
/****************4、三角形**********************/
CGContextMoveToPoint(ctx1, 250, 64);//第一个点
CGContextAddLineToPoint(ctx1,250, 300);//第二个点
CGContextAddLineToPoint(ctx1, 350, 380);//第三个点
[[UIColor greenColor] set];
CGContextClosePath(ctx1);//关闭曲线
CGContextStrokePath(ctx1);
/****************5、矩形**********************/
CGContextAddRect(ctx1, CGRectMake(150, 0, 40, 80));
[[UIColor orangeColor] set];
CGContextStrokePath(ctx1);
/***************6、弧线*********************/
CGContextAddArc(ctx1, 200, 170, 50, 0, M_PI/2, 1);
[[UIColor greenColor] set];
CGContextClosePath(ctx1);
CGContextFillPath(ctx1);
/****************7、文字**********************/
NSString *str = @"CoreGraphics的用法总结";
NSMutableDictionary *dict = [NSMutableDictionary dictionary];
dict[NSForegroundColorAttributeName] = [UIColor yellowColor];
dict[NSFontAttributeName] = [UIFont systemFontOfSize:18];
[str drawInRect:CGRectMake(100, 80, 300, 300) withAttributes:dict];
/****************8、图片**********************/
UIImage *img = [UIImage imageNamed:@"配送验收hover"];
//[img drawAsPatternInRect:CGRectMake(20, 280, 300, 300)]; // 多个平铺
//[img drawAtPoint:CGPointMake(20, 280)]; // 绘制到指定点，图片有多大就显示多大
[img drawInRect:CGRectMake(150, 280, 85, 85)];// 拉伸
}
[UIView Animation编程艺术]
(http://www.cocoachina.com/ios/20161018/17778.html)
http://www.cocoachina.com/industry/20140115/7703.html
