一、使用CAShapeLayer实现复杂的View的遮罩效果

1.1、案例演示

最近在整理一个聊天的项目的时候，发送图片的时候，会有一个三角的指向效果，指向这张图片的发送者。服务端返回给我们的图片只是一张矩形的图片，我们如何把一张矩形的图片或者View，加上一层自定义遮罩效果，就是本文要讲的内容。效果演示如下：第一张是一个View的遮罩效果，第二张是UIImageView的遮罩效果。

演示图片

1.2、实现机制

在每一View的layer层中有一个mask属性，他就是专门来设置该View的遮罩效果的。该mask本身也是一个layer层。我们只需要生成一个自定义的layer，然后覆盖在需要遮罩的View上面即可。问题就归于如何生成入上图所示的不规则图片的Layer。CAShapeLayer可以根据几个点的依次连线，产生一个闭合空间的layer。如下图所示：

1.3、实现代码

实现方式为实现了CAShapeLayer的ViewMask的Category。

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
@implementation CAShapeLayer (ViewMask)
+ (instancetype)createMaskLayerWithView : (UIView *)view{
    CGFloat viewWidth = CGRectGetWidth(view.frame);
    CGFloat viewHeight = CGRectGetHeight(view.frame);
    CGFloat rightSpace = 10.;
    CGFloat topSpace = 15.;
    CGPoint point1 = CGPointMake(0, 0);
    CGPoint point2 = CGPointMake(viewWidth-rightSpace, 0);
    CGPoint point3 = CGPointMake(viewWidth-rightSpace, topSpace);
    CGPoint point4 = CGPointMake(viewWidth, topSpace);
    CGPoint point5 = CGPointMake(viewWidth-rightSpace, topSpace+10.);
    CGPoint point6 = CGPointMake(viewWidth-rightSpace, viewHeight);
    CGPoint point7 = CGPointMake(0, viewHeight);
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:point1];
    [path addLineToPoint:point2];
    [path addLineToPoint:point3];
    [path addLineToPoint:point4];
    [path addLineToPoint:point5];
    [path addLineToPoint:point6];
    [path addLineToPoint:point7];
    [path closePath];
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.path = path.CGPath;
    return layer;
}
@end

1.4、调用方式

1
2
3
4
5
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(40, 50, 80, 100)];
view.backgroundColor = [UIColor orangeColor];
[self.view addSubview:view];
CAShapeLayer *layer = [CAShapeLayer createMaskLayerWithView:view];
view.layer.mask = layer;

二、使用CAShapeLayer实现一个音量大小动态改变的控件

2.1、案例演示

对于实时显示语音音量大小的需求，发现很多人的实现方式通过预放置多张图进行切换进行完成的。这样的处理，不但会浪费App的资源存储空间，而且效率也不高。对于符合某一定规律动态改变的图形，我们也可以考虑通过代码的方式来实现。

2.2、实现机制

外部轮廓View主要控制显示大小和显示的圆角效果。内部的Layer主要控制动态显示的高度，虽然他是矩形的。但是当把该Layer加入到View中，而该View设置了_dynamicView.clipsToBounds = YES;。内部的Layer超过外部轮廓的部分，则会被切除掉。

如此说来，我们只需要动态改变内部Layer显示的高度，即可完成该效果显示。是不是很简单啊。。

2.3、实现代码

_dynamicView 表示外部轮廓的View。

indicateLayer 表示内容动态显示的Layer。

实现动态改变的函数如下：

1
2
3
4
5
6
7
8
9
10
-(void)refreshUIWithVoicePower : (NSInteger)voicePower{
    CGFloat height = (voicePower)*(CGRectGetHeight(_dynamicView.frame)/TOTAL_NUM);
    [_indicateLayer removeFromSuperlayer];
    _indicateLayer = nil;
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, CGRectGetHeight(_dynamicView.frame)-height, CGRectGetWidth(_dynamicView.frame), height) cornerRadius:0];
    _indicateLayer = [CAShapeLayer layer];
    _indicateLayer.path = path.CGPath;
    _indicateLayer.fillColor = [UIColor whiteColor].CGColor;
    [_dynamicView.layer addSublayer:_indicateLayer];
}

三、圆形进度条

3.1、案例演示

最近有一个小需求，就是要做一个圆形进度条，大概样子如下：

在不知道有CAShapeLayer的strokeStart和strokeEnd属性的时候，我采取的方法就是实时的 移除旧的CAShapeLayer 然后重绘这个圆形的CAShapeLayer。显然这种方式的效率是不高的。后来在一次看别人Demo的时候，发现别人使用了CAShapeLayer的strokeStart和strokeEnd属性，实现这一个效果十分的简单方便。下面就和大家来讲一讲这两个属性的使用。

3.2、属性详解

苹果官方给出这两个属性的解释为：

/* 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. */

大概意思就是：我们可以对绘制的Path进行分区。这两个属性的值在0~1之间，0代表Path的开始位置，1代表Path的结束位置。是一种线性递增关系。strokeStart默认值为0，strokeEnd默认值为1。这两个属性都支持动画。

1
2
3
4
5
6
7
8
9
10
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.frame = _demoView.bounds;
shapeLayer.strokeEnd = 0.7f;
shapeLayer.strokeStart = 0.1f;
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:_demoView.bounds];
shapeLayer.path = path.CGPath;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.lineWidth = 2.0f;
shapeLayer.strokeColor = [UIColor redColor].CGColor;
[_demoView.layer addSublayer:shapeLayer];

我们通过以上代码设置：strokeStart=0.1f; strokeEnd=0.7f则显示如下图所示。

