您的位置：首页 > 产品设计 > UI/UE

UIBezierPath精讲

2016-02-24 14:17 441 查看



前言

笔者在写本篇文章之前，也没有系统学习过贝塞尔曲线，只是曾经某一次的需求需要使用到，才临时百度看了一看而且使用最基本的功能。现在总算有时间停下来好好研究研究这个神奇而伟大的贝塞尔先生！

笔者在学习时，首先看了两遍
UIBezierPath
类头文件定义，熟悉了一下相关的属性和方法。

基础知识

使用
UIBezierPath
可以创建基于矢量的路径，此类是
Core Graphics
框架关于路径的封装。使用此类可以定义简单的形状，如椭圆、矩形或者有多个直线和曲线段组成的形状等。

UIBezierPath
是
CGPathRef
数据类型的封装。如果是基于矢量形状的路径，都用直线和曲线去创建。我们使用直线段去创建矩形和多边形，使用曲线去创建圆弧（arc）、圆或者其他复杂的曲线形状。

简介：

贝塞尔曲线，是应用于二维图形应用程序的数学曲线。可以创建基于矢量的路径。这个类在UIKit中。此类是Core Graphics框架对CGContextRef的一个封装。使用此类可以定义简单的形状，如椭圆或者矩形，或者有多个直线和曲线段组成的形状。曲线定义：起始点、终止点（锚点）、控制点。通过调整控制点，贝塞尔曲线的形状会发生变化。

使用UIBezierPath画图步骤：

1、创建一个UIBezierPath对象；

2、调用-moveToPoint:设置初始线段的起点；

3、添加线或者曲线去定义一个或者多个子路径；

4、改变UIBezierPath对象跟绘图相关的属性。如，我们可以设置画笔的属性、填充样式等。

创建方法：

+ (instancetype)bezierPath;使用比较多，因为这方法创建的对象，我们可以根据我们的需要任意定制样式，可以画任何我们想画的图形。

+ (instancetype)bezierPathWithRect:(CGRect)rect;这方法根据一个矩形画贝塞尔曲线。

+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;这方法根据一个矩形画内切曲线。通常用它来画圆或者椭圆。

+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius;画矩形，但是这个矩形是可以画圆角的。第一个参数是矩形，第二个参数是圆角大小。

