使用CAShapeLayer实现复杂的View的遮罩效果
一、案例演示
最近在整理一个聊天的项目的时候,发送图片的时候,会有一个三角的指向效果,指向这张图片的发送者。服务端返回给我们的图片只是一张矩形的图片,我们如何把一张矩形的图片或者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的遮罩效果的更多相关文章
- IOS开发UI篇--使用CAShapeLayer实现复杂的View的遮罩效果
一.案例演示 最近在整理一个聊天的项目的时候,发送图片的时候,会有一个三角的指向效果,指向这张图片的发送者.服务端返回给我们的图片只是一张矩形的图片,我们如何把一张矩形的图片或者View,加上一层自定 ...
- iOS学习笔记: 使用CAShapeLayer创建带有空心区域的遮罩层
CAShapeLayer是用来接受矢量Path,直接使用GPU来进行渲染的特殊图层.看下面效果: 对应代码: let markLayer = CAShapeLayer(); markLayer.fra ...
- 【Android】Activity遮罩效果的实现
Activity文件 package com.app.test02; import android.app.Activity; import android.graphics.Color; impor ...
- Android之淘宝商品列表长按遮罩效果
先来看看淘宝.唯品会长按商品的效果,以及简单Demo的效果: 首先分析一下场景: 长按条目时,弹出遮罩的效果遮挡在原来的条目布局上: 页面滑动或点击其他的条目,上一个正在遮罩的条目遮罩消 ...
- 用CAShapeLayer写股市K线图动画效果
用CAShapeLayer写股市K线图动画效果 说明 入市有风险,炒股需谨慎.(因项目需求,本人提供了写这种效果的源码) 效果 源码 // // ViewController.m // Path // ...
- 用于mask遮罩效果的图片配合resizableImage使用
用于mask遮罩效果的图片配合resizableImage使用 效果: 作为素材用的图片: 源码: // // ViewController.m // Rect // // Created by Yo ...
- [读码][js,css3]能感知鼠标方向的图片遮罩效果
效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...
- 【原】使用Xfermode正确的绘制出遮罩效果
以前写as3的时候,遮罩效果一个mask属性就搞定了,真是方便. 转到android上以后,发现要实现类似的效果,可以使用Xfermode,android一共提供了三种: AvoidXfermode; ...
- ext.ajax.request请求时带有遮罩效果
ajax请求时有时需要操作大量的数据,反应有时会很慢,这时我们想要来一个遮罩效果,具体步骤如下 1.定义一个遮罩 var myMask = new Ext.LoadMask(Ext.getBody() ...
随机推荐
- codevs1074 食物链
1074 食物链 2001年NOI全国竞赛 时间限制: 3 s 空间限制: 64000 KB 题目等级 : 钻石 Diamond 题解
- MySQL事务学习
- SQL Server插入中文乱码
如果数据库的Collocation是英文的,字段是varchar类型,向表中插入中文数据,会出现乱码. 解决方法: 方法1. 修改varchar 为 nvarchar类型, 并在插入数据前加N,例如: ...
- Eclipse中各图标含义
Eclipse中定义很多小图标,在平时的开发工作中,熟悉这些小图标还是很有意义的.那具体意义大家又知道多少呢? 首先,通过在搜索“eclipse icon meaning”,找到了一个比较有用的链接, ...
- VlAN-9-存储VLAN配置
vlan和vtp配置可能存储在vlan.dat和运行配置中 对于vtp v3来说无论哪种模式正常和拓展范围的vlan都被存储在vlan.dat文件中,如果为透明或off,vlan配置也会出现在运行配置 ...
- DRF教程8-过滤
在写后端api时,经常需要使用各种过滤条件,可以使用Q对查询集进行过滤,这里介绍一个新玩意儿 以下是基础文档 https://django-filter.readthedocs.io/en/maste ...
- Python web前端 10 bootstrp
Python web前端 10 bootstrp 1.媒体查询 <style> *{ margin: 0; padding: 0; } div{ width: 110px; height: ...
- Educational Codeforces Round 66 (Rated for Div. 2) B. Catch Overflow!
链接:https://codeforces.com/contest/1175/problem/B 题意: You are given a function ff written in some bas ...
- HDU-1150-MachineSchedule(二分图匹配)
链接:https://vjudge.net/problem/HDU-1150#author=0 题意: 在一个工厂,有两台机器A,B生产产品.A机器有n种工作模式(模式0,模式1....模式n-1). ...
- Linux+.NetCore+Nginx
Linux+.NetCore+Nginx搭建集群 本篇和大家分享的是Linux+NetCore+Nginx搭建负载集群,对于netcore2.0发布后,我一直在看官网的文档并学习,关注有哪些新增的东西 ...