前言

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的关系

CAShapeLayerUIBezierPath的关系:

  1. CAShapeLayershape代表形状的意思,所以需要形状才能生效
  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;
  }
}
 

我们要实现这个效果,是通过strokeStarstrokeEnd这两个属性来完成的,看看官方说明:

 
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时,我们看到路径是慢慢消失的。这里实现的效果并不好,因为不能一起循环着。不过,在这里学习的目的已经达到了,后面学习动画效果时,才专门学习它

CAShapeLayer和贝塞尔曲线配合使用的更多相关文章

  1. CAShapeLayer 与贝塞尔曲线

    一 CAShapeLayer 简介 1,CAShapeLayer继承至CALayer,可以使用CALayer的所有属性 2,CAShapeLayer需要与贝塞尔曲线配合使用才有意义:单独使用毫无意义 ...

  2. 基于CAShapeLayer和贝塞尔曲线的圆形进度条动画

    通过CAShapeLayer和贝塞尔曲线搭配的方法,创建的简单的圆形进度条的教程先简单的介绍下CAShapeLayer1,CAShapeLayer继承自CALayer,可使用CALayer的所有属性2 ...

  3. 基于CAShapeLayer和贝塞尔曲线的圆形进度条动画【装载】

    初次接触CAShapeLayer和贝塞尔曲线,看了下极客学院的视频.对初学者来说感觉还不错.今天来说一个通过CAShapeLayer和贝塞尔曲线搭配的方法,创建的简单的圆形进度条的教程先简单的介绍下C ...

  4. 贝塞尔曲线 & CAShapeLayer & Stroke 动画 浅谈

    转载自:http://46aae4d1e2371e4aa769798941cef698.devproxy.yunshipei.com/qiaoqiaoqiao2014/article/details/ ...

  5. [控件] 动态实时设置CAShapeLayer贝塞尔曲线的坐标点

    动态实时设置CAShapeLayer贝塞尔曲线的坐标点 效果图: 源码: PathDirectionView.h 与 PathDirectionView.m // // PathDirectionVi ...

  6. 贝塞尔曲线与CAShapeLayer的关系以及Stroke动画

    1.贝塞尔曲线与CAShapeLayer的关系    1.1CAShapeLayer须要一个形状才干生效,贝塞尔曲线能够创建基于矢量的路径.进而能够给CAShapeLayer提供路径,路径会闭环.   ...

  7. iOS贝塞尔曲线(UIBezierPath)的基本使用方法

    简介 UIBezierPath是对Core Graphics框架的一个封装,使用UIBezierPath类我们可以画出圆形(弧线)或者多边形(比如:矩形)等形状,所以在画复杂图形的时候会经常用到. 分 ...

  8. UIBezierPath IOS贝塞尔曲线

    //记录  贝塞尔曲线使用 //根据一个矩形画曲线 + (UIBezierPath *)bezierPathWithRect:(CGRect)rect //根据矩形框的内切圆画曲线 + (UIBezi ...

  9. 通过UIBezierPath贝塞尔曲线画圆形、椭圆、矩形

    /**创建椭圆形的贝塞尔曲线*/ UIBezierPath *_ovalPath=[UIBezierPath bezierPathWithOvalInRect:CGRectMake(, , , )]; ...

随机推荐

  1. Triangular Pastures (二维01背包)

    描述Like everyone, cows enjoy variety. Their current fancy is new shapes for pastures. The old rectang ...

  2. Linux CentOS命令行界面字体重复问题解决记录

    问题描述: 安装完CentOS 6.5 mini版之后,安装图形界面,启动之后出现如下问题,字体有重复 应该是因为字体原因, 我的解决方法: yum -y install dejavu-sans-* ...

  3. 【BZOJ1492】货币兑换Cash(CDQ分治)

    题意: 小 Y 最近在一家金券交易所工作.该金券交易所只发行交易两种金券:A 纪 念券(以下简称 A 券)和 B 纪念券(以下简称 B 券).每个持有金券的顾客都有 一个自己的帐户.金券的数目可以是一 ...

  4. Linux硬件监控

    https://blog.csdn.net/qq_30353203/article/details/62222882

  5. ztr loves lucky numbers--hdu5676(DFS)

    http://acm.hdu.edu.cn/showproblem.php?pid=5676 题目大意: 给你一个数  让你找比这数大并且只含4和7  并且4和7的个数一样 枚举从0到10的18次方之 ...

  6. CoolCTO - 创业者的技术合伙人

    CoolCTO - 创业者的技术合伙人

  7. zmq.error.ZMQError: Address already in use

    1.如下代码,启动的时候python app.py会报如题的错误 app.py #!/user/bin python # -*- coding:utf-8 -*- import os from dat ...

  8. 使用Android SwipeRefreshLayout了解Android的嵌套滑动机制

    SwipeRefreshLayout 是在Android Support Library, revision 19.1.0加入到support v4库中的一个下拉刷新控件,关于android的下拉刷新 ...

  9. 机器学习技法总结(五)Adaptive Boosting, AdaBoost-Stump,决策树

    上一讲主要利用不同模型计算出来的g.採用aggregation来实现更好的g.假设还没有做出来g.我们能够採用bootstrap的方法来做出一系列的"diversity"的data ...

  10. nyoj473 A^B Problem (高速幂)

    题目473 题目信息 执行结果 pid=473" style="text-decoration:none; color:rgb(55,119,188)">本题排行 ...