+ (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;用于画圆弧，参数说明如下： center: 弧线中心点的坐标 radius: 弧线所在圆的半径 startAngle: 弧线开始的角度值 endAngle: 弧线结束的角度值 clockwise:
是否顺时针画弧线。

+ (instancetype)bezierPathWithCGPath:(CGPathRef)CGPath;这个方法创建并返回一个 Core Graphics path。

- (UIBezierPath *)bezierPathByReversingPath;创建并返回一个新的反转内容的当前路径曲线路径的对象。

构建一个path：

- (void)moveToPoint:(CGPoint)point; 设置第一个起始点到接收器

- (void)addLineToPoint:(CGPoint)point;附加一条直线到接收器的路径

- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2; 该方法就是画三次贝塞尔曲线的关键方法，以三个点画一段曲线，一般和moveToPoint:配合使用。其实端点为moveToPoint:设置，终止端点位为endPoint；。控制点1的坐标controlPoint1，这个参数可以调整。控制点2的坐标是controlPoint2。

- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;画二次贝塞尔曲线，是通过调用此方法来实现的。一般和moveToPoint:配合使用。endPoint终端点，controlPoint控制点，对于二次贝塞尔曲线，只有一个控制点。

- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise ;

- (void)closePath;闭合线

- (void)removeAllPoints;移除所有的点

- (void)appendPath:(UIBezierPath *)bezierPath;追加指定的路径对象到内容到接收器的路径

- (void)applyTransform:(CGAffineTransform)transform;用指定的仿射变换矩阵变换路径的所有点

path 信息：

@property(readonly,getter=isEmpty) BOOL empty;该值指示路径是否有任何有效的元素。

@property(nonatomic,readonly) CGRect bounds;路径包括的矩形。

@property(nonatomic,readonly) CGPoint currentPoint;图形路径中的当前点。

- (BOOL)containsPoint:(CGPoint)point;接收器是否包含指定的点。

绘制属性：

@property(nonatomic) CGFloat lineWidth; 线宽。

@property(nonatomic) CGLineCap lineCapStyle; 端点类型。

typedef CF_ENUM(int32_t, CGLineCap) {

kCGLineCapButt, //默认的

kCGLineCapRound,//轻微圆角

kCGLineCapSquare //正方形

};

@property(nonatomic) CGLineJoin lineJoinStyle; 连接类型。

typedef CF_ENUM(int32_t, CGLineJoin) {

kCGLineJoinMiter, //默认的表示斜接

kCGLineJoinRound,//圆滑衔接

kCGLineJoinBevel //斜角连接

};

@property(nonatomic) CGFloat miterLimit; 这个限制值有助于避免在连接线段志坚的尖峰

@property(nonatomic) CGFloat flatness;确定弯曲路径短的绘制精度的因素

@property(nonatomic) BOOL usesEvenOddFillRule; 判断奇偶数组的规则绘制图像路径

- (void)setLineDash:(nullable const CGFloat *)pattern count:(NSInteger)count phase:(CGFloat)phase; 设置线型

- (void)getLineDash:(nullable CGFloat *)pattern count:(nullable NSInteger *)count phase:(nullable CGFloat *)phase; 检索线型

当前图形上下文中的路径操作：

- (void)fill; 填充颜色

- (void)stroke; 各个点连线

- (void)fillWithBlendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha;填充

- (void)strokeWithBlendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha;

- (void)addClip;与封闭的接收器的路径与当前徒刑上下文的裁剪路径的面积

UIBezierPath
创建方法介绍

我们先看看
UIBezierPath
类提供了哪些创建方式，这些都是工厂方法，直接使用即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

+ (instancetype)bezierPath;
+(instancetype)bezierPathWithRect:(CGRect)rect;

+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;
+(instancetype)bezierPathWithRoundedRect:(CGRect)rect

cornerRadius:(CGFloat)cornerRadius;
+(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;
+(instancetype)bezierPathWithCGPath:(CGPathRef)CGPath;

下面我们一个一个地介绍其用途。

1
2
3

+ (instancetype)bezierPath;

这个使用比较多，因为这个工厂方法创建的对象，我们可以根据我们的需要任意定制样式，可以画任何我们想画的图形。

1
2
3

+ (instancetype)bezierPathWithRect:(CGRect)rect;

这个工厂方法根据一个矩形画贝塞尔曲线。

1
2
3

+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;

这个工厂方法根据一个矩形画内切曲线。通常用它来画圆或者椭圆。

1
2
3
4
5
6
7

+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect
cornerRadius:(CGFloat)cornerRadius;

+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect
byRoundingCorners:(UIRectCorner)corners

cornerRadii:(CGSize)cornerRadii;

第一个工厂方法是画矩形，但是这个矩形是可以画圆角的。第一个参数是矩形，第二个参数是圆角大小。 第二个工厂方法功能是一样的，但是可以指定某一个角画成圆角。像这种我们就可以很容易地给
UIView
扩展添加圆角的方法了。

1
2
3
4
5
6
7

+ (instancetype)bezierPathWithArcCenter:(CGPoint)center
radius:(CGFloat)radius

startAngle:(CGFloat)startAngle
endAngle:(CGFloat)endAngle

clockwise:(BOOL)clockwise;

这个工厂方法用于画弧，参数说明如下： 
center
: 弧线中心点的坐标 
radius
: 弧线所在圆的半径
startAngle
: 弧线开始的角度值
endAngle
: 弧线结束的角度值
clockwise
: 是否顺时针画弧线

温馨提示：我们下面的代码都是在自定义的BezierPathView类中的
- (void)drawRect:(CGRect)rect
方法中调用

画三角形

先看效果图：



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

// 画三角形
-(void)drawTrianglePath{

UIBezierPath*path=[UIBezierPathbezierPath];

[path moveToPoint:CGPointMake(20,20)];
[path addLineToPoint:CGPointMake(self.frame.size.width-40,20)];

[path addLineToPoint:CGPointMake(self.frame.size.width/2,self.frame.size.height-20)];

// 最后的闭合线是可以通过调用closePath方法来自动生成的，也可以调用-addLineToPoint:方法来添加
// [path addLineToPoint:CGPointMake(20, 20)];

[pathclosePath];

// 设置线宽

path.lineWidth=1.5;

// 设置填充颜色
UIColor*fillColor=[UIColorgreenColor];

[fillColorset];
[pathfill];

// 设置画笔颜色

UIColor*strokeColor=[UIColorblueColor];
[strokeColorset];

// 根据我们设置的各个点连线

[pathstroke];
}

我们设置画笔颜色通过
set
方法：

1
2
3
4

UIColor *strokeColor=[UIColorblueColor];
[strokeColorset];

如果我们需要设置填充颜色，比如这里设置为绿色，那么我们需要在设置画笔颜色之前先设置填充颜色，否则画笔颜色就被填充颜色替代了。也就是说，如果要让填充颜色与画笔颜色不一样，那么我们的顺序必须是先设置填充颜色再设置画笔颜色。如下，这两者顺序不能改变。因为我们设置填充颜色也是跟设置画笔颜色一样调用
UIColor
的
-set
方法。

1
2
3
4
5
6
7
8
9
10

// 设置填充颜色
UIColor*fillColor=[UIColorgreenColor];

[fillColor set];
[pathfill];

// 设置画笔颜色

UIColor *strokeColor=[UIColorblueColor];
[strokeColorset];

画矩形

先看效果图：



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// 画矩形
-(void)drawRectPath{

UIBezierPath*path=[UIBezierPath
bezierPathWithRect:CGRectMake(20,20,self.frame.size.width-40,self.frame.size.height-40)];

path.lineWidth=1.5;
path.lineCapStyle=kCGLineCapRound;

path.lineJoinStyle=kCGLineJoinBevel;

// 设置填充颜色
UIColor*fillColor=[UIColorgreenColor];

[fillColorset];
[pathfill];

// 设置画笔颜色

UIColor*strokeColor=[UIColorblueColor];
[strokeColorset];

// 根据我们设置的各个点连线

[pathstroke];
}

lineCapStyle
属性是用来设置线条拐角帽的样式的，其中有三个选择：

1
2
3
4
5
6
7
8
9

/* Line cap styles. */

typedef CF_ENUM(int32_t,CGLineCap){
kCGLineCapButt,

kCGLineCapRound,
kCGLineCapSquare

};

其中，第一个是默认的，第二个是轻微圆角，第三个正方形。

lineJoinStyle
属性是用来设置两条线连结点的样式，其中也有三个选择：

1
2
3
4
5
6
7
8
9

/* Line join styles. */

typedef CF_ENUM(int32_t,CGLineJoin){
kCGLineJoinMiter,

kCGLineJoinRound,
kCGLineJoinBevel

};

其中，第一个是默认的表示斜接，第二个是圆滑衔接，第三个是斜角连接。

画圆

我们可以使用
+ bezierPathWithOvalInRect:
方法来画圆，当我们传的
rect
参数是一下正方形时，画出来的就是圆。

先看效果图：



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

- (void)drawCiclePath{
// 传的是正方形，因此就可以绘制出圆了

UIBezierPath*path=[UIBezierPath
bezierPathWithOvalInRect:CGRectMake(20,20,self.frame.size.width-40,self.frame.size.width-40)];

// 设置填充颜色
UIColor*fillColor=[UIColorgreenColor];

[fillColorset];
[pathfill];

// 设置画笔颜色

UIColor*strokeColor=[UIColorblueColor];
[strokeColorset];

// 根据我们设置的各个点连线

[pathstroke];
}

注意：要画圆，我们需要传的
rect
参数必须是正方形哦！

画椭圆

先看效果图：



前面我们已经画圆了，我们可以使用
+ bezierPathWithOvalInRect:
方法来画圆，当我们传的
rect
参数是一下正方形时，画出来的就是圆。那么我们要是不传正方形，那么绘制出来的就是椭圆了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// 画椭圆
-(void)drawOvalPath{

// 传的是不是正方形，因此就可以绘制出椭圆圆了
UIBezierPath*path=[UIBezierPath
bezierPathWithOvalInRect:CGRectMake(20,20,self.frame.size.width-80,self.frame.size.height-40)];

// 设置填充颜色

UIColor*fillColor=[UIColorgreenColor];
[fillColorset];

[pathfill];

// 设置画笔颜色
UIColor*strokeColor=[UIColorblueColor];

[strokeColorset];

// 根据我们设置的各个点连线
[pathstroke];

}

画带圆角的矩形

1
2
3
4
5
6
7

+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect
cornerRadius:(CGFloat)cornerRadius;

+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect
byRoundingCorners:(UIRectCorner)corners

cornerRadii:(CGSize)cornerRadii;

第一个工厂方法是画矩形，但是这个矩形是可以画圆角的。第一个参数是矩形，第二个参数是圆角大小。 第二个工厂方法功能是一样的，但是可以指定某一个角画成圆角。像这种我们就可以很容易地给
UIView
扩展添加圆角的方法了。

四个都是圆角10：



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

- (void)drawRoundedRectPath{
UIBezierPath*path=[UIBezierPath
bezierPathWithRoundedRect:CGRectMake(20,20,self.frame.size.width-40,self.frame.size.height-40)
cornerRadius:10];

// 设置填充颜色

UIColor*fillColor=[UIColorgreenColor];
[fillColorset];

[pathfill];

// 设置画笔颜色
UIColor*strokeColor=[UIColorblueColor];

[strokeColorset];

// 根据我们设置的各个点连线
[pathstroke];

}

如果要画只有一个角是圆角，那么我们就修改创建方法：

1
2
3

UIBezierPath *path=[UIBezierPath
bezierPathWithRoundedRect:CGRectMake(20,20,self.frame.size.width-40,self.frame.size.height-40)
byRoundingCorners:UIRectCornerTopRight cornerRadii:CGSizeMake(20,20)];

其中第一个参数一样是传了个矩形，第二个参数是指定在哪个方向画圆角，第三个参数是一个
CGSize
类型，用来指定水平和垂直方向的半径的大小。看下效果图：



画弧

画弧前，我们需要了解其参考系，如下图（图片来自网络）：



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

#define kDegreesToRadians(degrees) ((pi * degrees)/ 180)
-(void)drawARCPath{

constCGFloatpi=3.14159265359;

CGPointcenter=CGPointMake(self.frame.size.width/2,self.frame.size.height/2);
UIBezierPath*path=[UIBezierPath
bezierPathWithArcCenter:center

radius:100
startAngle:0

endAngle:kDegreesToRadians(135)
clockwise:YES];

path.lineCapStyle=kCGLineCapRound;

path.lineJoinStyle=kCGLineJoinRound;
path.lineWidth=5.0;

UIColor*strokeColor=[UIColorredColor];

[strokeColorset];

[pathstroke];
}

效果图如下：



我们要明确一点，画弧参数
startAngle
和
endAngle
使用的是弧度，而不是角度，因此我们需要将常用的角度转换成弧度。对于效果图中，我们设置弧的中心为控件的中心，起点弧度为0，也就是正东方向，而终点是135度角的位置。如果设置的
clockwise:YES
是逆时针方向绘制，如果设置为
NO
，效果如下：



这两者正好是相反的。

画二次贝塞尔曲线

先来学习一下关于控制点，如下图（图片来自网络）：



画二次贝塞尔曲线，是通过调用此方法来实现的：

1
2
3

- (void)addQuadCurveToPoint:(CGPoint)endPointcontrolPoint:(CGPoint)controlPoint

参数说明：

endPoint
：终端点

controlPoint
：控制点，对于二次贝塞尔曲线，只有一个控制点

看效果图：



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

- (void)drawSecondBezierPath{
UIBezierPath*path=[UIBezierPathbezierPath];

// 首先设置一个起始点

[path moveToPoint:CGPointMake(20,self.frame.size.height-100)];

// 添加二次曲线
[path addQuadCurveToPoint:CGPointMake(self.frame.size.width-20,self.frame.size.height-100)

controlPoint:CGPointMake(self.frame.size.width/2,0)];

path.lineCapStyle=kCGLineCapRound;
path.lineJoinStyle=kCGLineJoinRound;

path.lineWidth=5.0;

UIColor*strokeColor=[UIColorredColor];
[strokeColorset];

[pathstroke];

}

画二次贝塞尔曲线的步骤：

先设置一个起始点，也就是通过
-moveToPoint:
设置
调用
-addQuadCurveToPoint:controlPoint:
方法设置终端点和控制点，以画二次曲线

在效果图中，拱桥左边的起始点就是我们设置的起始点，最右边的终点，就是我们设置的终端点，而我们设置的控制点为（width / 2, 0）对应于红色矩形中水平方向在正中央，而垂直方向在最顶部。

这个样式看起来很像
sin
或者
cos
函数吧？这两个只是特例而已，其实可以画任意图形，只是想不到，没有做不到的。

画三次贝塞尔曲线

贝塞尔曲线必定通过首尾两个点，称为端点；中间两个点虽然未必要通过，但却起到牵制曲线形状路径的作用，称作控制点。关于三次贝塞尔曲线的控制器，看下图：



提示：其组成是起始端点+控制点1+控制点2+终止端点

如下方法就是画三次贝塞尔曲线的关键方法，以三个点画一段曲线，一般和
-moveToPoint:
配合使用。

1
2
3
4
5

- (void)addCurveToPoint:(CGPoint)endPoint
controlPoint1:(CGPoint)controlPoint1

controlPoint2:(CGPoint)controlPoint2

看下效果图：



实现代码是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

- (void)drawThirdBezierPath{
UIBezierPath*path=[UIBezierPathbezierPath];

// 设置起始端点

[path moveToPoint:CGPointMake(20,150)];

[path addCurveToPoint:CGPointMake(300,150)
controlPoint1:CGPointMake(160,0)

controlPoint2:CGPointMake(160,250)];

path.lineCapStyle=kCGLineCapRound;
path.lineJoinStyle=kCGLineJoinRound;

path.lineWidth=5.0;

UIColor*strokeColor=[UIColorredColor];
[strokeColorset];

[pathstroke];

}

我们需要注意，这里确定的起始端点为(20,150)，终止端点为(300, 150)，基水平方向是一致的。控制点1的坐标是（160，0），水平方向相当于在中间附近，这个参数可以调整。控制点2的坐标是（160，250），如果以两个端点的连线为水平线，那么就是250-150=100，也就是在水平线下100。这样看起来就像一个
sin
函数了。

源代码下载

小伙伴们可以到github下载：https://github.com/CoderJackyHuang/UIBezierPathLayerDemos
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航