CAShapeLayer和贝塞尔曲线配合使用
前言
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
的关系:
CAShapeLayer
中shape
代表形状的意思,所以需要形状才能生效- 贝塞尔曲线可以创建基于矢量的路径,而
UIBezierPath
类是对CGPathRef
的封装 - 贝塞尔曲线给
CAShapeLayer
提供路径,CAShapeLayer
在提供的路径中进行渲染。路径会闭环,所以绘制出了Shape
- 用于
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时,我们看到路径是慢慢消失的。这里实现的效果并不好,因为不能一起循环着。不过,在这里学习的目的已经达到了,后面学习动画效果时,才专门学习它
CAShapeLayer和贝塞尔曲线配合使用的更多相关文章
- CAShapeLayer 与贝塞尔曲线
一 CAShapeLayer 简介 1,CAShapeLayer继承至CALayer,可以使用CALayer的所有属性 2,CAShapeLayer需要与贝塞尔曲线配合使用才有意义:单独使用毫无意义 ...
- 基于CAShapeLayer和贝塞尔曲线的圆形进度条动画
通过CAShapeLayer和贝塞尔曲线搭配的方法,创建的简单的圆形进度条的教程先简单的介绍下CAShapeLayer1,CAShapeLayer继承自CALayer,可使用CALayer的所有属性2 ...
- 基于CAShapeLayer和贝塞尔曲线的圆形进度条动画【装载】
初次接触CAShapeLayer和贝塞尔曲线,看了下极客学院的视频.对初学者来说感觉还不错.今天来说一个通过CAShapeLayer和贝塞尔曲线搭配的方法,创建的简单的圆形进度条的教程先简单的介绍下C ...
- 贝塞尔曲线 & CAShapeLayer & Stroke 动画 浅谈
转载自:http://46aae4d1e2371e4aa769798941cef698.devproxy.yunshipei.com/qiaoqiaoqiao2014/article/details/ ...
- [控件] 动态实时设置CAShapeLayer贝塞尔曲线的坐标点
动态实时设置CAShapeLayer贝塞尔曲线的坐标点 效果图: 源码: PathDirectionView.h 与 PathDirectionView.m // // PathDirectionVi ...
- 贝塞尔曲线与CAShapeLayer的关系以及Stroke动画
1.贝塞尔曲线与CAShapeLayer的关系 1.1CAShapeLayer须要一个形状才干生效,贝塞尔曲线能够创建基于矢量的路径.进而能够给CAShapeLayer提供路径,路径会闭环. ...
- iOS贝塞尔曲线(UIBezierPath)的基本使用方法
简介 UIBezierPath是对Core Graphics框架的一个封装,使用UIBezierPath类我们可以画出圆形(弧线)或者多边形(比如:矩形)等形状,所以在画复杂图形的时候会经常用到. 分 ...
- UIBezierPath IOS贝塞尔曲线
//记录 贝塞尔曲线使用 //根据一个矩形画曲线 + (UIBezierPath *)bezierPathWithRect:(CGRect)rect //根据矩形框的内切圆画曲线 + (UIBezi ...
- 通过UIBezierPath贝塞尔曲线画圆形、椭圆、矩形
/**创建椭圆形的贝塞尔曲线*/ UIBezierPath *_ovalPath=[UIBezierPath bezierPathWithOvalInRect:CGRectMake(, , , )]; ...
随机推荐
- Triangular Pastures (二维01背包)
描述Like everyone, cows enjoy variety. Their current fancy is new shapes for pastures. The old rectang ...
- Linux CentOS命令行界面字体重复问题解决记录
问题描述: 安装完CentOS 6.5 mini版之后,安装图形界面,启动之后出现如下问题,字体有重复 应该是因为字体原因, 我的解决方法: yum -y install dejavu-sans-* ...
- 【BZOJ1492】货币兑换Cash(CDQ分治)
题意: 小 Y 最近在一家金券交易所工作.该金券交易所只发行交易两种金券:A 纪 念券(以下简称 A 券)和 B 纪念券(以下简称 B 券).每个持有金券的顾客都有 一个自己的帐户.金券的数目可以是一 ...
- Linux硬件监控
https://blog.csdn.net/qq_30353203/article/details/62222882
- ztr loves lucky numbers--hdu5676(DFS)
http://acm.hdu.edu.cn/showproblem.php?pid=5676 题目大意: 给你一个数 让你找比这数大并且只含4和7 并且4和7的个数一样 枚举从0到10的18次方之 ...
- CoolCTO - 创业者的技术合伙人
CoolCTO - 创业者的技术合伙人
- zmq.error.ZMQError: Address already in use
1.如下代码,启动的时候python app.py会报如题的错误 app.py #!/user/bin python # -*- coding:utf-8 -*- import os from dat ...
- 使用Android SwipeRefreshLayout了解Android的嵌套滑动机制
SwipeRefreshLayout 是在Android Support Library, revision 19.1.0加入到support v4库中的一个下拉刷新控件,关于android的下拉刷新 ...
- 机器学习技法总结(五)Adaptive Boosting, AdaBoost-Stump,决策树
上一讲主要利用不同模型计算出来的g.採用aggregation来实现更好的g.假设还没有做出来g.我们能够採用bootstrap的方法来做出一系列的"diversity"的data ...
- nyoj473 A^B Problem (高速幂)
题目473 题目信息 执行结果 pid=473" style="text-decoration:none; color:rgb(55,119,188)">本题排行 ...