3.3、圆形进度条的实现代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.frame = _demoView.bounds;
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:_demoView.bounds];
shapeLayer.path = path.CGPath;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.lineWidth = 2.0f;
shapeLayer.strokeColor = [UIColor redColor].CGColor;
[_demoView.layer addSublayer:shapeLayer];
CABasicAnimation *pathAnima = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnima.duration = 3.0f;
pathAnima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
pathAnima.fromValue = [NSNumber numberWithFloat:0.0f];
pathAnima.toValue = [NSNumber numberWithFloat:1.0f];
pathAnima.fillMode = kCAFillModeForwards;
pathAnima.removedOnCompletion = NO;
[shapeLayer addAnimation:pathAnima forKey:@"strokeEndAnimation"];

转载于:https://www.cnblogs.com/yinxiao-bai1014/p/5672360.html

关于CAShapeLayer的一些实用案例和技巧相关推荐

  1. 优秀计算机基础微课案例,大学计算机基础——大学微课实用案例教学

    大学计算机基础--大学微课实用案例教学 语音 编辑 锁定 讨论 上传视频 <大学计算机基础--大学微课实用案例教学> 是清华大学出版社于2006年出版的图书.作者是徐军.李翠梅.杨丽君. ...

  2. python编程求圆的面积案例_Python实用案例编程入门：第七章 调式手段

    本章的主题为调试手段,这是程序开发必不可少的步骤,也是占用时间最多的环节.在程序员的正常开发工作中,调试工作至少占据1/3的时间,而实际编码工作相对占用实际比较少.因此,无论您是初学者,还是编程兴趣爱 ...

  3. 《用于物联网的Arduino项目开发：实用案例解析》—— 3.4 小结

    本节书摘来自华章出版社<用于物联网的Arduino项目开发:实用案例解析>一 书中的第3章,第3.4节,作者［美］安德尔·杰韦德(Adeel Javed),更多章节内容可以访问云栖社区&q ...

  4. Python五种实用的小技巧

    本文经"机器之心"授权,禁止二次转载. 作者:Peter Nistru 机器之心编译 参与:思 最开始学 Python 时,如果我能掌握这些方法,那么代码看起来会更加优美. 在本文 ...

  5. html制作nba网页,NBA篮球_实用电脑小技巧：通俗解答html 自己动手建一个非常简单的网页_沪江英语...

    沪江小编:对于很多人来说,电脑应该算是使用频率最高的工具了,可是你真的会用电脑么?实用电脑小技巧,用最简单明了的方式给你无比有趣的电脑使用新体验. html是什么,什么是html通俗解答: 通俗的讲h ...

  6. 教师节html源码,教师节_实用电脑小技巧：通俗解答html 自己动手建一个非常简单的网页_沪江英语...

    沪江小编:对于很多人来说,电脑应该算是使用频率最高的工具了,可是你真的会用电脑么?实用电脑小技巧,用最简单明了的方式给你无比有趣的电脑使用新体验. html是什么,什么是html通俗解答: 通俗的讲h ...

  7. 工作中这些实用的小技巧，90%的程序员不知道

    工作中这些实用的小技巧,90%的程序员不知道 Linux 有些Linux命令我们是经常用的,但是这些命令有的特别长(如进入层级特别深的项目部署目录),这时就可以为这些命令定义一个别名 系统级别定义的别 ...

  8. Vim不常见但是很实用的命令技巧

    概述 Linux vi/vim Vim不常见但是很实用的命令技巧 命令 保存文件并退出 :x 和下面的命令是等价的: :wq 都是保存当前文件并退出. 区别:这两个命令实际上并不完全等价,当文件被修改 ...

  9. 25个实用编程小技巧

    点击上方"朱小厮的博客",选择"设为星标" 回复"1024"获取独家整理的学习资料 如果每个程序开发人员都只是周而复始地写代码,想必编程的工 ...

最新文章

  1. oracle修改时区无效,Oracle 时区问题
  2. Prometheus监控的最佳实践——关于监控的3项关键指标
  3. C#图片处理示例(裁剪,缩放,清晰度,水印)
  4. Unity3D基础API之Vector3
  5. ASP.NET Core实现类库项目读取配置文件
  6. javaweb登录系统账号密码验证等
  7. 论文总结：Fast and Light Bandwidth Testing for Internet Users(21‘ NSDI)
  8. immutable.js笔记
  9. php概率计算_替你总结一份MIT计算机课程
  10. 信息学奥赛一本通 2004：【20CSPJ普及组】优秀的拆分 | 洛谷 P7071 [CSP-J2020] 优秀的拆分
  11. ROR中简单的数据操作
  12. php 支持泛型,PHP对Java样式类的泛型有答案吗？
  13. 使用Microsoft Office Visio 2007 绘图
  14. 国内外云服务器运维面板有哪些？运维面板全面汇总
  15. Delphi Exif
  16. 1209 实验三同学评论
  17. 计算机打字教程ppt,计算机打字基础教学.ppt
  18. 基于springboot+mybatis+jsp日用品商城管理系统
  19. android 图片缩放，github开源库，PhotoView 使用
  20. 商业模式新生代之开放商业模式

热门文章

  1. Hashtable学习笔记
  2. Android Studio中引入RecyclerView的v7包
  3. pyqt stop停止线程_面试官：如何终止线程？有几种方式？
  4. Qt 数据库操作（一）
  5. stk 坐标系_STK中文用户手册.pdf
  6. html 正则表达式 中文,正则表达式的中文搜索
  7. 2021-03-15 final value theorem 终值定理
  8. 【学习笔记】【Design idea】一、Java异常的设计思想、性能相关、笔记
  9. 父类指针访问子类成员变量
  10. JSON.parse与eval的区别