前言

CAShapeLayer继承自CALayer，因此，可使用CALayer的所有属性。但是，CAShapeLayer需要和贝塞尔曲线配合使用才有意义。

关于UIBezierPath，请阅读文章：iOS UIBezierPth精讲

基本知识

看看官方说明：

 
1
2
3
4
5
6
7
8
9
 
/* The shape layer draws a cubic Bezier spline in its coordinate space.
*
* The spline is described using a CGPath object and may have both fill
* and stroke components (in which case the stroke is composited over
* the fill). The shape as a whole is composited between the layer's
* contents and its first sublayer.
*/
 

上面只是部分说明内容，由于较长，只放一部分出来。这里是说CAShapeLayer是在其坐标系统内绘制贝塞尔曲线的。因此，使用CAShapeLayer需要与UIBezierPath一起使用。

它有一个path属性，而UIBezierPath就是对CGPathRef类型的封装，因此这两者配合起来使用才可以的哦！

 
1
2
3
 
@property(nullable) CGPathRef path;
 

CAShapeLayer和drawRect的比较

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

这两者各有各的用途，而不是说有了CAShapeLayer就不需要drawRect。

温馨提示：drawRect只是一个方法而已，是UIView的方法，重写此方法可以完成我们的绘制图形功能。

CAShapeLayer与UIBezierPath的关系

CAShapeLayer与UIBezierPath的关系：

  1. CAShapeLayer中shape代表形状的意思，所以需要形状才能生效
  2. 贝塞尔曲线可以创建基于矢量的路径，而UIBezierPath类是对CGPathRef的封装
  3. 贝塞尔曲线给CAShapeLayer提供路径，CAShapeLayer在提供的路径中进行渲染。路径会闭环，所以绘制出了Shape
  4. 用于CAShapeLayer的贝塞尔曲线作为path，其path是一个首尾相接的闭环的曲线，即使该贝塞尔曲线不是一个闭环的曲线

CAShapeLayer与UIBezierPath画圆

效果图如下：

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
- (CAShapeLayer *)drawCircle {
  CAShapeLayer *circleLayer = [CAShapeLayer layer];
  // 指定frame，只是为了设置宽度和高度
  circleLayer.frame = CGRectMake(0, 0, 200, 200);
  // 设置居中显示
  circleLayer.position = self.view.center;
  // 设置填充颜色
  circleLayer.fillColor = [UIColor clearColor].CGColor;
  // 设置线宽
  circleLayer.lineWidth = 2.0;
  // 设置线的颜色
  circleLayer.strokeColor = [UIColor redColor].CGColor;
  
  // 使用UIBezierPath创建路径
  CGRect frame = CGRectMake(0, 0, 200, 200);
  UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:frame];
  
  // 设置CAShapeLayer与UIBezierPath关联
  circleLayer.path = circlePath.CGPath;
  
  // 将CAShaperLayer放到某个层上显示
  [self.view.layer addSublayer:circleLayer];
  
  return circleLayer;
}
 

注意，我们这里不是放在-drawRect:方法中调用的。我们直接将这个CAShaperLayer放到了self.view.layer上，直接呈现出来。

我们创建一个CAShapeLayer，然后配置相关属性，然后再通过UIBezierPath的类方法创建一个内切圆路径，然后将路径指定给CAShapeLayer.path，这就将两者关联起来了。最后，将这个层放到了self.view.layer上呈现出来。

CAShapeLayer与UIBezierPath的简单Loading效果

效果图类似这样（懒自己做图，就百度了一个）：

我们调用了上面这个画圆效果的代码：

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
- (void)drawHalfCircle {
  self.loadingLayer = [self drawCircle];
  
  // 这个是用于指定画笔的开始与结束点
  self.loadingLayer.strokeStart = 0.0;
  self.loadingLayer.strokeEnd = 0.75;
  
  self.timer = [NSTimer scheduledTimerWithTimeInterval:0.1
                                                target:self
                                              selector:@selector(updateCircle)
                                              userInfo:nil
                                               repeats:YES];
}
 
- (void)updateCircle {
  if (self.loadingLayer.strokeEnd > 1 && self.loadingLayer.strokeStart < 1) {
    self.loadingLayer.strokeStart += 0.1;
  } else if (self.loadingLayer.strokeStart == 0) {
    self.loadingLayer.strokeEnd += 0.1;
  }
  
  if (self.loadingLayer.strokeEnd == 0) {
    self.loadingLayer.strokeStart = 0;
  }
  
  if (self.loadingLayer.strokeStart >= 1 && self.loadingLayer.strokeEnd >= 1) {
    self.loadingLayer.strokeStart = 0;
    [self.timer invalidate];
    self.timer = nil;
  }
}
 

我们要实现这个效果，是通过strokeStar和strokeEnd这两个属性来完成的，看看官方说明：

 
1
2
3
4
5
6
7
8
9
10
11
 
/* These values define the subregion of the path used to draw the
* stroked outline. The values must be in the range [0,1] with zero
* representing the start of the path and one the end. Values in
* between zero and one are interpolated linearly along the path
* length. strokeStart defaults to zero and strokeEnd to one. Both are
* animatable. */
 
@property CGFloat strokeStart;
@property CGFloat strokeEnd;
 

这里说明了这两个值的范围是[0,1]，当strokeStart的值为0慢慢变成1时，我们看到路径是慢慢消失的。这里实现的效果并不好，因为不能一起循环着。不过，在这里学习的目的已经达到了，后面学习动画效果时，才专门学习它。

最新文章

  1. 自学MVC看这里——全网最全ASP.NET MVC 教程汇总
  2. hdu5037 Frog （贪心）
  3. SymmetricDS 数据库双向同步开源软件入门
  4. Leetcode#146 LRU Cache
  5. org.springframework.dao.InvalidDataAccessApiUsageException:The given object has a null identifi的解决方案
  6. XML自己定义检查器语法+约束（1）
  7. Python-求助 SAE 如何使用第三方库? - 德问:编程社交问答
  8. Linux系统目录（转载）
  9. Http的四种post方式
  10. java项目开发第六天——天若有情天亦老，人间正道是沧桑
  11. java基础06 IO流
  12. Windows下使用pip安装mysql-python
  13. 排序算法入门之快速排序（java实现）
  14. 【python进阶】深入理解系统进程2
  15. Python练手例子（6）
  16. mqtt mosquitto 源码安装
  17. 【HDU5687】Trie
  18. phpstudy部署thinkPHP
  19. notepad++添加插件管理器
  20. windows配置Python多版本共存

热门文章

  1. ue标签不见了,如何解决?
  2. HDU 5039 Hilarity
  3. Qt：无标题栏无边框程序的拖动和改变大小
  4. QListWidget代码刷新界面
  5. P107、面试题15：链表中倒数第K个结点
  6. allegro飞线隐藏
  7. String.IndexOf String.IndexOf String.Substring
  8. hdu 4642 Fliping game(博弈)
  9. UVa 1643 Angle and Squares
  10. service name和SID的区别