历经1个多月项目刚刚做完，迫不及待地想把项目中遇到的各种奇葩需求和问题记录一下，以为后来人提供一些思路。
具体需求：把若干个栏目名称以正六边形的形式显示在页面上，通过点击有一些状态上的变化。最后效果如下图：
效果图
需求分析：类似于UICollectionView，由一个六边形的cell组成，还有一点需要确定，多个cell在一起该怎么排列，也就是各个cell的位置，我们这个要求第一个在中间，第二个在第一个正底下，然后以第二个为起始点顺时针画六边形，然后外层6个cell中心点连起线又构成了一个正六边形。下面就开始绘制：
首先画单个正六边形，这里我们采用UIBezierPath（贝塞尔曲线）进行绘制：
自定义一个继承CAShapeLayer的layer对象
h文件中定义对应属性和接口
@property (nonatomic, copy) NSString *titleStr;
@property (nonatomic, assign, readonly) CGFloat sideLength;
@property (nonatomic, assign, getter=isSelected) BOOL selected;
+ (instancetype)layerWithSideLength:(CGFloat)sideLength;
m文件中引入对应头文件并实现对应接口
这里主要是获取到正六边形对应的6个顶点的坐标（中心点为原点），没2个点连起来就是一条边，6个点一次链接就形成了正六边形，具有实现如下：
//构造方法
+ (instancetype)layerWithSideLength:(CGFloat)sideLength {//sideLength为六边形变长
XGPHexagonsLayer *layer = [XGPHexagonsLayer layer];
CGFloat utilAngle =M_PI/3; //定义相应弧度，这里可以将单个六边形分为6个等边三角形，在一个等边三角形里根据直角三角形勾股定理算出每一个顶点的坐标。
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(sideLength *0.5,cos(utilAngle *0.5) * sideLength)];
[path addLineToPoint:CGPointMake(- sideLength *0.5,cos(utilAngle *0.5) * sideLength)];
[path addLineToPoint:CGPointMake(-sideLength,0)];
[path addLineToPoint:CGPointMake(- sideLength *0.5, -cos(utilAngle *0.5) * sideLength)];
[path addLineToPoint:CGPointMake(sideLength *0.5, -cos(utilAngle *0.5) * sideLength)];
[path addLineToPoint:CGPointMake(sideLength,0)];
[path addLineToPoint:CGPointMake(sideLength *0.5,cos(utilAngle *0.5) * sideLength)];
layer.path= path.CGPath;
以上代码就画出了正六边形，这里调整顶点坐标可以旋转正六边形。以下代码主要是设置正六边形的相关属性，这里不做赘述。
layer.fillColor = UIColor.clearColor.CGColor;//空心
layer.strokeColor = UIColor .blackColor.CGColor;//黑边
layer.bounds=CGRectMake(0,0, sideLength *2,sin(utilAngle) * sideLength *2);
layer->_sideLength= sideLength;
CGFloattextHeight =20.f;
CATextLayer*textLayer = [CATextLayerlayer];
// textLayer.backgroundColor = UIColor.redColor.CGColor;
textLayer.bounds=CGRectMake(0,0,60, textHeight);
textLayer.position = CGPointMake(layer.position.x, layer.position.y);
textLayer.contentsScale = [UIScreen mainScreen].scale;
textLayer.alignmentMode = kCAAlignmentCenter;
// textLayer.wrapped = YES;
[layer addSublayer:textLayer];
NSMutableAttributedString *string = nil;
string = [[NSMutableAttributedString alloc] initWithString:@"测试测试测试"];
UIFont*font = [UIFontsystemFontOfSize:15];
CGFloat fontSize = font.pointSize;
CFStringRef fontName = (__bridgeCFStringRef)font.fontName;
CTFontRef fontRef =CTFontCreateWithName(fontName, fontSize,NULL);
NSDictionary*attribs =@{
(__bridge id)kCTForegroundColorAttributeName:(__bridge id)[UIColor blackColor].CGColor,
(__bridgeid)kCTFontAttributeName: (__bridgeid)fontRef
};
[stringsetAttributes:attribsrange:NSMakeRange(0, string.length)];
textLayer.string= string;
CFRelease(fontRef);
returnlayer;
}
下面就是通过自定义view来有序的排列单个六边形来形成最终的效果图，这里的绘制思路是把外层的每一个中心点看作新六边形的顶点来处理
CGFloatutilAngle =M_PI/3;
CGFloatutilWidth =_utilWidth;
CGFloatmargin =_margin;
CGFloatpointX =self.bounds.size.width/2+ utilWidth;
CGFloatpointY =self.bounds.size.height/2+ utilWidth *sin(utilAngle);
//层数 最多3层 20个正六边形 i是每一层的第几个
NSIntegerrow =0, i=0;
if(index==0) {
row =0;
i =0;
layer.position=CGPointMake(pointX, pointY);
}elseif(index<=6) {
row =1;
i = index;
//形成的新六边形变长
CGFloatnewWidth = (2*utilWidth*cos(utilAngle /2)+margin);
layer.position=CGPointMake(pointX+cos(utilAngle * (0.5+i)) * newWidth, pointY+sin(utilAngle * (0.5+i)) * newWidth);
}else{
row =2;
CGFloatnewWidth =2* (2*utilWidth*cos(utilAngle /2)+margin);
if(index%2!=0) {
layer.position=CGPointMake(pointX+cos(utilAngle * (0.5+(index/2-2))) * newWidth, pointY+sin(utilAngle * (0.5+(index/2-2))) * newWidth);
}else{
CGFloatnewWidth1 = (2* utilWidth*cos(utilAngle /2)+margin) *sin(utilAngle) *2;
layer.position=CGPointMake(pointX+cos(utilAngle * ((index/2)-2)) * newWidth1, pointY+sin(utilAngle * ((index/2)-2)) * newWidth1);
}
}
有任何错误或者疑点都可以私信我。
网友评论