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了,当然带不带边框就有你决定了.
