iOS CAShapeLayer 使用

作者: 怪小喵 | 来源:发表于2016-07-28 14:28 被阅读2562次

CAShapeLayer介绍

CAShapeLayer继承自CALayer，可使用CALayer的所有属性
CAShapeLayer需要和贝塞尔曲线配合使用才有意义。贝塞尔曲线可以为其提供形状，而单独使用CAShapeLayer是没有任何意义的。
使用CAShapeLayer与贝塞尔曲线可以实现不在view的DrawRect方法中画出一些想要的图形

关于CAShapeLayer和DrawRect的比较

DrawRect：DrawRect属于CoreGraphic框架，占用CPU，消耗性能大
CAShapeLayer：CAShapeLayer属于CoreAnimation框架，通过GPU来渲染图形，节省性能。动画渲染直接提交给手机GPU，不消耗内存

CAShapeLayer使用

请下载Demo 运行CAShapeLayerDemo 工程

绘制特别的形状

CAShapeLayer 有一个神奇的属性 path 用这个属性配合上 UIBezierPath 这个类就可以达到超神的效果。

图1.1

实现如图1.1效果，需要创建一个UIBezierPath曲线，赋值给 CAShapeLayer 的path属性。
实现代码如下，图中红点表示 startPoint，endPoint，controlPoint1，controlPoint2，

    // 创建 path
    UIBezierPath *path = [[UIBezierPath alloc]init];
    [path moveToPoint:startPoint];
    [path addCurveToPoint:endPoint controlPoint1:controlPoint1 controlPoint2:controlPoint2];
    // 创建 shapeLayer
    CAShapeLayer *shapeLayer = [[CAShapeLayer alloc]init];
    [self.view.layer addSublayer:shapeLayer];
    shapeLayer.path = path.CGPath;
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    shapeLayer.strokeColor = [UIColor blackColor].CGColor;
    shapeLayer.lineWidth = 5;

一些特殊的界面效果，也可以通过CAShapeLayer 绘制出来如图1.2

图1.2

    CGSize finalSize = CGSizeMake(CGRectGetWidth(self.view.frame), 600);
    CGFloat layerHeight = finalSize.height * 0.2;
    CAShapeLayer *bottomCurveLayer = [[CAShapeLayer alloc]init];
    
    UIBezierPath *path = [[UIBezierPath alloc]init];
    [path moveToPoint:CGPointMake(0, finalSize.height - layerHeight)];
    [path addLineToPoint:CGPointMake(0, finalSize.height - 1)];
    [path addLineToPoint:CGPointMake(finalSize.width, finalSize.height - 1)];
    [path addLineToPoint:CGPointMake(finalSize.width, finalSize.height - layerHeight)];
    [path addQuadCurveToPoint:CGPointMake(0, finalSize.height - layerHeight) controlPoint:CGPointMake(finalSize.width / 2, (finalSize.height - layerHeight) - 40)];

    
    bottomCurveLayer.path = path.CGPath;
    bottomCurveLayer.fillColor = [UIColor orangeColor].CGColor;
    [self.view.layer addSublayer:bottomCurveLayer];

绘制进度条
屏幕快照 2016-07-28 下午1.12.22.png

创建要展示的四个图层

// 灰色虚线
@property (nonatomic, strong)CAShapeLayer *baseLayer;
// 彩色虚线
@property (nonatomic, strong)CAShapeLayer *shapeLayer;
// 外圈灰色大圆
@property (nonatomic, strong)CAShapeLayer *bigBaseLayer;
// 带颜色的大圆
@property (nonatomic, strong)CAShapeLayer *bigShapeLayer;

设置path 给图层，

- (void)layoutSubviews {
    CGPoint center = CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2);
    CGFloat radius = MIN(self.bounds.size.width, self.bounds.size.height)/2 - dashLayerMargin;
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:- M_PI_2 endAngle: (M_PI * 2)- M_PI_2 clockwise:YES];
    
    CGFloat bigRadius = radius + 8;
    UIBezierPath *bigPath = [UIBezierPath bezierPathWithArcCenter:center radius:bigRadius startAngle:- M_PI_2 endAngle: (M_PI * 2)- M_PI_2 clockwise:YES];
    
    self.shapeLayer.path = path.CGPath;
    self.baseLayer.path = path.CGPath;
    
    self.bigBaseLayer.path = bigPath.CGPath;
    self.bigShapeLayer.path = bigPath.CGPath;
    
    [self createGradientLayer];

}

控制进度使用 layer的strokeEnd 属性


- (void)setProgress:(CGFloat)progress {
    _progress = progress;

    self.shapeLayer.strokeEnd = progress;
    self.bigShapeLayer.strokeEnd = progress;

}