iOS-UIBezierPath和各种layer把我玩坏了

关于UIBezierPath基础

UIBezierPath对象是CGPathRef数据类型的封装。path如果是基于矢量形状的，都用直线和曲线段去创建。我们使用直线段去创建矩形和多边形，使用曲线段去创建弧（arc），圆或者其他复杂的曲线形状。每一段都包括一个或者多个点，绘图命令定义如何去诠释这些点。每一个直线段或者曲线段的结束的地方是下一个的开始的地方。每一个连接的直线或者曲线段的集合成为subpath。一个UIBezierPath对象定义一个完整的路径包括一个或者多个subpaths。

*** 首先我们需要自定义一个View继承UIView,用来绘制曲线 ***
1.创建一个三角形

- (void)drawRect:(CGRect)rect {
    
    // 1. 创建UIBezierPath对象
    UIBezierPath *path = [UIBezierPath bezierPath];
    // 2. 设置相关属性
    path.lineWidth = 3.0f;               // 线条宽度
    [[UIColor redColor] set];            // 线条颜色
    path.lineCapStyle = kCGLineCapRound; // 线条拐角
    path.lineJoinStyle = kCGLineCapRound;// 终点处理
    // 3.通过moveToPoint:设置起点
    [path moveToPoint:CGPointMake(200, 200)];
    // 添加line为subPaths
    [path addLineToPoint:(CGPointMake(100, 400))];
    [path addLineToPoint:(CGPointMake(300, 400))];
    [path closePath];
    // 开始绘画
    [path stroke];
    // 开始绘画并填充
   //[path fill];

}

关于stroke和fill的效果图如下

stroke效果

fill效果.png

2.创建矩形,圆形,和一段弧线

- (void)drawRect:(CGRect)rect {
    
    // 创建矩形
    UIBezierPath *rectPath = [UIBezierPath bezierPathWithRect:(CGRectMake(50, 100, 100, 100))];
    rectPath.lineWidth = 3.0f;
    [[UIColor redColor] set];
    rectPath.lineCapStyle = kCGLineCapRound;
    rectPath.lineJoinStyle = kCGLineCapRound;
    [rectPath stroke];
    
    // 创建内切圆
    UIBezierPath *oval = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 300, 300, 300)];
    oval.lineWidth = 3.0f;
    [[UIColor greenColor] set];
    oval.lineCapStyle = kCGLineCapRound;
    oval.lineJoinStyle = kCGLineCapRound;
    [oval stroke];
    
    // 弧线
    CGFloat endAngle = 120 *sinf(M_PI / 180);
    UIBezierPath *arcPath = [UIBezierPath bezierPathWithArcCenter:(CGPointMake(300, 100)) radius:100 startAngle:0.0 endAngle:endAngle clockwise:YES];
    arcPath.lineWidth = 5.0f;
    [[UIColor purpleColor] set];
    arcPath.lineCapStyle = kCGLineCapRound;
    arcPath.lineJoinStyle = kCGLineCapRound;
    [arcPath stroke];
}

附上效果图:

CAShapeLayer和CAGradientLayer

• CAShapeLayer是一个通过矢量图形而不是bitmap来绘制的图层子类。可以指定颜色和线宽等属性，用CGPath来描述绘制的图形.

• CAGradientLayer,苹果给出的官方描述是:一个可以用来进行绘制##渐变背景色的layer

实战一:写一个环形的进度条

1.先通过CAShapeLayer和BezierPath创建一个圆形的进度条出来

- (void)viewDidLoad {
    [super viewDidLoad];

 // 创建曲线,绘制圆形path
    UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.view.center.x, self.view.center.y) radius:100 startAngle:M_PI endAngle:-M_PI clockwise:NO];
    // 创建shapeLayer
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.frame = self.view.bounds;// 设置图层大小
    shapeLayer.path = circlePath.CGPath;// 设置shapeLayer的cgPath
    shapeLayer.opacity = 1.0f;  //设置透明度0~1之间
    shapeLayer.lineCap = kCALineCapRound;//制定线的边缘是圆形
    shapeLayer.lineWidth = 5.0f; // 设置线宽
    shapeLayer.strokeColor = [UIColor lightGrayColor].CGColor;// 设置线条颜色
    [shapeLayer setFillColor:[UIColor clearColor].CGColor]; // 清楚填充颜色
    [self.view.layer addSublayer:shapeLayer];}
效果图⬇️

2.创建CAGradientLayer设置渐变颜色

    // 创建颜色数组
    NSMutableArray *colors = [NSMutableArray array];
    for (NSInteger hue = 0; hue <= 360; hue += 5)
    {
        UIColor * color = [UIColor colorWithHue:1.0 * hue / 360
                                     saturation:1.0
                                     brightness:1.0
                                          alpha:1.0];
        [colors addObject:(id)[color CGColor]];
    }

    
    CAGradientLayer *grandient = [CAGradientLayer layer];
    grandient.frame = self.view.bounds;//设置颜色渐变的layer的frame
    grandient.colors = colors;//颜色数组
    grandient.mask = shapeLayer;//设置mask图层
    //开始和结束点可以用来做隐式动画
    grandient.startPoint = CGPointMake(0, 0);//开始点
    grandient.endPoint = CGPointMake(1, 0);//结束点
    [self.view.layer addSublayer:grandient];
    效果图⬇️

关于隐式动画
shapeLayer.strokeStart =0.f;
shapeLayer.strokeEnd = 0.f;
__block CGFloat end = 0.0f;
 [NSTimer scheduledTimerWithTimeInterval:0.2 repeats:YES block:^(NSTimer * _Nonnull timer) {
        end += 0.1f;
        if (end >= 1) {
            [timer invalidate];
        }
        shapeLayer.strokeEnd = end;
    }];

Tips:我自己写了一个图表的Demo,大神们不要嫌弃~先上个效果图

ab.gif

GIT地址:https://github.com/candy7/Graphs

~~~ 给个❤喜欢❤吧,谢谢各位看官了.=￣ω￣=~~