CAShapeLayer

￡神魔★判官ぃ 2023-03-13 02:28 2阅读 0赞

**学习CAShapeLayer**

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

一、绘制简单的图形

1 // 绘制简单的图形
     2 - (void)easyShape {
     3     // 创建圆形贝塞尔曲线
     4     UIBezierPath *circle = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 100, 100)];
     5     // 创建椭圆形贝塞尔曲线
     6     UIBezierPath *oval = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 100)];
     7     // 创建矩形贝塞尔曲线
     8     UIBezierPath *rect = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 100, 100)];
     9     [self strokeWithPath:oval];
    10     [self strokeWithPath:rect];
    11     [self strokeWithPath:circle];
    12 }
    13 
    14 /**
    15  *  @brief 绘制图形
    16  *
    17  *  @param path 路径
    18  */
    19 - (void)strokeWithPath:(UIBezierPath *)path {
    20     // 创建CAShapeLayer
    21     CAShapeLayer *shape = [CAShapeLayer layer];
    22     // frame的大小不能小于贝塞尔取现的frame，否则会出现问题
    23     shape.frame = CGRectMake(0, 0, 200, 100);
    24     shape.position = self.view.center;
    25     
    26     // 设置填充颜色
    27     shape.fillColor = [UIColor cyanColor].CGColor;
    28     
    29     // 设置路径颜色
    30     shape.strokeColor = [UIColor redColor].CGColor;
    31     
    32     // 设置路径宽度
    33     shape.lineWidth = 2.f;
    34     
    35     // 设置CAShapeLayer的边界
    36     shape.borderWidth = 2.f;
    37     
    38     // 剪切掉超出父视图的部分
    39     shape.masksToBounds = YES;
    40     
    41     // 建设贝塞尔取现和CAShapeLayer之间的关系
    42     shape.path = path.CGPath;
    43     
    44     // 添加并显示
    45     [self.view.layer addSublayer:shape];
    46 }

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

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

1 - (void)implementProcess {
     2     /**
     3      1、将 shapeLayer 的 fillColor 设置成透明背景
     4      2、设置线条的宽度(lineWidth)的值
     5      3、设置线条的颜色
     6      4、将 strokeStart值设定为0，然后让strokeEnd的值变化触发隐式动画
     7      */
     8     
     9     // 创建CAShapeLayer
    10     self.shapeLayer             = [CAShapeLayer layer];
    11     self.shapeLayer.frame       = CGRectMake(0, 0, 200, 200);
    12     self.shapeLayer.position    = self.view.center;
    13     self.shapeLayer.fillColor   = [UIColor clearColor].CGColor;
    14     self.shapeLayer.lineWidth   = 1.f;
    15     self.shapeLayer.strokeColor = [UIColor redColor].CGColor;
    16     
    17     // 设置strokeStart和strokeEnd的值
    18     self.shapeLayer.strokeStart = 0; // 默认为0，全部绘制(逆时针推算)
    19     self.shapeLayer.strokeEnd   = 0;
    20     
    21     // 创建圆形贝塞尔曲线
    22     UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 200)];
    23     
    24     // 关联CAShapeLayer与贝塞尔曲线
    25     self.shapeLayer.path = circlePath.CGPath;
    26     
    27     
    28     // 添加并显示
    29     [self.view.layer addSublayer:self.shapeLayer];
    30     
    31     // 使用定时器模拟
    32     _timer = [NSTimer scheduledTimerWithTimeInterval:1.f
    33                                               target:self
    34                                             selector:@selector(circleAnimationTypeOne)
    35                                             userInfo:nil
    36                                              repeats:YES];
    37 }
    38 
    39 - (void)circleAnimationTypeOne {
    40     self.shapeLayer.strokeEnd = arc4random() % 100 / 100.f;
    41 }
    42 
    43 - (void)circleAnimationTypeTwo {
    44     CGFloat valueOne = arc4random() % 100 / 100.f;
    45     CGFloat valueTwo = arc4random() % 100 / 100.f;
    46     self.shapeLayer.strokeEnd = MAX(valueOne, valueTwo);
    47     self.shapeLayer.strokeStart = MIN(valueOne, valueTwo);
    48 }

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

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

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

[kingdev]: http://www.cnblogs.com/xiu619544553/