目录:
一 属性
二 UIBezierPath创建方法
2.1 实例化UIBezierPath对象
2.2 在Rect里面画一个矩形
2.3 在rect里的画一个内切曲线:
2.4 根据一个Rect 画一个圆角矩形曲线 (Radius:圆角半径) 当Rect为正方形时且Radius等于边长一半时画的是一个圆
2.5 根据Rect针对四角中的某个或多个角设置圆角
2.6 以某个中心点画弧线
2.7 根据CGPath创建并返回一个新的UIBezierPath对象
2.7 建并返回一个新的BezierPath, 这个 BezierPath 的方向是原 BezierPath 的反方向
三 构造路径
3.1将 UIBezierPath 对象的 currentPoint 移动到指定的点
3.2在当前子路径中追加一条直线
3.3 在当前子路径中追加一条圆弧
3.4 在当前 子路经中追加一条 三次贝塞尔曲线
3.5 当前 子路经中追加一条 二次贝塞尔曲线
3.6 关闭当前子路经
3.7 删除 UIBezierPath 对象中的所有点, 效果也就等同于删除了所有子路经
3.8 UIBezierPath 中的 CGPath 对象
3.9 绘图路径中的当前点
四 绘制路径
4.1 填充路径
4.2 使用混合模式进行填充
4.3 绘制路径
4.4 使用混合模式进行填充
4.5 剪切路径
五 Hit Detection
5.1 是否包含某个点
5.2 路径是否为空
5.3 路径覆盖的矩形区域
5.4 Apply Transform
一 属性
// 将UIBezierPath类转换成CGPath,类似于UIColor的CGColor
@property(nonatomic) CGPathRef CGPath;
// empty:只读类型,路径上是否有有效的元素
@property(readonly,getter=isEmpty) BOOL empty;
// bounds:和view的bounds是不一样的,它获取path的X坐标、Y坐标、宽度,但是高度为0
@property(nonatomic,readonly) CGRect bounds;
// currentPoint:当前path的位置,可以理解为path的终点
@property(nonatomic,readonly) CGPoint currentPoint;
// lineWidth:path线的宽度
@property(nonatomic) CGFloat lineWidth;
// lineCapStylepath端点样式,有3种样式
@property(nonatomic) CGLineCap lineCapStyle;
/* Line cap styles. */
typedef CF_ENUM(int32_t, CGLineCap) {
kCGLineCapButt, // 无端点
kCGLineCapRound, // 圆形端点
kCGLineCapSquare // 方形端点(样式上和kCGLineCapButt是一样的,但是比kCGLineCapButt长一点)
};
// 拐角样式
@property(nonatomic) CGLineJoin lineJoinStyle;
/* Line join styles. */
typedef CF_ENUM(int32_t, CGLineJoin) {
kCGLineJoinMiter, // 尖角
kCGLineJoinRound, // 圆角
kCGLineJoinBevel // 缺角
};
// miterLimit:最大斜接长度(只有在使用kCGLineJoinMiter是才有效), 边角的角度越小,斜接长度就会越大
@property(nonatomic) CGFloat miterLimit; // Used when lineJoinStyle is kCGLineJoinMiter
// flatness:弯曲路径的渲染精度,默认为0.6,越小精度越高,相应的更加消耗性能。
@property(nonatomic) CGFloat flatness;
//usesEvenOddFillRule:单双数圈规则是否用于绘制路径,默认是NO。
@property(nonatomic) BOOL usesEvenOddFillRule; // Default is NO. When YES, the even-odd fill rule is used for drawing, clipping, and hit testing.
二 UIBezierPath创建方法
2.1 实例化UIBezierPath对象
- (void)drawRect:(CGRect)rect {
UIBezierPath *path = [UIBezierPath bezierPath];
}
2.2 在Rect里面画一个矩形
+ (instancetype)bezierPathWithRect:(CGRect)rect;
- (void)drawRect:(CGRect)rect {
UIBezierPath *path1 = [UIBezierPath bezierPathWithRect:CGRectMake(100, 80, 80, 80)];
[[UIColor orangeColor] set];
path1.lineWidth = 3;
[path1 stroke];
}
2.3 在rect里的画一个内切曲线
+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;
- (void)drawRect:(CGRect)rect {
UIBezierPath *path2 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 180, 100)];
[[UIColor orangeColor] set];
path2.lineWidth = 3;
[path2 stroke];
}
2.4 根据一个Rect 画一个圆角矩形曲线 (Radius:圆角半径) 当Rect为正方形时且Radius等于边长一半时画的是一个圆
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius;
- (void)drawRect:(CGRect)rect {
rect = CGRectMake(130,100, 150,90);
UIBezierPath *path3 = [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:8];
[[UIColor blueColor] set];
[path3 fill];
path3.lineWidth = 3;
[[UIColor redColor] set];
[path3 stroke];
}
2.5 根据Rect针对四角中的某个或多个角设置圆角
/**
* 参数:
* rect->矩形的Frame
* corners->指定的圆角
* cornerRadii->圆角的大小
*/
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;
// 使用
- (void)drawRect:(CGRect)rect {
rect = CGRectMake(130,100, 150,90);
UIBezierPath *path4 = [UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners: UIRectCornerTopLeft|UIRectCornerBottomRight cornerRadii:CGSizeMake(10,50)];
[[UIColor purpleColor] set];
[path4 fill];
[[UIColor yellowColor] set];
[path4 stroke];
}
2.6 以某个中心点画弧线
/**
* 参数:
* center->圆点
* radius->半径
* startAngle->起始位置
* endAngle->结束位置
* clockwise->是否顺时针方向
*/
+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;
// 使用
- (void)drawRect:(CGRect)rect {
UIBezierPath *path5 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(180, 180) radius:100 startAngle:0 endAngle:90 clockwise:YES];
[[UIColor purpleColor] set];
[path5 fill];
path5.lineWidth = 3;
[[UIColor orangeColor] set];
[path5 stroke];
}
2.7 根据CGPath创建并返回一个新的UIBezierPath对象
+ (instancetype)bezierPathWithCGPath:(CGPathRef)CGPath
2.7 建并返回一个新的BezierPath, 这个 BezierPath 的方向是原 BezierPath 的反方向
/**
* 通过该方法反转一条路径, 并不会修改该路径的样子. 它仅仅是修改了绘制的方向
* @return: 返回一个新的 UIBezierPath 对象, 形状和原来路径的形状一样,
* 但是绘制的方向相反.
*/
- (UIBezierPath *) bezierPathByReversingPath;
三 构造路径
3.1将 UIBezierPath 对象的 currentPoint 移动到指定的点
/**
* 如果当前有正在绘制的子路径, 该方法则会隐式的结束当前路径,
* 并将 currentPoint 设置为指定点. 当上一条子路径被终止, 该方法
* 实际上并不会去闭合上一条子路径. 所以上一条自路径的起始点 和
* 结束点并没有被链接.
* 对于大多数构造路径相关的方法而言, 在你绘制直线或曲线之前, 需要先调用这个方法.
* @param point: 当前坐标系统中的某一点
*/
- (void)moveToPoint:(CGPoint)point;
3.2在当前子路径中追加一条直线
/**
* 该方法将会从 currentPoint 到 指定点 链接一条直线.
* Note: 在追加完这条直线后, 该方法将会更新 currentPoint 为 指定点
* 调用该方法之前, 你必须先设置 currentPoint. 如果当前绘制路径
* 为空, 并且未设置 currentPoint, 那么调用该方法将不会产生任何
* 效果.
* @param point: 绘制直线的终点坐标, 当前坐标系统中的某一点
*/
- (void)addLineToPoint:(CGPoint)point;
3.3 在当前子路径中追加一条圆弧
/**
* 该方法将会从 currentPoint 添加一条指定的圆弧.
* 该方法的介绍和构造方法中的一样. 请前往上文查看
* @param center: 圆心
* @param radius: 半径
* @param startAngle: 起始角度
* @param endAngle: 结束角度
* @param clockwise: 是否顺时针绘制
*/
- (void)addArcWithCenter:(CGPoint)center
radius:(CGFloat)radius
startAngle:(CGFloat)startAngle
endAngle:(CGFloat)endAngle
clockwise:(BOOL)clockwise NS_AVAILABLE_IOS(4_0);
3.4 在当前 子路经中追加一条 三次贝塞尔曲线
/**
* 该方法将会从 currentPoint 到 指定的 endPoint 追加一条三次贝塞尔曲线.
* 三次贝塞尔曲线的弯曲由两个控制点来控制. 如下图所示
* Note: 调用该方法前, 你必须先设置 currentPoint, 如果路径为空,
* 并且尚未设置 currentPoint, 调用该方法则不会产生任何效果.
* 当添加完贝塞尔曲线后, 该方法将会自动更新 currentPoint 为
* 指定的结束点
* @param endPoint: 终点
* @param controlPoint1: 控制点1
* @param controlPoint2: 控制点2
*/
- (void)addCurveToPoint:(CGPoint)endPoint
controlPoint1:(CGPoint)controlPoint1
controlPoint2:(CGPoint)controlPoint2;
3.5 当前 子路经中追加一条 二次贝塞尔曲线
/**
* 该方法将会从 currentPoint 到 指定的 endPoint 追加一条二次贝塞尔曲线.
* currentPoint、endPoint、controlPoint 三者的关系最终定义了二次贝塞尔曲线的形状.
* 二次贝塞尔曲线的弯曲由一个控制点来控制. 如下图所示
* Note: 调用该方法前, 你必须先设置 currentPoint, 如果路径为空,
* 并且尚未设置 currentPoint, 调用该方法则不会产生任何效果.
* 当添加完贝塞尔曲线后, 该方法将会自动更新 currentPoint 为
* 指定的结束点
* @param endPoint: 终点
* @param controlPoint: 控制点
*/
- (void)addQuadCurveToPoint:(CGPoint)endPoint
controlPoint:(CGPoint)controlPoint;
3.6 关闭当前子路经
/**
* 该方法将会从 currentPoint 到子路经的起点 绘制一条直线,
* 以此来关闭当前的自路径. 紧接着该方法将会更新 currentPoint
* 为 刚添加的这条直线的终点, 也就是当前子路经的起点.
*/
- (void)closePath;
3.7 删除 UIBezierPath 对象中的所有点, 效果也就等同于删除了所有子路经
- (void)removeAllPoints;
将指定 UIBezierPath 中的内容添加到当前 UIBezierPath 对象中
/**
* 该方法将会在当前 UIBezierPath 对象的路径中追加
* 指定的 UIBezierPath 对象中的内容.
*/
- (void)appendPath:(UIBezierPath *)bezierPath;
3.8 UIBezierPath 中的 CGPath 对象
/**
* 获取这个属性, 你将会获得一个不可变的 CGPathRef 对象,
* 他可以传入 CoreGraphics 提供的函数中
* 你可以是用 CoreGraphics 框架提供的方法创建一个路径,
* 并给这个属性赋值, 当时设置了一个新的路径后,
* 这个将会对你给出的路径对象进行 Copy 操作
*/
@property(nonatomic) CGPathRef CGPath;
3.9 绘图路径中的当前点
/**
* 该属性的值, 将会是下一条绘制的直线或曲线的起始点.
* 如果当前路径为空, 那么该属性的值将会是 CGPointZero
*/
@property(nonatomic, readonly) CGPoint currentPoint;
四 绘制路径
4.1 填充路径
/**
* 该方法当前的填充颜色 和 绘图属性对路径的封闭区域进行填充.
* 如果当前路径是一条开放路径, 该方法将会隐式的将路径进行关闭后进行填充
* 该方法在进行填充操作之前, 会自动保存当前绘图的状态, 所以我们不需要
* 自己手动的去保存绘图状态了.
*/
- (void)fill;
4.2 使用混合模式进行填充
/**
* 该方法当前的填充颜色 和 绘图属性 (外加指定的混合模式 和 透明度)
* 对路径的封闭区域进行填充. 如果当前路径是一条开放路径, 该方法将
* 会隐式的将路径进行关闭后进行填充
* 该方法在进行填充操作之前, 会自动保存当前绘图的状态, 所以我们不需要
* 自己手动的去保存绘图状态了.
*
* @param blendMode: 混合模式决定了如何和已经存在的被渲染过的内容进行合成
* @param alpha: 填充路径时的透明度
*/
- (void)fillWithBlendMode:(CGBlendMode)blendMode
alpha:(CGFloat)alpha;
4.3 绘制路径
- (void)stroke;
4.4 使用混合模式进行填充
/**
* @param blendMode: 混合模式决定了如何和已经存在的被渲染过的内容进行合成
* @param alpha: 填充路径时的透明度
*/
- (void)strokeWithBlendMode:(CGBlendMode)blendMode
alpha:(CGFloat)alpha;
4.5 剪切路径
/**
* 该方法将会修改当前绘图上下文的可视区域.
* 当调用这个方法之后, 会导致接下来所有的渲染
* 操作, 只会在剪切下来的区域内进行, 区域外的
* 内容将不会被渲染.
* 如果你希望执行接下来的绘图时, 删除剪切区域,
* 那么你必须在调用该方法前, 先使用 CGContextSaveGState 方法
* 保存当前的绘图状态, 当你不再需要这个剪切区域
* 的时候, 你只需要使用 CGContextRestoreGState 方法
* 来恢复之前保存的绘图状态就可以了.
* @param blendMode: 混合模式决定了如何和
* 已经存在的被渲染过的内容进行合成
* @param alpha: 填充路径时的透明度
*/
- (void)addClip;
五 Hit Detection
5.1 是否包含某个点
/**
* 该方法返回一个布尔值, 当曲线的覆盖区域包含
* 指定的点(内部点), 则返回 YES, 否则返回 NO.
* Note: 如果当前的路径是一个开放的路径, 那么
* 就算指定点在路径覆盖范围内, 该方法仍然会
* 返回 NO, 所以如果你想判断一个点是否在一个
* 开放路径的范围内时, 你需要先Copy一份路径,
* 并调用 -(void)closePath; 将路径封闭, 然后
* 再调用此方法来判断指定点是否是内部点.
* @param point: 指定点.
*/
- (BOOL) containsPoint:(CGPoint)point;
5.2 路径是否为空
/**
* 检测当前路径是否绘制过直线或曲线.
* Note: 记住, 就算你仅仅调用了 moveToPoint 方法
* 那么当前路径也被看做不为空.
*/
@property (readonly, getter=isEmpty) BOOL empty;
5.3 路径覆盖的矩形区域
/**
* 该属性描述的是一个能够完全包含路径中所有点
* 的一个最小的矩形区域. 该区域包含二次贝塞尔
* 曲线和三次贝塞尔曲线的控制点.
*/
@property (nonatomic, readonly) CGRect bounds;
5.4 Apply Transform
/**
* 该方法将会直接对路径中的所有点进行指定的放射
* 变换操作.
*/
- (void)applyTransform:(CGAffineTransform)transform;
示例Demo:
//
// BezierPathView.h
// ZLGodFather
//
// Created by 王泽龙 on 2020/11/3.
// Copyright © 2020 王泽龙. All rights reserved.
//
#import
NS_ASSUME_NONNULL_BEGIN
typedef NS_ENUM(NSUInteger, BezierPathType) {
kDefaultPath = 1, // 三角形
kRectPath = 2, // 矩形
kCirclePath = 3,//圆
kOvalPath = 4, // 椭圆
kRoundedRectPath = 5, // 带圆角的矩形
kArcPath = 6, // 弧
kSecondBezierPath = 7, // 二次贝塞尔曲线
kThirdBezierPath = 8 // 三次贝塞尔曲线
};
@interface BezierPathView : UIView
@property (nonatomic, assign) BezierPathType type;
@end
NS_ASSUME_NONNULL_END
//
// BezierPathView.m
// ZLGodFather
//
// Created by 王泽龙 on 2020/11/3.
// Copyright © 2020 王泽龙. All rights reserved.
//
#import "BezierPathView.h"
#define kDegreesToRadians(degrees) ((pi * degrees)/ 180)
@implementation BezierPathView
- (void)drawRect:(CGRect)rect {
switch (self.type) {
case kDefaultPath: {
[self drawTrianglePath];
break;
}
case kRectPath: {
[self drawRectPath];
break;
}
case kCirclePath: {
[self drawCiclePath];
break;
}
case kOvalPath: {
[self drawOvalPath];
break;
}
case kRoundedRectPath: {
[self drawRoundedRectPath];
break;
}
case kArcPath: {
[self drawARCPath];
break;
}
case kSecondBezierPath: {
[self drawSecondBezierPath];
break;
}
case kThirdBezierPath: {
[self drawThirdBezierPath];
break;
}
default: {
break;
}
}
}
// 画三角形
- (void)drawTrianglePath {
UIBezierPath *path = [UIBezierPath bezierPath];
[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)];
[path closePath];
// 设置线宽
path.lineWidth = 3;
// 设置填充颜色
UIColor *fillColor = [UIColor greenColor];
[fillColor set];
[path fill];
// 设置画笔颜色
UIColor *strokeColor = [UIColor blueColor];
[strokeColor set];
// 根据我们设置的各个点连线
[path stroke];
}
// 画矩形
- (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 = [UIColor greenColor];
[fillColor set];
[path fill];
// 设置画笔颜色
UIColor *strokeColor = [UIColor blueColor];
[strokeColor set];
// 根据我们设置的各个点连线
[path stroke];
}
// 画圆
- (void)drawCiclePath {
// 传的是正方形,因此就可以绘制出圆了
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(20, 20, self.frame.size.width - 40, self.frame.size.width - 40)];
// 设置填充颜色
UIColor *fillColor = [UIColor greenColor];
[fillColor set];
[path fill];
// 设置画笔颜色
UIColor *strokeColor = [UIColor blueColor];
[strokeColor set];
// 根据我们设置的各个点连线
[path stroke];
}
// 画椭圆
- (void)drawOvalPath {
// 传的是不是正方形,因此就可以绘制出椭圆圆了
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(20, 20, self.frame.size.width - 80, self.frame.size.height - 40)];
// 设置填充颜色
UIColor *fillColor = [UIColor greenColor];
[fillColor set];
[path fill];
// 设置画笔颜色
UIColor *strokeColor = [UIColor blueColor];
[strokeColor set];
// 根据我们设置的各个点连线
[path stroke];
}
- (void)drawRoundedRectPath {
// UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 20, self.frame.size.width - 40, self.frame.size.height - 40) cornerRadius:10];
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 20, self.frame.size.width - 40, self.frame.size.height - 40) byRoundingCorners:UIRectCornerTopRight cornerRadii:CGSizeMake(20, 20)];
// 设置填充颜色
UIColor *fillColor = [UIColor greenColor];
[fillColor set];
[path fill];
// 设置画笔颜色
UIColor *strokeColor = [UIColor blueColor];
[strokeColor set];
// 根据我们设置的各个点连线
[path stroke];
}
- (void)drawARCPath {
const CGFloat pi = 3.14159265359;
CGPoint center = 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 = [UIColor blueColor];
[strokeColor set];
[path stroke];
}
- (void)drawSecondBezierPath {
UIBezierPath *path = [UIBezierPath bezierPath];
// 首先设置一个起始点
[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 = [UIColor blueColor];
[strokeColor set];
[path stroke];
}
- (void)drawThirdBezierPath {
UIBezierPath *path = [UIBezierPath bezierPath];
// 设置起始端点
[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 = [UIColor blueColor];
[strokeColor set];
[path stroke];
}
@end
参考文章:
iOS开发 UIBezierPath学习
UIBezierPath-demo