CAShapeLayer

学习CAShapeLayer

 1、CAShapeLayer 继承自 CALayer,可以使用 CALayer 的所有属性值；
 2、CAShapeLayer 绘制需要与贝塞尔曲线配合才能实现；
 4、CAShapeLayer 属于 CoreAnimation 框架,其动画渲染直接提交到手机的 GPU 当中(不消耗内存),相较于 view 的 drawRect 方法(属于CoreGraphics 框架,使用CPU渲染，消耗的性能极大)而言,其效率极高,能大大优化内存使用情况；
 5、贝塞尔曲线可以创建基于矢量的路径；
 6、贝塞尔曲线给CAShapeLayer提供路径,CAShapeLayer在提供的路径中进行渲染,路径会闭环,所以路径绘制出了Shape；
 7、用于CAShapeLayer的贝塞尔曲线作为path,其path是一个首尾相接的闭环的曲线,即使该贝塞尔曲线不是一个闭环的曲线。

 

一、绘制简单的图形

// 绘制简单的图形
- (void)easyShape {
    // 创建圆形贝塞尔曲线
    UIBezierPath *circle = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 100, 100)];
    // 创建椭圆形贝塞尔曲线
    UIBezierPath *oval = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 100)];
    // 创建矩形贝塞尔曲线
    UIBezierPath *rect = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 100, 100)];
    [self strokeWithPath:oval];
    [self strokeWithPath:rect];
    [self strokeWithPath:circle];
}

/**
 *  @brief 绘制图形
 *
 *  @param path 路径
 */
- (void)strokeWithPath:(UIBezierPath *)path {
    // 创建CAShapeLayer
    CAShapeLayer *shape = [CAShapeLayer layer];
    // frame的大小不能小于贝塞尔取现的frame，否则会出现问题
    shape.frame = CGRectMake(0, 0, 200, 100);
    shape.position = self.view.center;
    
    // 设置填充颜色
    shape.fillColor = [UIColor cyanColor].CGColor;
    
    // 设置路径颜色
    shape.strokeColor = [UIColor redColor].CGColor;
    
    // 设置路径宽度
    shape.lineWidth = 2.f;
    
    // 设置CAShapeLayer的边界
    shape.borderWidth = 2.f;
    
    // 剪切掉超出父视图的部分
    shape.masksToBounds = YES;
    
    // 建设贝塞尔取现和CAShapeLayer之间的关系
    shape.path = path.CGPath;
    
    // 添加并显示
    [self.view.layer addSublayer:shape];
}

 

二、使用 strokeStart 与 strokeEnd 动画 (strokeStart 的值必须大于 strokeEnd)

1、将 shapeLayer 的 fillColor 设置成透明背景
2、设置线条的宽度(lineWidth)的值
3、设置线条的颜色
4、将 strokeStart值设定为0，然后让strokeEnd的值变化触发隐式动画

- (void)implementProcess {
    /**
     1、将 shapeLayer 的 fillColor 设置成透明背景
     2、设置线条的宽度(lineWidth)的值
     3、设置线条的颜色
     4、将 strokeStart值设定为0，然后让strokeEnd的值变化触发隐式动画
     */
    
    // 创建CAShapeLayer
    self.shapeLayer             = [CAShapeLayer layer];
    self.shapeLayer.frame       = CGRectMake(0, 0, 200, 200);
    self.shapeLayer.position    = self.view.center;
    self.shapeLayer.fillColor   = [UIColor clearColor].CGColor;
    self.shapeLayer.lineWidth   = 1.f;
    self.shapeLayer.strokeColor = [UIColor redColor].CGColor;
    
    // 设置strokeStart和strokeEnd的值
    self.shapeLayer.strokeStart = 0; // 默认为0，全部绘制(逆时针推算)
    self.shapeLayer.strokeEnd   = 0;
    
    // 创建圆形贝塞尔曲线
    UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 200)];
    
    // 关联CAShapeLayer与贝塞尔曲线
    self.shapeLayer.path = circlePath.CGPath;
    
    
    // 添加并显示
    [self.view.layer addSublayer:self.shapeLayer];
    
    // 使用定时器模拟
    _timer = [NSTimer scheduledTimerWithTimeInterval:1.f
                                              target:self
                                            selector:@selector(circleAnimationTypeOne)
                                            userInfo:nil
                                             repeats:YES];
}

- (void)circleAnimationTypeOne {
    self.shapeLayer.strokeEnd = arc4random() % 100 / 100.f;
}

- (void)circleAnimationTypeTwo {
    CGFloat valueOne = arc4random() % 100 / 100.f;
    CGFloat valueTwo = arc4random() % 100 / 100.f;
    self.shapeLayer.strokeEnd = MAX(valueOne, valueTwo);
    self.shapeLayer.strokeStart = MIN(valueOne, valueTwo);
}

我们可以看一下，CAShapeLayer 绘制的起始点以及绘制的方法，效果如下：

 

学习CAShapeLayer，主要看中的是它的性能比drawRect高出很多，实现进度条等，完全可以实现！

尊重作者劳动成果，转载请注明： 【kingdev】