UIBezierPath贝塞尔路径
1.BezierPath可以根据路径在视图中进行渲染,经常用来进行曲线绘制,所以又称贝塞尔曲线。BezierPath和CAShapeLayer组合使用可以做一些比较炫酷的动画效果。
2.相关API
1).常用方法
+(instancetype)bezierPath;
+(instancetype)bezierPathWithRect:(CGRect)rect; //矩形
+(instancetype)bezierPathWithOvallnRect:(CGRect)rect //椭圆或内切圆
+(instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corner cornerRadii:(CGSize)cornerRadii
;绘制一个圆角矩形,通过UIRectCorner选择圆弧的位置,cornerRadii为圆弧的大小
(UIRectCorner)corner枚举 值
/ UIRectCornerTopLeft =1<<0, //矩形左上角
UIRectCornerTopRight =1<<1, //矩形右上角
UIRectCornerBottomLeft =1<<2, //矩形左下角
UIRectCornerBottomRight =1<<3, //矩形右下角
UIRectCornerAllCorners = ~0UL //矩形四个角都包括/
+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;
绘制一个圆弧路径。ArcCenter:圆弧圆心位置;radius:圆弧半径;startAngle:开始的弧度(角度);endAngle:结束的弧度(角度);clockwise:是否为顺时针。
路径函数
-(void)moveToPoint:(CGPoint)point; 设置初始点
-(void)addLineToPoint:(CGPoint)point; 增加直线
//添加圆弧
- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise
二阶塞贝尓曲线 以endPoint为终点,以controlPoint为控制点,绘制二阶贝塞尔曲线。
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;
三阶塞贝尓曲线 以endPoint为终点,以controlPoint1、controlPoint2两个点为控制点,绘制贝塞尔曲线。
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;
闭合起点和终点 在起点和终点添加一条直线。
-(void)closePath;
//移除路径中所有的点
- (void)removeAllPoints;
//路径拼接
- (void)appendPath:(UIBezierPath *)bezierPath;
//添加虚线
- (void)setLineDash:(nullableconstCGFloat *)pattern count:(NSInteger)count phase:(CGFloat)phase; 设置线型 可设置成虚线
注:pattern 线段数组 如:CGFloat dash[] = {1,1}; 代表实线和空白交替的长度 及先绘制1个长度再空1个,再绘制一个.....;
//检索线型
- (void)getLineDash:(nullableCGFloat *)pattern count:(nullableNSInteger *)count phase:(nullableCGFloat *)phase;检索线型。
//去绘制路径
-(void)stroke 利用当前绘画属性沿着路径画线
路径的画线颜色。
[[UIColor orangeColor] setStroke];
填充绘制区域的颜色
-(void)setFill
[uicolor orangeColor] setFill];
- (void)fillWithBlendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha;
利用指定模式填充路径封闭范围, 该方法在绘画之前会自动将开放子路径封闭, 填充部分不包含路径本身, 所以对于线宽较大的路径, 填充部分会跟部分路径重合。
- (void)strokeWithBlendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha;利用指定模式沿着路径画线。
2).常用属性
CGPathRef CGPath 路径
BOOL empty 路径信息是否为空,
CGRect bounds 可以封闭所有路径点的最小矩形范围, 包括多次贝塞尔曲线的控制点在内。
CGPoint currentPoint; 画笔当前的位置
-(BOOL)containsPoint:(CGPoint)point 是否包含指定点
CGFloat lineWidth 线宽
CGFloat miterLimit 最大斜长度,只有lineJoin属性为kCGLineJoinMiter有效 最大斜长度,就是上图中拐角处外面尖角和内部尖角的距离
BOOL usesEvenOddFillRule; YES交互处不绘制,NO绘制默认
CGLineCap lineCapStyle 路径的终点形状,该属性适用于起点和终点
/lineCapStyle值
kCGLineCapButt, //方形结束, 结束位置正好为精确位置。——默认值
kCGLineCapRound, //圆形结束, 结束位置超过精确位置半个线宽。
kCGLineCapSquare //方形结束, 结束位置超过精确位置半个线宽。
/
CGLineJoin lineJoinStyle 路径的交叉点(拐角)的形状
/lineJoinStyle值
kCGLineJoinMiter, //全部连接(尖角)。——默认值
kCGLineJoinRound, //圆形连接。(圆角)
kCGLineJoinBevel //斜角连接。(切角)
/
CGFloat flatness 确定弯曲路径短的绘制精度的因素
count数组长度 count值小于数组实际长度时,方法就会对相应长度的数组元素进行循环,而大于的时候 会有警告,没有效果;
phase 循环数组时跳过的长度,如pattern为{2,6},phase为1,则第一个元素画1的时候就跳过直接画6
demo
1.矩形
[[UIColor redColor] setFill]; //填充绘制区域颜色
[[UIColor greenColor] setStroke]; //路径颜色
//矩形
UIBezierPath *RectPath = [UIBezierPath bezierPathWithRect:CGRectMake(120,0, 100, 60)];
//线宽
RectPath.lineWidth = 2;
//进行绘制
[RectPath stroke];
//进行填充
[RectPath fill];
2.椭圆
[[UIColor redColor] setFill]; //填充绘制区域颜色
[[UIColor greenColor] setStroke]; //路径颜色
//椭圆 矩形+圆角25是圆的角度
UIBezierPath *roundedPath =[UIBezierPath bezierPathWithRoundedRect:CGRectMake(0,0,100,60) cornerRadius:25];
roundedPath.lineWidth = 4;
[roundedPath stroke];
[roundedPath fill];
3.正方形
[[UIColor redColor] setFill]; //填充绘制区域颜色
[[UIColor greenColor] setStroke]; //路径颜色
//正方形
UIBezierPath *squarePath = [UIBezierPath bezierPathWithRect:CGRectMake(230,0, 60, 60)];
squarePath.lineWidth = 2;
[squarePath stroke];
[squarePath fill];
4.圆
//圆
[[UIColor redColor] setFill]; //填充绘制区域颜色
[[UIColor greenColor] setStroke]; //路径颜色
UIBezierPath *ovalinPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(300, 0,90, 60)];
ovalinPath.lineWidth = 2;
[ovalinPath stroke];
[ovalinPath fill];
5.左上右下圆角
[[UIColor redColor] setFill]; //填充绘制区域颜色
[[UIColor greenColor] setStroke]; //路径颜色
//左上右下圆角
UIBezierPath *bezierPath2 = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(80, 80, 100, 100) byRoundingCorners:UIRectCornerTopLeft|UIRectCornerBottomRight cornerRadii:CGSizeMake(40, 0)];
bezierPath2.lineWidth = 4;
[bezierPath2 stroke];
[bezierPath2 fill];
5.右上左下圆角
//右上左下圆角
UIBezierPath *bezierPath3 = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(200, 80, 100, 100) byRoundingCorners:UIRectCornerTopRight|UIRectCornerBottomLeft cornerRadii:CGSizeMake(40, 0)];
bezierPath3.lineWidth = 4;
[bezierPath3 stroke];
[bezierPath3 fill];
6.圆弧
[[UIColor redColor] setFill]; //填充绘制区域颜色
[[UIColor greenColor] setStroke]; //路径颜色
参数1:圆弧中心点(x,y),参数2:圆弧半径(控制圆弧大小),参数3:开始的弧度 12点钟方向3pi/2,3点钟方向0.2pi/2 6点钟方向pi/2 9点钟方向 pi . 参数4:结束的弧度 参数5:YES顺时针/NO逆时针
UIBezierPath *bezierPaht4 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(360, 150) radius:40 startAngle:M_PI endAngle:M_PI_4 clockwise:YES];
bezierPaht4.lineWidth = 4;
[bezierPaht4 stroke];
7扇形
//扇形
[[UIColor purpleColor] setStroke];
[[UIColor orangeColor] setFill];
UIBezierPath *bezierPath5 = [UIBezierPath bezierPath];
[bezierPath5 moveToPoint:CGPointMake(30,250)];
[bezierPath5 addArcWithCenter:CGPointMake(30, 250) radius:50 startAngle:-M_PI*2/3.f endAngle:-M_PI_4 clockwise:YES];
bezierPath5.lineWidth = 4;
[bezierPath5 stroke];
[bezierPath5 fill];
[bezierPath5 closePath];
8.二阶贝塞尔曲线
[[UIColor whiteColor] setStroke];
UIBezierPath *twoPath = [UIBezierPath bezierPath];
//起点
[twoPath moveToPoint:CGPointMake(200,160)];
//CurveToPoint:终点 , controlpoint:控制点
[twoPath addQuadCurveToPoint:CGPointMake(100, 250) controlPoint:CGPointMake(250, 300)];
twoPath.lineWidth = 4;
[twoPath stroke];
9.三阶贝塞尔曲线
//三阶曲线
UIBezierPath *trePath = [UIBezierPath bezierPath];
//起点
[trePath moveToPoint:CGPointMake(260, 260)];
//终点 controlPoint1。2两个控制点
[trePath addCurveToPoint:CGPointMake(360, 260) controlPoint1:CGPointMake(285, 150) controlPoint2:CGPointMake(335, 310)];
10.交汇点是否绘制
//交汇圆
UIBezierPath *yPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(20, 330, 80, 80)];
[yPath appendPath:[UIBezierPath bezierPathWithOvalInRect:CGRectMake(90, 330, 50, 50)]];
//交汇处不绘制
yPath.usesEvenOddFillRule = YES;
yPath.lineWidth = 5;
[yPath stroke];
[yPath fill];