http://www.cocoachina.com/ios/20160214/15251.html
CAShapeLayer 是 CALayer 的子类，但是比 CALayer 更灵活，可以画出各种图形，当然，你也可以使用其他方式来画，随你。
杂谈
在 CAShapeLayer 中，也可以像 CALayer 一样指定它的 frame 来画，就像这样：
|
1
2
3
4
5
|
let layer = CAShapeLayer()layer.frame = CGRectMake(110, 100, 150, 100)layer.backgroundColor = UIColor.blackColor().CGColorview.layer.addSublayer(layer) |
然后你就会得到如图这样的黑色矩形
但是，CAShapeLayer 有一个神奇的属性 path 用这个属性配合上 UIBezierPath 这个类就可以达到超神的效果。
UIBezierPath 顾名思义，这是用贝塞尔曲线的方式来构建一段弧线，你可以用任意条弧线来组成你想要的形状，比如，你想用它来和上面一样画一个矩形，那就可以这样子来做：
|
1
2
3
4
5
|
let path = UIBezierPath(rect: CGRectMake(110, 100, 150, 100))let layer = CAShapeLayer()layer.path = path.CGPathlayer.fillColor = UIColor.blackColor().CGColorview.layer.addSublayer(layer) |
要注意的是，这里就不要用backgroundColor 这个属性了，而要使用 fillColor 和 strokeColor ，前者代表设置这个 Layer 的填充色，后者代表设置它的边框色
|
1
2
|
layer.fillColor = UIColor.clearColor().CGColorlayer.strokeColor = UIColor.blackColor().CGColor |
可以试一下把上面代码设置颜色的部分改成这个样子，那么运行程序的时候就会是这种样子
玩一下UIBezierPath
在说回 UIBezierPath ，在 UIBezierPath 的 init 方法中，就有很多方便你画各种图形的方法，比如你可以画一个带圆角的图形
|
1
2
3
4
5
|
let path = UIBezierPath(roundedRect: CGRectMake(110, 100, 150, 100), cornerRadius: 50)let layer = CAShapeLayer()layer.path = path.CGPathlayer.fillColor = UIColor.clearColor().CGColorlayer.strokeColor = UIColor.blackColor().CGColor |
还可以指定起始角和半径画圆
|
1
2
3
4
5
6
7
8
|
let radius: CGFloat = 60.0let startAngle: CGFloat = 0.0let endAngle: CGFloat = CGFloat(M_PI * 2)let path = UIBezierPath(arcCenter: view.center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: true)
let layer = CAShapeLayer()layer.path = path.CGPathlayer.fillColor = UIColor.clearColor().CGColorlayer.strokeColor = UIColor.blackColor().CGColor |
在这里涉及到角度的问题，起始角和结束角，这里的角度使使用弧度制来表示，这里我收藏了一张图片，以方便参考。
怎么画曲线
贝塞尔曲线的画法是由起点、终点、控制点三个参数来画的，为了解释清楚这个点，我写了几行代码来解释它
|
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
|
let startPoint = CGPointMake(50, 300)let endPoint = CGPointMake(300, 300)let controlPoint = CGPointMake(170, 200)let layer1 = CALayer()layer1.frame = CGRectMake(startPoint.x, startPoint.y, 5, 5)layer1.backgroundColor = UIColor.redColor().CGColorlet layer2 = CALayer()layer2.frame = CGRectMake(endPoint.x, endPoint.y, 5, 5)layer2.backgroundColor = UIColor.redColor().CGColorlet layer3 = CALayer()layer3.frame = CGRectMake(controlPoint.x, controlPoint.y, 5, 5)layer3.backgroundColor = UIColor.redColor().CGColorlet path = UIBezierPath()let layer = CAShapeLayer()path.moveToPoint(startPoint)path.addQuadCurveToPoint(endPoint, controlPoint: controlPoint)layer.path = path.CGPathlayer.fillColor = UIColor.clearColor().CGColorlayer.strokeColor = UIColor.blackColor().CGColorview.layer.addSublayer(layer)view.layer.addSublayer(layer1)view.layer.addSublayer(layer2)view.layer.addSublayer(layer3) |
我很随意的定义了三个点，为了清楚显示它们的位置，我放了三个矩形在上面以便观察，然后调用 path.moveToPoint(startPoint) 让它移动到起始点，然后调用path.addQuadCurveToPoint(endPoint, controlPoint: controlPoint) 这个方法告诉它结束点和控制点，这样它就能画出一条有弧度的线条了，如果把fillColor设置一个颜色，那么它就会变成一个很丑的形状了，示例图如下
控制点决定了它的曲率，曲线的顶点不等于控制点的位置，具体可以看一下贝塞尔曲线的定义，你还可以使用两个控制点来画，两个控制点可以使用方法 path.addCurveToPoint(endPoint, controlPoint1: controlPoint, controlPoint2: controlPoint2)来搞定
这样它会是这个样子
再来说说 CAShapeLayer
CAShapeLayer 是个神奇的东西，给它一个path它就能变成你想要的形状，它还有很多可以玩的地方。综合使用可以组合成不同的动画，比如下面这样
demo1.gif
demo2.gif
demo3.gif
这三个动画就是使用了 strokeEnd、strokeStart和lineWidth 三个属性，第一个动画用了strokeEnd这个属性的值范围是0-1，动画显示了从0到1之间每一个值对这条曲线的影响，strokeStart的方法则是相反的，如果把这两个值首先都设置成0.5然后慢慢改变成0和1的时候就会变成第二个动画，配合lineWidth则曲线会慢慢变粗，这里的很多属性都是支持动画的。
示例代码
|
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
|
private func animation1() { let animation = CABasicAnimation(keyPath: "strokeEnd")
animation.fromValue = 0
animation.toValue = 1
animation.duration = 2
layer.addAnimation(animation, forKey: "")
}
private func animation2() {
layer.strokeStart = 0.5
layer.strokeEnd = 0.5
let animation = CABasicAnimation(keyPath: "strokeStart")
animation.fromValue = 0.5
animation.toValue = 0
animation.duration = 2
let animation2 = CABasicAnimation(keyPath: "strokeEnd")
animation2.fromValue = 0.5
animation2.toValue = 1
animation2.duration = 2
layer.addAnimation(animation, forKey: "")
layer.addAnimation(animation2, forKey: "")
}
private func animation3() {
let animation = CABasicAnimation(keyPath: "lineWidth")
animation.fromValue = 1
animation.toValue = 10
animation.duration = 2
layer.addAnimation(animation, forKey: "")
}
|
应用一下
前一阵子在仿时光网这个APP，其中有一个Layer的形状很怪异，是这样的
很明显它可以用 CAShapeLayer + UIBezierPath 来做，思路大概是这样，先移动到左上方的位置，然后向下划线，然后往右划线，然后往上划线，还剩一个盖子，这个盖子就用一个控制点控制曲率，非常简单，代码如下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
let finalSize = CGSizeMake(CGRectGetWidth(view.frame), 400)let layerHeight = finalSize.height * 0.2let layer = CAShapeLayer()let bezier = UIBezierPath()bezier.moveToPoint(CGPointMake(0, finalSize.height - layerHeight))bezier.addLineToPoint(CGPointMake(0, finalSize.height - 1))bezier.addLineToPoint(CGPointMake(finalSize.width, finalSize.height - 1))bezier.addLineToPoint(CGPointMake(finalSize.width, finalSize.height - layerHeight))bezier.addQuadCurveToPoint(CGPointMake(0,finalSize.height - layerHeight), controlPoint: CGPointMake(finalSize.width / 2, (finalSize.height - layerHeight) - 40))
layer.path = bezier.CGPathlayer.fillColor = UIColor.blackColor().CGColorview.layer.addSublayer(layer) |
就能画出这样的形状来
再来一个复杂点的，微信下拉拍小视频的那只眼睛很有趣，来模仿一下那个效果吧，它是这样的
首先你得画出这只眼睛，这是眼睛包括5个部分组成（这个是用OC写的）
|
1
2
3
4
5
|
@property (strong, nonatomic) CAShapeLayer *eyeFirstLightLayer;@property (strong, nonatomic) CAShapeLayer *eyeSecondLightLayer;@property (strong, nonatomic) CAShapeLayer *eyeballLayer;@property (strong, nonatomic) CAShapeLayer *topEyesocketLayer;@property (strong, nonatomic) CAShapeLayer *bottomEyesocketLayer; |
然后，还是通过 UIBezierPath 和 CAShapeLayer 这样的老套路来画，代码较多
|
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
- (CAShapeLayer *)eyeFirstLightLayer { if (!_eyeFirstLightLayer) {
_eyeFirstLightLayer = [CAShapeLayer layer];
CGPoint center = CGPointMake(CGRectGetWidth(self.frame) / 2, CGRectGetHeight(self.frame) / 2);
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center
radius:CGRectGetWidth(self.frame) * 0.2
startAngle:(230.f / 180.f) * M_PI
endAngle:(265.f / 180.f) * M_PI
clockwise:YES];
_eyeFirstLightLayer.borderColor = [UIColor blackColor].CGColor;
_eyeFirstLightLayer.lineWidth = 5.f;
_eyeFirstLightLayer.path = path.CGPath;
_eyeFirstLightLayer.fillColor = [UIColor clearColor].CGColor;
_eyeFirstLightLayer.strokeColor = [UIColor whiteColor].CGColor;
}
return _eyeFirstLightLayer;
}- (CAShapeLayer *)eyeSecondLightLayer { if (!_eyeSecondLightLayer) {
_eyeSecondLightLayer = [CAShapeLayer layer];
CGPoint center = CGPointMake(CGRectGetWidth(self.frame) / 2, CGRectGetHeight(self.frame) / 2);
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center
radius:CGRectGetWidth(self.frame) * 0.2
startAngle:(211.f / 180.f) * M_PI
endAngle:(220.f / 180.f) * M_PI
clockwise:YES];
_eyeSecondLightLayer.borderColor = [UIColor blackColor].CGColor;
_eyeSecondLightLayer.lineWidth = 5.f;
_eyeSecondLightLayer.path = path.CGPath;
_eyeSecondLightLayer.fillColor = [UIColor clearColor].CGColor;
_eyeSecondLightLayer.strokeColor = [UIColor whiteColor].CGColor;
}
return _eyeSecondLightLayer;
}- (CAShapeLayer *)eyeballLayer { if (!_eyeballLayer) {
_eyeballLayer = [CAShapeLayer layer];
CGPoint center = CGPointMake(CGRectGetWidth(self.frame) / 2, CGRectGetHeight(self.frame) / 2);
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center
radius:CGRectGetWidth(self.frame) * 0.3
startAngle:(0.f / 180.f) * M_PI
endAngle:(360.f / 180.f) * M_PI
clockwise:YES];
_eyeballLayer.borderColor = [UIColor blackColor].CGColor;
_eyeballLayer.lineWidth = 1.f;
_eyeballLayer.path = path.CGPath;
_eyeballLayer.fillColor = [UIColor clearColor].CGColor;
_eyeballLayer.strokeColor = [UIColor whiteColor].CGColor;
_eyeballLayer.anchorPoint = CGPointMake(0.5, 0.5);
}
return _eyeballLayer;
}- (CAShapeLayer *)topEyesocketLayer { if (!_topEyesocketLayer) {
_topEyesocketLayer = [CAShapeLayer layer];
CGPoint center = CGPointMake(CGRectGetWidth(self.frame) / 2, CGRectGetHeight(self.frame) / 2);
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, CGRectGetHeight(self.frame) / 2)];
[path addQuadCurveToPoint:CGPointMake(CGRectGetWidth(self.frame), CGRectGetHeight(self.frame) / 2)
controlPoint:CGPointMake(CGRectGetWidth(self.frame) / 2, center.y - center.y - 20)];
_topEyesocketLayer.borderColor = [UIColor blackColor].CGColor;
_topEyesocketLayer.lineWidth = 1.f;
_topEyesocketLayer.path = path.CGPath;
_topEyesocketLayer.fillColor = [UIColor clearColor].CGColor;
_topEyesocketLayer.strokeColor = [UIColor whiteColor].CGColor;
}
return _topEyesocketLayer;
}- (CAShapeLayer *)bottomEyesocketLayer { if (!_bottomEyesocketLayer) {
_bottomEyesocketLayer = [CAShapeLayer layer];
CGPoint center = CGPointMake(CGRectGetWidth(self.frame) / 2, CGRectGetHeight(self.frame) / 2);
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, CGRectGetHeight(self.frame) / 2)];
[path addQuadCurveToPoint:CGPointMake(CGRectGetWidth(self.frame), CGRectGetHeight(self.frame) / 2)
controlPoint:CGPointMake(CGRectGetWidth(self.frame) / 2, center.y + center.y + 20)];
_bottomEyesocketLayer.borderColor = [UIColor blackColor].CGColor;
_bottomEyesocketLayer.lineWidth = 1.f;
_bottomEyesocketLayer.path = path.CGPath;
_bottomEyesocketLayer.fillColor = [UIColor clearColor].CGColor;
_bottomEyesocketLayer.strokeColor = [UIColor whiteColor].CGColor;
}
return _bottomEyesocketLayer;
} |
然后更改一下某些属性的值，方便稍后的动画
|
1
2
3
4
5
6
7
8
|
- (void)setupAnimation { self.eyeFirstLightLayer.lineWidth = 0.f;
self.eyeSecondLightLayer.lineWidth = 0.f;
self.eyeballLayer.opacity = 0.f;
_bottomEyesocketLayer.strokeStart = 0.5f;
_bottomEyesocketLayer.strokeEnd = 0.5f;
_topEyesocketLayer.strokeStart = 0.5f;
_topEyesocketLayer.strokeEnd = 0.5f;}
|
最后根据 UIScrollView 的 contentOffset 来控制各种属性，办法较笨，但管用。
最后
总之使用 UIbezierPath 和 CAShapeLayer 可以画出你想要的任何形状，没有它做不到，只有你想不到，搞定了它们你就可以轻松定制你想要的任何控件了。
相关推荐
利用UIBezierPath和CAShapeLayer实现的镂空及遮罩效果。
根据UIBezierPath和CAShapeLayer自定义倒计时进度条，适用于app启动的时候设置一个倒计时关闭启动页面。可以设置进度条颜色，填充颜色，进度条宽度以及点击事件等。
来源： Licence： MIT 作者： UIBezierPath和CAShapeLayer画图，这个DEMO展示了如何使用贝塞尔曲线画出了各种图形，包括叮当猫
基于CAShapeLayer与UIBezierPath画出一个带小头部的动态显示流量图matlab源码.zip 基于CAShapeLayer与UIBezierPath画出一个带小头部的动态显示流量图matlab源码.zip 基于CAShapeLayer与UIBezierPath画出一个带小头部...
-UIBezierPathUIBezierPath与CAShapeLayer画图，画简单的哆啦A梦
尝试用UIBezierPath和CAShapeLayer画一个环形圆，由于第一次写，不到之处还望指正
UIBezierPath，CAShapeLayer，CAGradientLayer，CABasicAnimation，CALayer的综合使用，动态画渐变圆形，稍微改动可以形成彩色进度条。
Animation、UIBezierPath、CAShapeLayer](#iOS Animation、UIBezierPath、CAShapeLayer) [Bug Fix](#Bug Fix) 内容 iOS开发相关 iOS基础 UITableView、UICollectionView AutoLayout Media UINavigationController ...
包含所有基本动画，常用复杂动画，UIBezierPath画出爱心。
CAShapeLayer 是继承与clayer的一个类，是quare2d中对图层操作最基本的一个类的扩展，通过CAShapeLayer 我们可以画出我们需要的各种图形，和UIBezierPath结合时，进行各种绘制 使用UIBezierPath绘制图形
WritingEffect 将字符串转换为UIBezierPath，并通过CAShapeLayer及layer动画实现动态书写效果 ###效果图
iOS中UIBezierPath画图的基本使用。
(CAShapelayer UIBezierPath)绘制K线支撑横竖屏切换、刷新、长按、缩放、masonry适配，完美支持金融产品 非常的流畅，占用内存少，使用矢量进行填充K线 由于项目比较大，下载请移步GitHub：...
UIBezierPath的简单介绍，希望有助于你的理解与应用
WSDrawCircleProgress, 根据UIBezierPath和CAShapeLayer自定义倒计时进度条，适用于app启动的时候设置一个倒计时关闭启动页面。可以设置进度条颜色，填充颜色，进度条宽度以及点击事件等。 github：...
在iOS中有一个类叫UIBezierPath（贝塞尔曲线），这两天研究了一下UIBezierPath和CAShapeLayer，根据别人分享的教程，画了这个萌萌的哆啦A梦。 UIBezierPath： UIBezierPath是在 UIKit 中的一个类，继承于NSObject,...
GitHub:https://github.com/Mr-yuwei/YeeObjcProject/tree/master/YeeShopCarObjcProject 简书https://www.jianshu.com/p/64edd11db99e 利用UIBezierPath实现加入购物车动画
计算tap事件点击的坐标位于饼图什么位置，以响应饼图的点击事件，显示百分比。
公司项目最近需要使用画线的功能，所以写了一个简单的demo，代码有些简陋，请轻喷。 使用UIBezierPath 设置路径 添加到CAShapeLayer上 在使用CABasicAnimation进行动画