ios 贝塞尔曲线 颜色填充_iOS-贝塞尔曲线(UIBezierPath)的基本使用

UIBezierPath是UIKit中Core Graphics框架中的一个类，使用UIBezierPath可以绘制各种简单的图形。

今天我们简单介绍一下它的使用方法：

UIBezierPath的基本使用方法以及概念

各种图形的绘制：直线，折线，多边形，圆，圆弧，虚线....等等

延伸场景：动画，图表.....等

UIBezierPath的基本使用方法

首先绘制图形线条要在view的- (void)drawRect:(CGRect)rect方法中。

先写一个简单的例子，来介绍几个常用的方法属性。

- (void)drawRect:(CGRect)rect {

// Drawing code

[super drawRect:rect];

UIColor *color = [UIColor redColor];

[color set]; //设置线条颜色

UIBezierPath *path = [UIBezierPath bezierPath];

[path moveToPoint:CGPointMake(30, 30)];

[path addLineToPoint:CGPointMake(200, 80)];

[path addLineToPoint:CGPointMake(150, 150)];

path.lineWidth = 5.0;

path.lineCapStyle = kCGLineCapRound; //终点处理

path.lineJoinStyle = kCGLineJoinRound; //线条拐角

[path stroke];

}

效果图如下：

折线

在我们绘制之前，我们先简单了解一下UIBezierPath的几个属性和方法：

1、[color set]设置线条颜色

2、path.lineWidth = 4.0设置线条的宽度

3、path.lineCapStyle设置起点和终点的样式，是一个枚举值：

1、kCGLineCapButt 默认值，

2、kCGLineCapRound 圆形端点

3、 kCGLineCapSquare 方形端点

4、path.lineJoinStyle设置连接点的样式，是一个枚举值。

1、kCGLineJoinMiter 斜接连接处是一个斜线，

2、kCGLineJoinRound 连接处是一段圆滑的弧度，

3、kCGLineJoinBevel 一段斜角连接

至于具体的样式，大家可以看看效果。

5、[path stroke]用stroke画出来的不是被填充的view，与此对应的[path fill]得到的是内部被填充的view。

6、moveToPoint:设置起始点

7、addLineToPoint:连线到另一个点。(其实我们绘制图形就是，把很多个点连接起来，主要就是依靠这个方法)

8、closePath这个方法就是最后一条线，将终点和起点连接起来。

接下来我们开始学习一些基本使用

👇 👇 👇 👇 👇 👇

1. 绘制多边形

//多边形

- (void)drawRect:(CGRect)rect {

// Drawing code

[super drawRect:rect];

UIColor *color = [UIColor redColor];

[color set]; //设置线条颜色

UIBezierPath *path = [UIBezierPath bezierPath];

[path moveToPoint:CGPointMake(50, 100)];

[path addLineToPoint:CGPointMake(150, 50)];

[path addLineToPoint:CGPointMake(250, 100)];

[path addLineToPoint:CGPointMake(250, 200)];

[path addLineToPoint:CGPointMake(100, 200)];

[path closePath]; // 最后一根线条,可以直接调此方法

path.lineWidth = 5.0;

path.lineCapStyle = kCGLineCapRound; //终点处理

path.lineJoinStyle = kCGLineJoinRound; //线条拐角

[path stroke]; //不填充

// [path fill]; //填充

}

效果图如下：

多边形

如果将上面代码中，最后的[path stroke]方法改为[path fill]，那么图形就会被填充颜色

填充多边形

2. 矩形

矩形的绘制，可以使用上面绘制多边形的方法去绘制(方法1)。

正方形是特殊的矩形，使用原理相同。只要把宽和高设置一样即可。

UIBezierPath类提供了特殊的方法可以直接绘制矩形。

即：+ (UIBezierPath *)bezierPathWithRect:(CGRect)rect

使用方法如下：

//矩形

- (void)drawRect:(CGRect)rect {

[super drawRect:rect];

UIColor *color = [UIColor redColor];

[color set]; //设置线条颜色

UIBezierPath* path = [UIBezierPath bezierPathWithRect:CGRectMake(100, 100, 150, 80)];

path.lineWidth = 5.0;

path.lineCapStyle = kCGLineCapRound; //终点处理

path.lineJoinStyle = kCGLineJoinRound; //线条拐角

[path stroke];

}

效果图如下：

矩形

3. 圆和椭圆

圆形和椭圆形的绘制，如同矩形一样，UIBezierPath类提供了直接绘制的方法：+ (UIBezierPath *)bezierPathWithOvalInRect:(CGRect)rect。传入的rect参数是一个长方形就会得到一个内切的椭圆，传入的是一个正方形得到的就是一个内切的圆形。

使用方法如下：

- (void)drawRect:(CGRect)rect {

[super drawRect:rect];

UIColor *color = [UIColor redColor];

[color set];

UIBezierPath* path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 150, 80)];

path.lineWidth = 5.0;

[path stroke];

}

效果图如下：

椭圆

4. 一段圆弧

使用+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;方法可以得到一单圆弧。

/// 创建一段圆弧

/// @param center 圆弧的原点(中心点)

/// @param radius 半径

/// @param startAngle 其实角度

/// @param endAngle 结束角度

/// @param clockwise 是否是顺时针

+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;

使用方法如下：

//圆弧

- (void)drawRect:(CGRect)rect {

[super drawRect:rect];

UIColor *color = [UIColor redColor];

[color set];

UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(200, 200) radius:100 startAngle:1.25 * M_PI endAngle:1.75 * M_PI clockwise:YES];

[path addLineToPoint:CGPointMake(200, 200)];

[path closePath];

