UIBezierPath

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];
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章