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

2022-10-21

这篇文章给大家分享了如何利用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有所帮助,如果有疑问大家可以留言交流。

您可能感兴趣的文章:

  • iOS为UIView设置阴影效果
  • iOS应用开发中UIView添加边框颜色及设置圆角边框的方法
  • iOS实现圆角箭头矩形的提示框
  • IOS设置按钮为圆角的示例代码
  • iOS设置圆角的三种方式
  • iOS设置可选择圆角方向的控件圆角
  • iOS中设置圆角的几种方法示例
  • IOS设置UIView的边框为圆角详解及实例
  • iOS中设置view圆角化的四种方法示例
  • iOS如何为圆角添加阴影效果示例代码

《iOS实现图片六边形阴影效果.doc》

下载本文的Word格式文档,以方便收藏与打印。