给图片制作六边形阴影

啥也不说先上个效果图

Paste_Image.png

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

  • 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];

这样就完成只做了

制作阴影.gif

<a href="https://github.com/TenYuan/HexagonDemo">戳我看Demo</a>
感觉不错的给个星星哦

最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Core Animation Core Animation,中文翻译为核心动画,它是一组非常强大的动画处理API,...
    45b645c5912e阅读 3,195评论 0赞 21
  • #import "ChangeAnimationView.h" ``` @interface ChangeAnim...
    JinHuiZhang阅读 680评论 0赞 0
  • 前言 本文只要描述了iOS中的Core Animation(核心动画:隐式动画、显示动画)、贝塞尔曲线、UIVie...
    GitHubPorter阅读 3,792评论 7赞 11
  • 转载:http://www.jianshu.com/p/32fcadd12108 每个UIView有一个伙伴称为l...
    F麦子阅读 6,664评论 0赞 13
  • 今天是房东蒋老头这个月第四次敲响306的房门,房租已经拖欠两个月了,蒋老头下定决心今天要敲开306的门,告诉房客自...
    九丑_阅读 1,002评论 7赞 16

友情链接更多精彩内容