使用UIBezierPath类可以创建基于矢量的路径,这个类在UIKit中.此类是Core Graphics框架关于path的一个封装.使用此类可以定义简单的形状,如椭圆或者矩形,或者有多个直线和曲线段组成的形状。
1.UIBezierPath基础
UIBezierPath对象是CGPathRef数据类型的封装。path如果是基于矢量形状的,都用直线和曲线段去创建。我们使用直线段去创建矩形和多边形,使用曲线段去创建弧(arc)、圆或者其他复杂的曲线形状。每一段都包括一个或者多个点,绘图命令定义如何去诠释这些点。每一个直线段或者曲线段的结束的地方是下一个的开始的地方。每一个连接的直线或者曲线段的集合成为subpath。一个UIBezierPath对象定义一个完整的路径包括一个或者多个subpaths。
2.创建一个完整的UIBezierPath对象的完整步骤如下:
- 创建一个UIBezierPath对象
- 使用方法moveToPoint:去设置初始线段的起点
- 添加line或者curve去定义一个或者多个subpath
- 修改UIBezierPath对象跟绘图相关的属性
3.使用UIBezierPath创建直线或者多边形
使用下面这个方法:
- (void)addLineToPoint:(CGPoint)point;
(1).画一条直线代码如下:
- (void)drawRect:(CGRect)rect
{
UIColor *color = [UIColor redColor];
[color set]; //设置线条颜色
UIBezierPath *linePath = [UIBezierPath bezierPath]; // 初始化UIBezierPath
linePath.lineWidth = 5.0; // 设置线条宽度
linePath.lineCapStyle = kCGLineCapRound; //线条拐角
linePath.lineJoinStyle = kCGLineCapRound; //终点处理
[linePath moveToPoint:CGPointMake(10.0, 100.0)]; // 设置初始线段的起点
[linePath addLineToPoint:CGPointMake(self.frame.size.width-20.0, 100.0)]; // 开始画
[linePath stroke];// 根据坐标点连线
}
(2).画三角形代码如下:
- (void)drawRect:(CGRect)rect
{
UIColor *color = [UIColor redColor];
[color set]; //设置线条颜色
CGFloat viewCenterX = self.center.x; // 屏幕的中心X轴
UIBezierPath *linePath = [UIBezierPath bezierPath]; // 初始化UIBezierPath
linePath.lineWidth = 5.0; // 设置线条宽度
linePath.lineCapStyle = kCGLineCapRound; //线条拐角
linePath.lineJoinStyle = kCGLineCapRound; //终点处理
[linePath moveToPoint:CGPointMake(viewCenterX, 100.0)]; // 设置初始线段的起点
[linePath addLineToPoint:CGPointMake(viewCenterX+40.0, 150.0)]; // 开始画
[linePath addLineToPoint:CGPointMake(viewCenterX-40.0, 150.0)];
[linePath closePath]; // 最后一根线通过调用closePath方法得到的
[linePath stroke];// 根据坐标点连线
}
如果修改最后一句代码为:[linePath fill];
运行结果就如下:
4.使用UIBezierPath创建虚线
使用下面这个方法:
- (void)setLineDash:(nullable const CGFloat *)pattern count:(NSInteger)count phase:(CGFloat)phase;
画虚线代码如下:
- (void)drawRect:(CGRect)rect
{
UIColor *color = [UIColor redColor];
[color set]; //设置线条颜色
UIBezierPath *dottedLinePath = [UIBezierPath bezierPath]; // 初始化UIBezierPath
dottedLinePath.lineWidth = 5.0; // 设置线条宽度
dottedLinePath.lineCapStyle = kCGLineCapRound; //线条拐角
dottedLinePath.lineJoinStyle = kCGLineCapRound; //终点处理
[dottedLinePath moveToPoint:CGPointMake(10.0, 100.0)]; // 设置初始线段的起点
[dottedLinePath addLineToPoint:CGPointMake(self.frame.size.width-20.0, 100.0)]; // 开始画
CGFloat dash[] = {3, 1}; // 3实线,1空白
[dottedLinePath setLineDash:dash count:1 phase:1];
[dottedLinePath stroke];// 根据坐标点连线
}
5.使用UIBezierPath创建矩形或者正方形
使用下面这个方法:
+ (instancetype)bezierPathWithRect:(CGRect)rect;
或者使用下面这个方法:
- (void)addLineToPoint:(CGPoint)point;
(1).第一种画矩形代码如下:
- (void)drawRect:(CGRect)rect
{
UIColor *color = [UIColor redColor];
[color set]; //设置线条颜色
UIBezierPath *rectanglePath = [UIBezierPath bezierPath]; // 初始化UIBezierPath
rectanglePath.lineWidth = 5.0; // 设置线条宽度
rectanglePath.lineCapStyle = kCGLineCapRound; //线条拐角
rectanglePath.lineJoinStyle = kCGLineCapRound; //终点处理
[rectanglePath moveToPoint:CGPointMake(10.0, 100.0)]; // 设置初始线段的起点
[rectanglePath addLineToPoint:CGPointMake(self.frame.size.width-20.0, 100.0)]; // 开始画
[rectanglePath addLineToPoint:CGPointMake(self.frame.size.width-20.0, 200.0)];
[rectanglePath addLineToPoint:CGPointMake(10.0, 200.0)];
[rectanglePath closePath];
[rectanglePath stroke];// 根据坐标点连线
}
(2).第二种画矩形代码如下:
- (void)drawRect:(CGRect)rect
{
UIColor *color = [UIColor redColor];
[color set]; //设置线条颜色
UIBezierPath *rectanglePath = [UIBezierPath bezierPath]; // 初始化UIBezierPath
rectanglePath.lineWidth = 5.0; // 设置线条宽度
rectanglePath.lineCapStyle = kCGLineCapRound; //线条拐角
rectanglePath.lineJoinStyle = kCGLineCapRound; //终点处理
[rectanglePath moveToPoint:CGPointMake(10.0, 100.0)]; // 设置初始线段的起点
[rectanglePath addLineToPoint:CGPointMake(self.frame.size.width-20.0, 100.0)]; // 开始画
[rectanglePath addLineToPoint:CGPointMake(self.frame.size.width-20.0, 200.0)];
[rectanglePath addLineToPoint:CGPointMake(10.0, 200.0)];
[rectanglePath closePath];
[rectanglePath stroke];// 根据坐标点连线
}
6.使用UIBezierPath创建圆形或者椭圆形
使用下面这个方法:
+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;
当传入的rect是一个正方形时,绘制的图像是一个内切圆;当传入的rect是一个长方形时,绘制的图像是一个内切椭圆
7.使用UIBezierPath创建弧线
使用下面这个方法:
+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;
参数说明:
- center:这段弧线的中心
- radius:这段弧线的半径
- startAngle:这段弧线的开始角度
- endAngle:这段弧线的结束角度
- clockwise:是否顺时针方向(YES:顺时针;NO:逆时针)
9.使用UIBezierPath创建二次贝塞尔曲线和三次贝塞尔曲线
(1).绘制二次贝塞尔曲线
使用下面这个方法:
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;
参数说明:
- endPoint:这段弧线的结束位置
- controlPoint:这段弧线的控制位置
(2).绘制三次贝塞尔曲线
使用下面这个方法:
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;
参数说明:
- endPoint:这段弧线的结束位置
- controlPoint1:这段弧线的第一个控制位置
- controlPoint2:这段弧线的第二个控制位置
10.使用UIBezierPath创建圆角
使用下面这个方法:
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius;
下面这个方法是创建每个角的圆角:
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;
11.UIBezierPath方法说明
// 用于创建一个基础路径
+ (instancetype)bezierPath;
// 用于画矩阵
+ (instancetype)bezierPathWithRect:(CGRect)rect;
// 当rect是一个正方形时,绘制的图像是一个内切圆;当rect是一个长方形时,绘制的图像是一个内切椭圆
+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;
// 用于在矩形里面画出一个椭圆
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius;
// 可以指定画圆角,可以一个View添加圆角
+ (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;
// 根据一个Core Graphics路径创建一个新的路径
+ (instancetype)bezierPathWithCGPath:(CGPathRef)CGPath;
// 设置初始线段的起点
- (void)moveToPoint:(CGPoint)point;
// 从一个点添加一条线到point点
- (void)addLineToPoint:(CGPoint)point;
// 从一个点添加曲线到另一个点endPoint,曲线的弯度控制点有两个controlPoint1和controlPoint2。
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;
// 从一个点添加曲线到另一个点endPoint,曲线的弯度控制点controlPoint
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;
// 根据一个点画出一条弧线/圆
- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise NS_AVAILABLE_IOS(4_0);
// 合拢当前路径的起始点和终止点
- (void)closePath;
// 移除path路径瞄下的所有路径,当然必须要在[path fill];或者是[path stroke];语句之前才有效果
- (void)removeAllPoints;
// 路径之间的拼接,拼接之后只需要调用拼接路径的路径执行fill/stroke即可,但是fill和closePath是独立的不会互相影响
- (void)appendPath:(UIBezierPath *)bezierPath;
// 反向绘制path
- (UIBezierPath *)bezierPathByReversingPath ;
- (void)applyTransform:(CGAffineTransform)transform;
@property(readonly,getter=isEmpty) BOOL empty;// 判断路径是否为空
@property(nonatomic,readonly) CGRect bounds;// 获取当前路劲的画板CGRect
@property(nonatomic,readonly) CGPoint currentPoint;// 获取当前路径下的画笔的点
- (BOOL)containsPoint:(CGPoint)point;// 判断路劲里面是否包含某个点,需要是重要点才为true,fill形成的点不算
@property(nonatomic) CGFloat lineWidth;// 线的宽度
@property(nonatomic) CGLineCap lineCapStyle;// 线的类型
@property(nonatomic) CGLineJoin lineJoinStyle;// 线尾部头部的类型
@property(nonatomic) CGFloat miterLimit; // Used when lineJoinStyle is kCGLineJoinMiter
@property(nonatomic) CGFloat flatness;
@property(nonatomic) BOOL usesEvenOddFillRule; // Default is NO. When YES, the even-odd fill rule is used for drawing, clipping, and hit testing.
// 用于画虚线
- (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;//功能包括fill,并且会自动关闭上下文
// These methods do not affect the blend mode or alpha of the current graphics context
- (void)fillWithBlendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha;
- (void)strokeWithBlendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha;
- (void)addClip;//添加裁剪,会将路径之外的图案切除,但是必须在路径执行fill/stroke方法之前才有效