path.lineWidth = 5.0;

path.lineCapStyle = kCGLineCapRound; //终点处理

path.lineJoinStyle = kCGLineJoinRound; //线条拐角

[path stroke];

}

效果图如下：

圆弧

5. 绘制二次曲线

绘制二次曲线，我们先明白一个概念：

二次曲线就是一段曲线，圆弧是比较特殊的曲线，暂不考虑。

每个二次曲线的的起始点和终点的切线，会相交到一个点，我们称之为：控制点。

绘制二次曲线我们需要三个点：起始点、控制点、终点。

如下图所示：

控制点

使用方法如下：

//二次曲线

- (void)drawRect:(CGRect)rect {

[super drawRect:rect];

UIColor *color = [UIColor redColor];

[color set];

UIBezierPath *path = [UIBezierPath bezierPath];

[path moveToPoint:CGPointMake(100, 200)];

[path addQuadCurveToPoint:CGPointMake(250, 200) controlPoint:CGPointMake(50, 40)];

path.lineWidth = 5.0;

path.lineCapStyle = kCGLineCapRound;

path.lineJoinStyle = kCGLineJoinRound;

[path stroke];

}

效果图如下：

二次曲线

6. 绘制三次曲线

三次曲线和二次曲线类似，原理相同。

简单地说，我们需要起始点、终点、两个控制点。

因为是三次曲线，有两个波，一个波峰一个波谷，所以需要两个控制点。

需要用到方法：- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;

使用方法如下：

// 三次曲线

- (void)drawRect:(CGRect)rect {

[super drawRect:rect];

UIColor *color = [UIColor redColor];

[color set];

UIBezierPath *path = [UIBezierPath bezierPath];

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

[path addCurveToPoint:CGPointMake(260, 150) controlPoint1:CGPointMake(140, 0) controlPoint2:CGPointMake(140, 400)];

path.lineWidth = 5.0;

path.lineCapStyle = kCGLineCapRound;

path.lineJoinStyle = kCGLineJoinRound;

[path stroke];

}

效果图如下：

三次曲线

7. 画带圆角的矩形

这个结果类似于讲一个矩形切圆角，但是不一样。

这是一条线。切圆角的矩形线！

使用系统提供的方法：+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius即可。绘制一个带内切圆的矩形。

使用方法如下：

//带内切角的矩形

- (void)drawRect:(CGRect)rect {

[super drawRect:rect];

UIColor *color = [UIColor redColor];

[color set]; //设置线条颜色

UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 100, 200, 150) cornerRadius:20];

path.lineWidth = 5.0;

path.lineCapStyle = kCGLineCapRound; //线条拐角

path.lineJoinStyle = kCGLineJoinRound; //终点处理

[path stroke];

}

效果图如下：

带内切角的矩形

如果想指定内切某一个角，系统也提供了方法。

使用方法如下：

- (void)drawRect:(CGRect)rect {

[super drawRect:rect];

UIColor *color = [UIColor redColor];

[color set]; //设置线条颜色

UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 100, 200, 150) byRoundingCorners:UIRectCornerTopRight cornerRadii:CGSizeMake(20, 20)];

path.lineWidth = 5.0;

path.lineCapStyle = kCGLineCapRound; //线条拐角

path.lineJoinStyle = kCGLineJoinRound; //终点处理

[path stroke];

}

效果图如下：

内切右上角

8. 虚线

虚线我们在项目中会用到，但是这种方法却比较冷门。系统提供了一个方法：- (void)setLineDash:(nullable const CGFloat *)pattern count:(NSInteger)count phase:(CGFloat)phase;

这个方法中有一个参数比较特殊，即：(nullable const CGFloat *)pattern

该属性是一个 C 语言的数组, 其中每一个元素都是 CGFloat

数组中的元素代表着线段某一部分的长度, 第一个元素代表线段的第一条线

第二个元素代表线段中的第一个间隙

我们举个例子: 声明一个数组 CGFloat dash[] = @{5.0, 2.0};

这表示绘制的虚线的第一部分长度为5.0, 第一个间隙长度为2.0。 虚线的第二部分长度为5.0, 第二个间隙长度为2.0. 以此类推.

count表示参数pattern的个数

phase表示从第几个像素点开始绘制。

使用方法：

//虚线

- (void)drawRect:(CGRect)rect {

[super drawRect:rect];

UIColor *color = [UIColor redColor];

[color set]; //设置线条颜色

UIBezierPath *path = [UIBezierPath bezierPath];

[path moveToPoint:CGPointMake(100, 80)];

[path addLineToPoint:CGPointMake(350, 120)];

path.lineWidth = 2;

CGFloat dash[] = {8.0,3.0,16.0,7.0};

[path setLineDash:dash count:4 phase:7];

[path stroke];

}

效果图如下：

虚线

9. 更新绘图

如果想更新贝塞尔曲线图，就要重新绘制，或者重新调用- (void)drawRect:(CGRect)rect。

系统提供了专门的方法，来重新绘制

[self setNeedsDisplay];

调用此方法，就可以重绘！

总结：

从全篇看下来你会发现，其实就是介绍了几个系统提供的几个方法的使用简介。这都是最起初的使用，都是在view的内部的方法drawRect里面进行绘制。

一般项目用到的不多，后面会说结合CAShapeLayer，在外部对已有的view绘制图形线条，还有虚线，图标等，并进行简单的动画。项目中会用来制作曲线！

更复杂的动画也会说一些，比如QQ未读消息的拖拽的动画。

本篇文章部分代码借鉴了劉光軍_Shine的文章，这是原文章地址

所有代码我都全部敲写验证过。