CAShapeLayer和贝塞尔曲线配合使用

Posted 西贝了爷

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CAShapeLayer和贝塞尔曲线配合使用相关的知识,希望对你有一定的参考价值。

前言

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

关于UIBezierPath,请阅读文章:iOS UIBezierPth精讲

基本知识

看看官方说明:

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

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

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画圆

效果图如下:

技术分享

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

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

CAShapeLayer与UIBezierPath的简单Loading效果

效果图类似这样(懒自己做图,就百度了一个):

技术分享

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

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

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

以上是关于CAShapeLayer和贝塞尔曲线配合使用的主要内容,如果未能解决你的问题,请参考以下文章

CAShapeLayer的使用

iOS之UI--CAShapeLayer

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

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

iOS - 图形处理之CAShapeLayer

UIBeaierPath 与 CAShapeLayer