UIBezierPath绘制虚线背景雷达图
效果图：
#import "SkinRadarChartsView.h"
#define P_M(x,y) CGPointMake(x, y)
@implementation SkinRadarChartsView
- (void)drawRect:(CGRect)rect {
// 数据源
NSMutableArray *datas = [NSMutableArray arrayWithArray:@[@"40",@"50",@"80",@"50",@"90",@"50"]];
NSMutableArray *titles = [NSMutableArray arrayWithArray:@[@"阴虚",@"痰湿",@"温热",@"血瘀等会电话",@"气郁",@"特禀"]];
// 画实圈、画虚圈
CGFloat dashPattern[] = {2,1}; // 实线长度为2，空白为1
// 线条宽度
CGFloat lineWidth = 1;
// 圆的半径
CGFloat radius = self.frame.size.width / 2.0;
// 圆圈个数
int count = 5;
// 圆环宽度
int margin = 25;
// 颜色区域是否绘制曲边线
BOOL isCurve = 0;
// 1.绘制圆环
for (int i = 0; i < count; i++) {
UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(margin * i, margin * i, self.frame.size.width - (i * (margin * 2)) , self.frame.size.width - (i * (margin * 2)))];
if (i != 0) {
// 设置虚线
[circlePath setLineDash:dashPattern count:1 phase:1];
}
[circlePath setLineWidth:lineWidth];
[[UIColor lightGrayColor] set];
// 线条拐角
circlePath.lineCapStyle = kCGLineCapRound;
// 终点处理
circlePath.lineJoinStyle = kCGLineJoinRound;
[circlePath stroke];
}
// 2.绘制穿插线（从圆心到最大圆斜线）
for (int i = 0; i < datas.count; i++) {
// 圆心的位置（radius，radius）
UIBezierPath *path = [UIBezierPath bezierPath];
// 起点圆心
[path moveToPoint:CGPointMake(radius, radius)];
// 线的终点
CGPoint endPoint = [self calCircleCoordinateWithCenter:CGPointMake(radius, radius) andWithAngle:i * (360 / datas.count) andWithRadius:radius];
[path addLineToPoint:endPoint];
// [path setLineDash:dashPattern count:1 phase:1];
[path setLineWidth:lineWidth];
[[UIColor lightGrayColor] set];
[path stroke];
}
// 3.获取数据源的每项point
// 获取value array里面的最大值
float maxValue = [[datas valueForKeyPath:@"@max.intValue"] floatValue];
NSMutableArray *pointArray = [[NSMutableArray alloc] init];
NSMutableArray *itemPointArray = [[NSMutableArray alloc] init];
for (int index = 0; index < datas.count; index++) {
// data point
CGPoint point = [self calCircleCoordinateWithCenter:CGPointMake(radius, radius) andWithAngle:index * (360 / datas.count) andWithRadius:[datas[index] floatValue] / maxValue * radius];
NSValue *value = [NSValue valueWithCGPoint:point];
[pointArray addObject:value];
// item point
CGPoint itemPoint = [self calCircleCoordinateWithCenter:CGPointMake(radius, radius) andWithAngle:index * (360 / datas.count) andWithRadius:radius];
NSValue *itemValue = [NSValue valueWithCGPoint:itemPoint];
[itemPointArray addObject:itemValue];
}
// 4.绘制涂层
UIBezierPath *path = [UIBezierPath bezierPath];
path.lineWidth = lineWidth;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineJoinRound;
for (int index = 0; index < pointArray.count; index++) {
CGPoint point = [pointArray[index] CGPointValue];
if (index == 0) {
[path moveToPoint:point];
} else {
//画曲线 找出控制点
if (isCurve) {
CGPoint nextP = [pointArray[index-1] CGPointValue];
CGPoint control1 = P_M(point.x + (nextP.x - point.x) / 2.0, nextP.y);
CGPoint control2 = P_M(point.x + (nextP.x - point.x) / 2.0, point.y);
[path addCurveToPoint:point controlPoint1:control1 controlPoint2:control2];
}
}
[path addLineToPoint:point];
// 5.绘制每项数据顶点的小圆点
UIView *doi = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 5, 5)];
doi.backgroundColor = [UIColor whiteColor];
doi.layer.borderWidth = 1;
doi.layer.borderColor = [[UIColor redColor] colorWithAlphaComponent:0.5].CGColor;
doi.layer.masksToBounds = YES;
doi.layer.cornerRadius = 2.5;
doi.center = point;
[self addSubview:doi];
}
[[[UIColor redColor] colorWithAlphaComponent:0.3] setFill];
[path fill];
// 6.绘制每项的标题
for (int index = 0 ; index < itemPointArray.count; index++) {
CGPoint p = [itemPointArray[index] CGPointValue];
CGFloat width = [self sb_string_max_size:[UIFont systemFontOfSize:12] text:titles[index] maxWidth:MAXFLOAT].width;
UILabel *item = [[UILabel alloc] initWithFrame:CGRectMake(6, 6, width, 40)];
item.text = titles[index];
item.font = [UIFont systemFontOfSize:12];
CGFloat angle = index*(360/datas.count);//角度
if (angle == 0) {
item.center = CGPointMake(p.x + width/2.0, p.y);
}else if (angle < 90){
item.center = CGPointMake(p.x + width/2.0, p.y - 10);
}else if (angle == 90){
item.center = CGPointMake(p.x , p.y-10);
}else if (angle < 180){
item.center = CGPointMake(p.x - width/2.0, p.y - 10);
}else if (angle == 180){
item.center = CGPointMake(p.x - width/2.0 , p.y);
}else if (angle < 270){
item.center = CGPointMake(p.x - width/2.0 , p.y + 10);
}else if (angle == 270){
item.center = CGPointMake(p.x , p.y+10);
}else if (angle > 270){
item.center = CGPointMake(p.x + width/2.0 , p.y + 10);
}
[self addSubview:item];
}
}
// 通过角度获取位置
- (CGPoint)calCircleCoordinateWithCenter:(CGPoint)center andWithAngle:(CGFloat)angle andWithRadius:(CGFloat)radius {
CGFloat x2 = radius * cosf(angle * M_PI / 180);
CGFloat y2 = radius *sinf(angle * M_PI / 180);
return CGPointMake(center.x + x2, center.y - y2);
}
- (CGSize)sb_string_max_size:(UIFont *)font text:(NSString *)text maxWidth:(CGFloat)maxWidth {
NSDictionary *attribute = @{NSFontAttributeName: font};
CGRect rect = [text boundingRectWithSize:CGSizeMake(maxWidth, CGFLOAT_MAX)
options:NSStringDrawingUsesLineFragmentOrigin
attributes:attribute
context:nil];
return rect.size;
}
@end
