一、案例演示

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

二、实现机制

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

三、实现代码

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

@implementation CAShapeLayer (ViewMask)

+ (instancetype)createMaskLayerWithView : (UIView *)view{

    CGFloat viewWidth = CGRectGetWidth(view.frame);
CGFloat viewHeight = CGRectGetHeight(view.frame); CGFloat rightSpace = .;
CGFloat topSpace = .; CGPoint point1 = CGPointMake(, );
CGPoint point2 = CGPointMake(viewWidth-rightSpace, );
CGPoint point3 = CGPointMake(viewWidth-rightSpace, topSpace);
CGPoint point4 = CGPointMake(viewWidth, topSpace);
CGPoint point5 = CGPointMake(viewWidth-rightSpace, topSpace+.);
CGPoint point6 = CGPointMake(viewWidth-rightSpace, viewHeight);
CGPoint point7 = CGPointMake(, 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

四、调用方式

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(, , , )];
view.backgroundColor = [UIColor orangeColor];
[self.view addSubview:view]; CAShapeLayer *layer = [CAShapeLayer createMaskLayerWithView:view];
view.layer.mask = layer;

使用CAShapeLayer实现复杂的View的遮罩效果的更多相关文章

  1. IOS开发UI篇--使用CAShapeLayer实现复杂的View的遮罩效果

    一.案例演示 最近在整理一个聊天的项目的时候,发送图片的时候,会有一个三角的指向效果,指向这张图片的发送者.服务端返回给我们的图片只是一张矩形的图片,我们如何把一张矩形的图片或者View,加上一层自定 ...

  2. iOS学习笔记: 使用CAShapeLayer创建带有空心区域的遮罩层

    CAShapeLayer是用来接受矢量Path,直接使用GPU来进行渲染的特殊图层.看下面效果: 对应代码: let markLayer = CAShapeLayer(); markLayer.fra ...

  3. 【Android】Activity遮罩效果的实现

    Activity文件 package com.app.test02; import android.app.Activity; import android.graphics.Color; impor ...

  4. Android之淘宝商品列表长按遮罩效果

    先来看看淘宝.唯品会长按商品的效果,以及简单Demo的效果:        首先分析一下场景: 长按条目时,弹出遮罩的效果遮挡在原来的条目布局上: 页面滑动或点击其他的条目,上一个正在遮罩的条目遮罩消 ...

  5. 用CAShapeLayer写股市K线图动画效果

    用CAShapeLayer写股市K线图动画效果 说明 入市有风险,炒股需谨慎.(因项目需求,本人提供了写这种效果的源码) 效果 源码 // // ViewController.m // Path // ...

  6. 用于mask遮罩效果的图片配合resizableImage使用

    用于mask遮罩效果的图片配合resizableImage使用 效果: 作为素材用的图片: 源码: // // ViewController.m // Rect // // Created by Yo ...

  7. [读码][js,css3]能感知鼠标方向的图片遮罩效果

    效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...

  8. 【原】使用Xfermode正确的绘制出遮罩效果

    以前写as3的时候,遮罩效果一个mask属性就搞定了,真是方便. 转到android上以后,发现要实现类似的效果,可以使用Xfermode,android一共提供了三种: AvoidXfermode; ...

  9. ext.ajax.request请求时带有遮罩效果

    ajax请求时有时需要操作大量的数据,反应有时会很慢,这时我们想要来一个遮罩效果,具体步骤如下 1.定义一个遮罩 var myMask = new Ext.LoadMask(Ext.getBody() ...

随机推荐

  1. 升级了git版本后git clone报ssl错误的解决方法

    由于升级了git版本,git clone 的时候报了如下的错误 fatal: unable to access 'https://github.com/open-falcon/falcon-plus. ...

  2. Java IO 输入和输出流

    数据流是指一组有顺序的,有起点和终点的字节集合. 最初的版本中,java.io 包中的流只有普通的字节流,即以 byte 为基本处理单位的流.字节流用来读写 8 位的数据,由于不会对数据做任何转换,因 ...

  3. python——字符编码

    Unicode 是字符集 UTF-8 是编码规则 Unicode:给每一个字符分配一个唯一的ID(又称码位). 编码规则:将码位转换为字节序列的规则. 1.什么是字符编码:字符翻译成数字,所遵循的标准 ...

  4. Tomcat,Apache,JBoss的区别

    1.Apache是Http服务器,Tomcat是web服务器,JBoss是应用服务器. 2.Apache解析静态的html文件:Tomcat可解析jsp动态页面.也可充当servlet容器. 详细内容 ...

  5. JMeter(6) jenkins测试报告及邮件优化

    jenkins邮件 使用jenkins执行完任务自动将测试结果发送到邮箱,效果如下:     生成html报告 build文件设置     jenkins设置 SummaryReport写入邮件正文 ...

  6. 字典排序permutation

    理论 C++ 中的next_permutation 一般作为正序全排列的使用规则,其实这个就是正序字典排序的实现. 比如我们要对 列表 [1,2,3]  做full permutation 一般使用递 ...

  7. NET Core实现OAuth2.0的ResourceOwnerPassword和ClientCredentials模式

    NET Core实现OAuth2.0的ResourceOwnerPassword和ClientCredentials模式 前言 开发授权服务框架一般使用OAuth2.0授权框架,而开发Webapi的授 ...

  8. 微信支付(java版本)_支付结果通知

    应用场景: 支付完成后,微信会把相关支付结果和用户信息发送给商户,商户需要接收处理,并返回应答. 对后台通知交互时,如果微信收到商户的应答不是成功或超时,微信认为通知失败,微信会通过一定的策略定期重新 ...

  9. go 从表结构生成结构体

    package main import ( "fmt" "github.com/gohouse/converter" ) func main() { // 初始 ...

  10. .net core 的跨域

    .net core 的跨域问题花了 我很长时间 接下来我简单的描述下解决过程 首先我在前端用jquery的ajax去调用自己的本地接口大致如下 $.ajax({ type:"POST&quo ...