当前位置: 首页 > 编程笔记 >

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

江新
2023-03-14
本文向大家介绍iOS实现图片六边形阴影效果,包括了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有所帮助,如果有疑问大家可以留言交流。

 类似资料:
  • 本文向大家介绍Android实现图片阴影效果的方法,包括了Android实现图片阴影效果的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例介绍了Android实现图片阴影效果,设置画布颜色,图像倾斜效果,图片阴影效果的方法,采用canvas.save(Canvas.MATRIX_SAVE_FLAG);来实现。由于图片的实际尺寸比显示出来的图像要大一些,因此需要适当更改下大小,以达到较好的效果

  • 本文向大家介绍android shape实现阴影或模糊边效果,包括了android shape实现阴影或模糊边效果的使用技巧和注意事项,需要的朋友参考一下 1.实现阴影或模糊边效果方式: 2.通过shape来实现,具体是通过layer-list 多层叠放的方式实现的 使用: 顶部缩放了:android:top=2*5=10dp 总结 以上所述是小编给大家介绍的android shape实现阴影或模

  • 本文向大家介绍iOS实现卡片式滚动效果 iOS实现电影选片效果,包括了iOS实现卡片式滚动效果 iOS实现电影选片效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了iOS实现卡片式滚动效果的具体代码,供大家参考,具体内容如下 先来张效果图吧: 直接上源码了: CardScrollView.h CardScrollView.m 使用:ViewController.m 我一般习惯Sto

  • 本文向大家介绍Android实现图片添加阴影效果的2种方法,包括了Android实现图片添加阴影效果的2种方法的使用技巧和注意事项,需要的朋友参考一下 给图片添加阴影效果,这是很常见的需求。第一种方法是自定义drawable,使用layer-list定义两个图片,代码如下: show_view.xml: 在main.xml中定义一个textview作为待显示控件,将show_view.xml设为这

  • 本文向大家介绍IOS实现圆形图片效果的两种方法,包括了IOS实现圆形图片效果的两种方法的使用技巧和注意事项,需要的朋友参考一下 先来看看效果图 ↓ 这个显示效果的做法有很多: 方法一: 使用两张图片, 作为边框的背景图片和中间的图片,然后使用imageView的cornerRadius来做圆, 具体代码如下: 但是很显然, 今天的主角并不是上边的方法.上边的做法需要两张图片来完成带边框的圆形图片,

  • 本文向大家介绍iOS实现图片折叠效果,包括了iOS实现图片折叠效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了iOS实现图片折叠效果的具体代码,供大家参考,具体内容如下 效果图: 结构布局:拖两个UIImageView到控制器,设置相同的frame和图片,再拖一个大的UIImageView盖在上面,注意把大的imageView.userInteractionEnabled = Y