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

先来看看效果图

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

layer mask : 图层蒙版

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

UIBezierPath :绘制六边形路线

说完知识点下面上代码了

绘制六边形的路线

-(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

 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上,并绘制模糊阴影

 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有所帮助,如果有疑问大家可以留言交流。

(0)

相关推荐

  • iOS如何为圆角添加阴影效果示例代码

    前言 大家都知道在iOS中为UIView添加阴影还是比较简单的,只需要设置layer的shadow属性就可以了,但是问题在于设置阴影之后,必须设置masksToBounds为NO,而圆角图片则要求masksToBounds必须为YES,两者相互冲突,会导致无法正确的添加阴影.下面就来给大家介绍正确为圆角添加阴影的效果,话不多说了,来一起看看详细的介绍吧. 先来看看效果图: 正确的做法: 先创建一个透明的UIView,并添加阴影,设置masksToBounds为NO: 然后在透明的UIView上添

  • iOS设置圆角的三种方式

    第一种方法:通过设置layer的属性 最简单的一种,但是很影响性能,一般在正常的开发中使用很少. UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)]; //只需要设置layer层的两个属性 //设置圆角 imageView.layer.cornerRadius = imageView.frame.size.width / 2; //将多余的部分切掉 imageView

  • iOS为UIView设置阴影效果

    UIView的阴影设置主要通过UIView的layer的相关属性来设置 阴影的颜色 imgView.layer.shadowColor = [UIColor blackColor].CGColor; 阴影的透明度 imgView.layer.shadowOpacity = 0.8f; 阴影的圆角 imgView.layer.shadowRadius = 4.f; 阴影偏移量 imgView.layer.shadowOffset = CGSizeMake(4,4); imgView.layer.s

  • iOS中设置view圆角化的四种方法示例

    前言 在最近进行项目性能优化的过程中,遇到view圆角优化的问题,有一些粗略的看法,现总结一下.分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 设置圆角目前知道的有四种方法: 1.通过shapeLayer设置 2.通过view的layer设置 3.通过BezierPath设置 4.通过贴图的方式设置 1.shapeLayer的实现 通过bezizerpath设置一个路径,加到目标视图的layer上.代码如下: // 创建一个view UIView *showView = [[U

  • iOS实现圆角箭头矩形的提示框

    先来看看我们见过的一些圆角箭头矩形的提示框效果图 一.了解CGContextRef 首先需要对 CGContextRef 了解, 作者有机会再进行下详细讲解, 这篇中简单介绍下, 方便后文阅读理解. 先了解 CGContextRef 坐标系 坐标系 举例说明 : 对于 商城类App 有很多原价, 现价对比 .那 原件的横线怎么画, 就可以用CGContextRef - (void)drawRect:(CGRect)rect { // Drawing code [super drawRect:re

  • iOS应用开发中UIView添加边框颜色及设置圆角边框的方法

    UIView加边框及边框颜色 引用库: 复制代码 代码如下: #import <QuartzCore/QuartzCore.h> 使用: 复制代码 代码如下: //添加边框和提示         CGRect frameRect = CGRectMake(20, 90, self.window.frame.size.width-40, self.window.frame.size.height-180);         UIView   *frameView = [[UIView alloc

  • IOS设置按钮为圆角的示例代码

    iOS中很多时候都需要用到指定风格的圆角按钮,以下是UIButton提供的创建圆角按钮方法 设置按钮的4个角: 左上:UIRectCornerTopLeft 左下:UIRectCornerBottomLeft 右上:UIRectCornerTopRight 右下:UIRectCornerBottomRight 示例代码: UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(50, 60, 80, 40)]; button.b

  • iOS中设置圆角的几种方法示例

    前言 圆角(RounderCorner)是一种很常见的视图效果,相比于直角,它更加柔和优美,易于接受.但很多人并不清楚如何设置圆角的正确方式和原理.设置圆角会带来一定的性能损耗,如何提高性能是另一个需要重点讨论的话题.我查阅了一些现有的资料,收获良多的同时也发现了一些误导人错误. 1. 使用layer属性 layer.backgroundColor = [UIColor cyanColor].CGColor; // 给图层添加背景色 layer.contents = (id)[UIImage i

  • IOS设置UIView的边框为圆角详解及实例

    IOS设置UIView的边框为圆角 iOS 系统自带的 View 组件都是正方形的,看起来都太生硬,有时候我需要变成圆角形式,如下图: 具体的实现是使用QuartzCore库,下面我具体的描述一下实现过程: •    首先创建一个项目,名字叫:ipad_webwiew     •    利用Interface Builder添加一个UIWebView,然后和相应的代码相关联     •    添加QuartzCore.framework 代码实现: 头文件: #import <UIKit/UIK

  • iOS设置可选择圆角方向的控件圆角

    前言 这篇文章主要给大家介绍利用iOS如何设置可选择圆角方向的控件圆角,话不多说,以下是实现的示例代码,一起来看看吧. 示例代码 一.通过设置控件layer的cornerRadius来设置圆角 self.view.layer.cornerRadius =10.f;//如果设置圆角角度为半圆,则数值为控件高度的一半 self.view.layer.masksToBounds = YES;//是否删除多余的位置 二.通过贝塞尔曲线来设置圆角 UIBezierPath *maskPath = [UIB

随机推荐