服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - IOS - iOS实现图片六边形阴影效果

iOS实现图片六边形阴影效果

2021-01-31 19:53等风的旺旺 IOS

这篇文章给大家分享了如何利用iOS实现图片六边形阴影的效果,文中给出实现的示例代码,对大家的理解和学习很有帮助,有需要的可以参考借鉴,下面来一起看看吧。

先来看看效果图

iOS实现图片六边形阴影效果

这个效果写起来挺简单,主要运用下面几个知识点

     layer mask : 图层蒙版

     layer shadowpath : 绘制自定义形状阴影

     uibezierpath :绘制六边形路线

说完知识点下面上代码了

绘制六边形的路线

?
1
2
3
4
5
6
7
8
9
10
11
12
13
-(cgpathref)getcgpath:(cgfloat)viewwidth{
 uibezierpath * path = [uibezierpath bezierpath];
 path.linewidth = 2;
 [[uicolor whitecolor] setstroke];
 [path movetopoint:cgpointmake((sin(m_1_pi / 180 * 60)) * (viewwidth / 2), (viewwidth / 4))];
 [path addlinetopoint:cgpointmake((viewwidth / 2), 0)];
 [path addlinetopoint:cgpointmake(viewwidth - ((sin(m_1_pi / 180 * 60)) * (viewwidth / 2)), (viewwidth / 4))];
 [path addlinetopoint:cgpointmake(viewwidth - ((sin(m_1_pi / 180 * 60)) * (viewwidth / 2)), (viewwidth / 2) + (viewwidth / 4))];
 [path addlinetopoint:cgpointmake((viewwidth / 2), viewwidth)];
 [path addlinetopoint:cgpointmake((sin(m_1_pi / 180 * 60)) * (viewwidth / 2), (viewwidth / 2) + (viewwidth / 4))];
 [path closepath];
 return path.cgpath;
}

绘制一个六边形的layer,并把image 赋值到contents

?
1
2
3
4
5
6
7
8
9
10
cgrect hexagnorect = self.bounds;
//绘制一个六边形的layer,并复制一个image给他的contents
calayer *hexagonlayer = [calayer layer];
hexagonlayer.frame = hexagnorect;
cashapelayer * shaplayer = [cashapelayer layer];
shaplayer.linewidth = 1;
shaplayer.strokecolor = [uicolor whitecolor].cgcolor;
shaplayer.path = [self getcgpath:hexagnorect.size.width-20];
hexagonlayer.mask = shaplayer;
hexagonlayer.contents = (__bridge id _nullable)(self.image.cgimage);

创建一个calayer,将六边形layer 添加到calayer上,并绘制模糊阴影

?
1
2
3
4
5
6
7
8
9
calayer *completelayer = [calayer layer];
completelayer.frame = cgrectmake(10, 10, self.bounds.size.width-10, self.bounds.size.height-10);
[completelayer addsublayer:hexagonlayer];
completelayer.shadowopacity = 1.0f;
completelayer.shadowpath = [self getcgpath:hexagnorect.size.width];
completelayer.shadowoffset = cgsizemake(-10, -10);
 
completelayer.shadowcolor = self.hg_shadowcolor.cgcolor;
[self.layer addsublayer:completelayer];

总结

好了,以上就是在ios中实现图片六边形的全部内容了,希望本文能对大家开发ios有所帮助,如果有疑问大家可以留言交流。

延伸 · 阅读

精彩推荐
  • IOS解析iOS开发中的FirstResponder第一响应对象

    解析iOS开发中的FirstResponder第一响应对象

    这篇文章主要介绍了解析iOS开发中的FirstResponder第一响应对象,包括View的FirstResponder的释放问题,需要的朋友可以参考下...

    一片枫叶4662020-12-25
  • IOSiOS通过逆向理解Block的内存模型

    iOS通过逆向理解Block的内存模型

    自从对 iOS 的逆向初窥门径后,我也经常通过它来分析一些比较大的应用,参考一下这些应用中某些功能的实现。这个探索的过程乐趣多多,不仅能满足自...

    Swiftyper12832021-03-03
  • IOSIOS开发之字典转字符串的实例详解

    IOS开发之字典转字符串的实例详解

    这篇文章主要介绍了IOS开发之字典转字符串的实例详解的相关资料,希望通过本文能帮助到大家,让大家掌握这样的方法,需要的朋友可以参考下...

    苦练内功5832021-04-01
  • IOSiOS 雷达效果实例详解

    iOS 雷达效果实例详解

    这篇文章主要介绍了iOS 雷达效果实例详解的相关资料,需要的朋友可以参考下...

    SimpleWorld11022021-01-28
  • IOSiOS中tableview 两级cell的展开与收回的示例代码

    iOS中tableview 两级cell的展开与收回的示例代码

    本篇文章主要介绍了iOS中tableview 两级cell的展开与收回的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...

    J_Kang3862021-04-22
  • IOSIOS 屏幕适配方案实现缩放window的示例代码

    IOS 屏幕适配方案实现缩放window的示例代码

    这篇文章主要介绍了IOS 屏幕适配方案实现缩放window的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要...

    xiari5772021-06-01
  • IOS关于iOS自适应cell行高的那些事儿

    关于iOS自适应cell行高的那些事儿

    这篇文章主要给大家介绍了关于iOS自适应cell行高的那些事儿,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的...

    daisy6092021-05-17
  • IOSiOS布局渲染之UIView方法的调用时机详解

    iOS布局渲染之UIView方法的调用时机详解

    在你刚开始开发 iOS 应用时,最难避免或者是调试的就是和布局相关的问题,下面这篇文章主要给大家介绍了关于iOS布局渲染之UIView方法调用时机的相关资料...

    windtersharp7642021-05-04