【iOS技术分享】实现CAShaper与CAGradientLayer的配合使用

本帖最后由 Simpon 于 2016-10-19 13:40 编辑

作者： sjq

一、CAShapeLayer

CAShapreLayer是继承自CALayer ,所以CAlayer得属性他也全部继承下来, 根据官方文档说明,他的坐标系统就应该与UIBeziaPath相关,因为 CAShaperLayer的形状依据给定的path来决定的.

1.首先我们可以先根据背景视图的大小来设置ShapeLayer的宽高,

关于CAShapeLayer的注意点:

a.CAShapeLayer中shape代表形状的意思，所以需要形状才能生效

b.贝塞尔曲线可以创建基于矢量的路径，而UIBezierPath类是对CGPathRef的封装

c.贝塞尔曲线给CAShapeLayer提供路径，CAShapeLayer在提供的路径中进行渲染。

//1.首先创建一个背景视图
UIView* bgView = [[UIViewalloc]initWithFrame:CGRectMake(0, 150, kScreenSize.width, 100)];
bgView.backgroundColor = [UIColorblackColor];
[self.viewaddSubview:bgView];
//2. 创建一个贝塞尔曲线路径, 根据贝塞尔曲线, 我们画出连接2各点的一条线
UIBezierPath *path = [UIBezierPathbezierPath];
[path moveToPoint:CGPointZero];
[path addLineToPoint:CGPointMake(kScreenSize.width , 0)];
//设置背景色
self.view.backgroundColor = [UIColorblackColor];

复制代码

2. 通过CAShapeLayer来绘制一条路径

CAShapeLayer *shape = [CAShapeLayer layer];
shape.frame = bgView.bounds;
shape.lineWidth = 95;
//shapeLayerd填充颜色
shape.fillColor = [UIColor orangeColor].CGColor;
//shapeLayerd的绘制颜色
shape.strokeColor = [UIColor greenColor].CGColor;
//将绘制路径赋予shapeLayer上
shape.path = path.CGPath;
[bgView.layer addSublayer:shape];

复制代码

3.此时,我们看下用CAShapeLyer画个的效果图 

这里需要专门说一下

shape.lineDashPattern属性, 他可以通过控制间隔数量以及间隔宽度, 来实现间断线与虚线的效果, 如 shape.lineDashPattern = @[@2, @2];,那么接下来显示的内容就会以前面给出的大小来实现的.

二、 CAGradientLayer

接下来涉及到CAGradientLayer,这个层你可以通过指定颜色，一个开始的点，一个结束的点和梯度类型使你能够简单的在层上绘制一个梯度, 并且必须配备一张背景图片渐变色的作用范围，变化梯度的方向，颜色变换的作用点都和CAGradientLayer的坐标系统有关

1.CAGradientLayer用于处理渐变色的层结构

2.CAGradientLayer的渐变色可以做隐式动画

3.大部分情况下，CAGradientLayer时和CAShapeLayer配合使用的

//4.创建背景图层
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
//4.1 设置gradientLayer的frame
gradientLayer.frame = bgView.bounds;
//4.2 颜色分配
[gradientLayer setColors:[NSArray arrayWithObjects:
(id)[[[UIColor purpleColor] colorWithAlphaComponent:1] CGColor],
(id)[[[UIColor blueColor] colorWithAlphaComponent:1] CGColor],
(id)[[[UIColor greenColor] colorWithAlphaComponent:1] CGColor],
(id)[[[UIColor yellowColor] colorWithAlphaComponent:1] CGColor],
(id)[[UIColor orangeColor] colorWithAlphaComponent:1].CGColor,
(id)[[UIColor redColor] CGColor],nil]];
//4.3 设置每种颜色所处的位置也就是colors的显示区域 3，CAGradientLayer的startPoint和endPoint会直接决定颜色的绘制方向
[gradientLayer setLocations:[NSArray arrayWithObjects:
[NSNumber numberWithFloat:0.0],
[NSNumber numberWithFloat:0.2],
[NSNumber numberWithFloat:0.4],
[NSNumber numberWithFloat:0.6],
[NSNumber numberWithFloat:0.8],
[NSNumber numberWithFloat:1.0],
nil]];
//4.4 设置起始点
setStartPoint 是颜色的开始渐变的开始点，默认的是(0,0)也就是左上角
[gradientLayer setStartPoint:CGPointMake(0, 0)];
setEndPoint 是颜色的停止渐变的点，默认的是(1,1)
[gradientLayer setEndPoint:CGPointMake(1, 0)];
//4.5 截取渐变层
[gradientLayer setMask:shape];
//5.背景视图层添加gradientLayer
[bgView.layer addSublayer:gradientLayer];
//设置开始于结束位置1，CAGradientLayer的坐标系统是从（0，0）到（1，1）绘制的矩形
[gradientLayer setStartPoint:CGPointMake(0, 0.5)];
[gradientLayer setEndPoint:CGPointMake(1, 0.5)];
[gradientLayer setMask:shape]; //用progressLayer来截取渐变层
[bgView.layeraddSublayer:gradientLayer];最终效果图