iOS 绘图UIBezierPath 和 Core Graph

作者: 打不死的小怪兽 | 来源:发表于2017-07-27 12:01 被阅读154次

前言

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

iOS 绘图UIBezierPath 和 Core Graph

前言

UIBezierPath

UIBezierPath对象

1、对象创建方法

2、相关属性和方法

1、重写drawRect方法。但不需要我们自己获取当前上下文context；

2、创建相应图形的UIBezierPath对象，并设置一些修饰属性；

3、渲染，完成绘制。

3、具体demo如下

3.2.1 直角矩形

3.2.2 圆角矩形

3.2.3圆角矩形

4.1 圆形

4.2 椭圆形

5.1 弧线

5.2 贝塞尔曲线1

5.3 贝塞尔曲线2

CoreGraphics

1、绘图需要 CGContextRef

2、怎么拿到context

3、注意

4、drawRect方法什么时候触发

5、步骤：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

iOS 绘图UIBezierPath 和 Core Graph

前言

UIBezierPath

UIBezierPath对象

1、对象创建方法

2、相关属性和方法

1、 重写drawRect方法。但不需要我们自己获取当前上下文context；

2、创建相应图形的UIBezierPath对象，并设置一些修饰属性；

3、渲染，完成绘制。

3、具体demo如下

3.2.1 直角矩形

3.2.2 圆角矩形

3.2.3圆角矩形

4.1 圆形

4.2 椭圆形

5.1 弧线

5.2 贝塞尔曲线1

5.3 贝塞尔曲线2

CoreGraphics

1、绘图需要 CGContextRef

2、怎么拿到context

3、注意

4、drawRect方法什么时候触发

5、步骤：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

1、重写drawRect方法。但不需要我们自己获取当前上下文context；