ios-绘制六边形

Simulator Screen Shot 2017年5月18日 16.58.00.png

当在做项目app的开发时,UI会经常设计一些不同形状的头像显示,一般常见的形状为圆形,当然 也有省事的正方形,还有一些UI会设计头像为其他形状,本文讲解的就是头像或者类似排行榜之类的六边形,六边形也是常见的形状,以下要讲的就是如何绘制六边形,并给六边形加个边框.
我这里给ImageView添加分类,将分类的方法写在分类中,方便创建多个多边形,这里也少不了使用UIBezierPath
在UIImageView+KWSexangle.h公开一个方法

#import <UIKit/UIKit.h>

@interface UIImageView (KWSexangle)
/**
 *  绘制六边形
 */
- (instancetype)initWithDrawSexangleWithImageViewWidth:(CGFloat)width withLineWidth:(CGFloat)lineWidth withStrokeColor:(UIColor *)color;

@end

    在UIImageView+KWSexangle.m中实现方法,我这里写了三个方法,可以直观看到如何计算六边形的UIBezierPath和设置Layer

#import "UIImageView+KWSexangle.h"

@implementation UIImageView (KWSexangle)

- (instancetype)initWithDrawSexangleWithImageViewWidth:(CGFloat)width withLineWidth:(CGFloat)lineWidth withStrokeColor:(UIColor *)color {
    self = [super init];
    if (self) {
        [self drawSexangleWithImageViewWidth:width withLineWidth:lineWidth withStrokeColor:color];
    }
    return self;
}

/** 添加ImageView的Layer*/
- (void)drawSexangleWithImageViewWidth:(CGFloat)width withLineWidth:(CGFloat)lineWidth withStrokeColor:(UIColor *)color {
    
    //在绘制layer之前先把之前添加的layer移除掉，如果不这么做，你就会发现设置多次image 之后，本view的layer上就会有多个子layer，
    [self.layer.sublayers enumerateObjectsUsingBlock:^(CALayer * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
        [obj removeFromSuperlayer];
    }];
    
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = [self getCGPath:width];
    shapeLayer.strokeColor = color.CGColor;
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    shapeLayer.lineWidth = lineWidth;
    
    CAShapeLayer *shapLayer = [CAShapeLayer layer];
    shapLayer.path = [self getCGPath:width];
    self.layer.mask = shapLayer;
    /** 将shapeLayer添加到shapLayer上方*/
    [self.layer insertSublayer:shapeLayer above:shapLayer];
    
}

/** 计算菱形的UIBezierPath*/
- (CGPathRef)getCGPath:(CGFloat)width {
    
    UIBezierPath * path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake((sin(M_1_PI / 180 * 60)) * (width / 2), (width / 4))];
    [path addLineToPoint:CGPointMake((width / 2), 0)];
    [path addLineToPoint:CGPointMake(width - ((sin(M_1_PI / 180 * 60)) * (width / 2)), (width / 4))];
    [path addLineToPoint:CGPointMake(width - ((sin(M_1_PI / 180 * 60)) * (width / 2)), (width / 2) + (width / 4))];
    [path addLineToPoint:CGPointMake((width / 2), width)];
    [path addLineToPoint:CGPointMake((sin(M_1_PI / 180 * 60)) * (width / 2), (width / 2) + (width / 4))];
    [path closePath];
    return path.CGPath;
    
}

@end

    接下来就是在需要的地方创建ImageView实现功能了

self.imageV = [[UIImageView alloc] initWithDrawSexangleWithImageViewWidth:100 withLineWidth:4 withStrokeColor:[UIColor greenColor]];
    self.imageV.frame = CGRectMake(100, 100, 100, 100);
    self.imageV.image = [UIImage imageNamed:@"7.jpg"];
    self.imageV.userInteractionEnabled = YES;
    [self.view addSubview:self.imageV];
    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(clickToUpdateImage:)];
    [self.imageV addGestureRecognizer:tap];

- (void)clickToUpdateImage:(UITapGestureRecognizer *)tap {
    NSLog(@"updateImage");
}

注意  :  我在添加手势的时候遇到过无法点击的问题,设置self.imageV.userInteractionEnabled = YES;可以解决这个问题,应该是绘制的时候默认将userInteractionEnabled设置为NO导致的

这样就可以绘制完成带有边框的六边形ImageView了,当然带不带边框就有你决定了.