转自: iOS开发之CAShapeLayer初探
拓展: CAShapeLayer
一、CAShapeLayer简介
CAShapeLayer属于QuartzCore框架，继承自CALayer。CAShapeLayer是在坐标系内绘制贝塞尔曲线的，通过绘制贝塞尔曲线，设置shape(形状)的path(路径)，从而绘制各种各样的图形以及不规则图形。因此，使用CAShapeLayer需要与UIBezierPath一起使用。
UIBezierPath类允许你在自定义的 View 中绘制和渲染由直线和曲线组成的路径.。你可以在初始化的时候直接为你的UIBezierPath指定一个几何图形。
通俗点就是UIBezierPath用来指定绘制图形路径，而CAShapeLayer就是根据路径来绘图的。
二、CAShapeLayer属性介绍
1、[CAShapeLayer layer].path
2、[CAShapeLayer layer].fillColor
3、[CAShapeLayer layer].fillRule
4、[CAShapeLayer layer].strokeColor
5、[CAShapeLayer layer].strokeStart与
[CAShapeLayer layer].strokeEnd
6、[CAShapeLayer layer]. lineWidth与
[CAShapeLayer layer].miterLimit
7、[CAShapeLayer layer]. lineCap与
[CAShapeLayer layer].lineJoin
8、[CAShapeLayer layer]. lineDashPhase与
[CAShapeLayer layer]. lineDashPattern
三、开始绘制
1、颜色说明---矩形为例
CAShapeLayer *layer = [CAShapeLayer layer];
layer.frame = CGRectMake(375/2-50, 667/2-50, 100, 100);
//设置背景色
layer.backgroundColor = [UIColor cyanColor].CGColor;
//设置描边色
layer.strokeColor = [UIColor blackColor].CGColor;
//设置填充色
layer.fillColor = [UIColor redColor].CGColor;
[self.view.layer addSublayer:layer];
1.png
读者估计会纳闷，为啥设置的描边色与填充色没有作用，这是因为这两种颜色需要UIBezierPath来绘制路径，然后使用CAShapeLayer进行渲染，所以接下来就就在上面的那段代码下简单的添加一个UIBezierPath类路径（温馨提示，layer的背景与这两种颜色最好不要共用）。
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 100, 100)];
layer.path = path.CGPath;
2.png
2、绘制shape
//绘制矩形
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 100, 100)];
//绘制圆形路径
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 100, 100)];
//绘制自带圆角的路径
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 100, 100) cornerRadius:30];
//指定矩形某一个角加圆角（代码示例为左上角）
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 100, 100) byRoundingCorners:UIRectCornerTopLeft cornerRadii:CGSizeMake(50, 50)];
shape.png
3、绘制曲线（正弦曲线为例）
先来两张效果图：
3.png
4.png
说明：图4只是比图5多了填充色而已。
- (void)viewDidLoad {
[super viewDidLoad];
UIBezierPath *path = [self startPoint:CGPointMake(50, 300) endPoint:CGPointMake(200, 300) controlPoint:CGPointMake(125, 200)];
UIBezierPath *path1 = [self startPoint:CGPointMake(200, 300) endPoint:CGPointMake(350, 300) controlPoint:CGPointMake(275, 400)];
CAShapeLayer *layer = [self createShapeLayer:[UIColor orangeColor]];
layer.path = path.CGPath;
CAShapeLayer *layer1 = [self createShapeLayer:[UIColor greenColor]];
layer1.path = path1.CGPath;
}
/** 配置贝塞尔曲线
@param startPoint 起始点
@param endPoint 结束点
@param controlPoint 控制点
@return UIBezierPath对象
*/
- (UIBezierPath *)startPoint:(CGPoint)startPoint endPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint{
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:startPoint];
[path addQuadCurveToPoint:endPoint controlPoint:controlPoint];
return path;
}
- (CAShapeLayer *)createShapeLayer:(UIColor *)color {
CAShapeLayer *layer = [CAShapeLayer layer];
// layer.frame = CGRectMake(0, 0, 50, 50);
//设置背景色
// layer.backgroundColor = [UIColor cyanColor].CGColor;
//设置描边色
layer.strokeColor = [UIColor blackColor].CGColor;
//设置填充色
layer.fillColor = color.CGColor;
[self.view.layer addSublayer:layer];
return layer;
}
4、曲线动画
1)、直线
6.gif
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(50, 667/2)];
[path addLineToPoint:CGPointMake(375/2, 667/2)];
[path addLineToPoint:CGPointMake(300, 667/2)];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
//每次动画的持续时间
animation.duration = 5;
//动画起始位置
animation.fromValue = @(0);
//动画结束位置
animation.toValue = @(1);
//动画重复次数
animation.repeatCount = 100;
CAShapeLayer *layer = [self createShapeLayer:[UIColor orangeColor]];
layer.path = path.CGPath;
layer.lineWidth = 2.0;
//设置图形的弧度
// layer.strokeStart = 0;
// layer.strokeEnd = 0;
[layer addAnimation:animation forKey:@"strokeEndAnimation"];
//注：由于UIBezierPath已经设置路径，所以动画的路径就不需要再次设置，
//只需要设置起始0与结束1就行，有需要可以设置动画结束后是否需要返回原位置。
2)、曲线
7.gif
UIBezierPath *path = [UIBezierPath bezierPath];
//起始点
[path moveToPoint:CGPointMake(50, 667/2)];
//结束点、两个控制点
[path addCurveToPoint:CGPointMake(330, 667/2) controlPoint1:CGPointMake(125, 200) controlPoint2:CGPointMake(185, 450)];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.duration = 5;
animation.fromValue = @(0);
animation.toValue = @(1);
animation.repeatCount = 100;
CAShapeLayer *layer = [self createShapeLayer:[UIColor clearColor]];
layer.path = path.CGPath;
layer.lineWidth = 2.0;
[layer addAnimation:animation forKey:@"strokeEndAnimation"];
3)、圆形
笔者目前的一个项目中就用到了这个功能。直接贴一张效果图：
8.gif
其实实现效果很简单，只是把边线加粗了然后实现动画就可以了，还有一种思路就是画两个圆，截取中间的环，对大圆进行颜色渐变填充，小圆clear所有颜色再去实现动画也能达到这样的效果。
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(375/2-100, 667/2-100, 200, 200)];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.duration = 9.0;
animation.fromValue = @(0);
animation.toValue = @(1);
animation.repeatCount = 100;
CAShapeLayer *layer = [self createShapeLayer:[UIColor clearColor]];
layer.path = path.CGPath;
layer.lineWidth = 25.0;
//圆的起始位置，默认为0
layer.strokeStart = 0;
//圆的结束位置，默认为1，如果值为0.75，则显示3/4的圆
layer.strokeEnd = 1;
[layer addAnimation:animation forKey:@"strokeEndAnimation"];
四、小结
iOS中画图类还有CoreGraphics，但笔者比较喜欢使用CAShapeLayer，且CAShapeLayer一般是与UIBezierPath连用的，如果有动画功能的话，还可以加上CABasicAnimation。这篇文章只是对CAShapeLayer和UIBezierPath类如何使用和主要功能实现做了简要的说明，还有一些项目中可能经常用到的圆形进度圈、下载圈，或者某些特效的实现，笔者可能在下一篇文章中简析封装步骤与代码实现，有需要的读者多多关注。
网友评论