iOS 雷达图的绘制 贝塞尔曲线的使用UIBezierPath

之前一直抱着一种不很好的态度去写代码，不求甚解，不会就google，现在感觉长期这样是不行的，必须自己也依靠实践经验去写一写框架，发现并不难，于是写了一个使用起来很舒服的图表，可随意定制。后面还将上传封装清晰的“柱状图”上传，供大家交流学习。

QQ20170424-191250.png 需求效果图

beisaierView.h
beisaierView.m

//  beisaierView.h
//  dxd_贝塞尔
//
//  Created by 窦心东 on 2017/4/20.
//  Copyright © 2017年 窦心东. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface beisaierView : UIView

/** 头像的图片 */
@property (nonatomic,strong) UIImage *header_image;
/** 数据源数组 */
@property (nonatomic,strong) NSArray *value_array;
/** 数据元素的名称 */
@property (nonatomic,strong) NSArray *title_array;
/** 圆半径 */
@property (nonatomic,assign) CGFloat cirlR;
/** 头像的半径边框的宽度 */
@property (nonatomic,assign) CGFloat headerimageBoderWidth;
/** 头像的宽度 */
@property (nonatomic,assign) CGFloat headerimageWidth;
/** 小白点 */
@property (nonatomic,assign) CGFloat whiteDianWdith;
/** 小白点边框的宽度  */
@property (nonatomic,assign) CGFloat whiteDianBoderWdith;

/** label的宽度 */
@property (nonatomic,assign) CGFloat labelWidth;
/** label的宽度 */
@property (nonatomic,assign) CGFloat labelHeight;

/** 图层的颜色 */
@property (nonatomic,strong) UIColor *TuCengColor;
/** 圆环的颜色 */
@property (nonatomic,strong) UIColor *cirlColor;
/** 圆环之间的间距 */
@property (nonatomic,assign) CGFloat cirlMargin;

/** 小图层减少大图层值得比例 百分比 small_percent*cirlR*/
@property (nonatomic,assign) CGFloat small_percent;
@end

//
//  beisaierView.m
//  dxd_贝塞尔
//
//  Created by 窦心东 on 2017/4/20.
//  Copyright © 2017年 窦心东. All rights reserved.
//

#import "beisaierView.h"
#define ColorWithHEAL [UIColor colorWithRed:0/255.0f green:197/255.0f blue:188/255.0f alpha:1]//大图层的颜色
#define ColorWithHEALa [UIColor colorWithRed:0/255.0f green:197/255.0f blue:188/255.0f alpha:0.3]//小图层的颜色
#define P_M(x,y) CGPointMake(x, y)
@interface beisaierView (){
    
    
}

/** self 的宽度 */
@property (nonatomic,assign) CGSize beisaierView_size;

@end

@implementation beisaierView
-(instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
        [self setUI];
        
    }
    return self;
    
}
- (void)setUI{
    
    _beisaierView_size = self.frame.size;
    _cirlR = _beisaierView_size.width/2;
    _whiteDianWdith = 5;
    _labelWidth = 50;
    _labelHeight = 30;
    _TuCengColor = ColorWithHEAL;
    _cirlColor = [UIColor lightGrayColor];
    _cirlMargin = 30;
    _value_array = @[@"40",@"50",@"80",@"50",@"90",@"50",@"70",@"90",@"30"];
    _title_array = @[@"阴虚",@"痰湿",@"温热",@"血瘀",@"气郁",@"特禀",@"平和",@"气虚",@"阳虚"];
    _headerimageWidth = 20;
    _small_percent = 0.2;
    _whiteDianBoderWdith = 1;
    _headerimageBoderWidth = 1;
    _header_image = [UIImage imageNamed:@"背景.jpg"];
}

-(void)setValue_array:(NSArray *)value_array{
    _value_array = value_array;
}
-(void)setTitle_array:(NSArray *)title_array{
    _title_array = title_array;
}
-(void)setCirlR:(CGFloat)cirlR{
    _cirlR = cirlR;
}
-(void)setWhiteDianWdith:(CGFloat)whiteDianWdith{
    _whiteDianWdith = whiteDianWdith;
}
-(void)setWhiteDianBoderWdith:(CGFloat)whiteDianBoderWdith{
    _whiteDianBoderWdith = whiteDianBoderWdith;
}
-(void)setLabelWidth:(CGFloat)labelWidth{
    _labelWidth = labelWidth;
}
-(void)setLabelHeight:(CGFloat)labelHeight{
    _labelHeight = labelHeight;
}
-(void)setCirlColor:(UIColor *)cirlColor{
    _cirlColor = cirlColor;
}
-(void)setTuCengColor:(UIColor *)TuCengColor{
    _TuCengColor = TuCengColor;
}
-(void)setCirlMargin:(CGFloat)cirlMargin{
    _cirlMargin = cirlMargin;
}
-(void)setHeaderimageWidth:(CGFloat)headerimageWidth{
    _headerimageWidth = headerimageWidth;
}
-(void)setHeaderimageBoderWidth:(CGFloat)headerimageBoderWidth{
    _headerimageBoderWidth = headerimageBoderWidth;
}
-(void)setSmall_percent:(CGFloat)small_percent{
    _small_percent = small_percent;
}
-(void)setHeader_image:(UIImage *)header_image{
    _header_image = header_image;
}
-(void)layoutSubviews{
    [super layoutSubviews];
    //设置frame
    
}


#pragma mark - 空心圆
- (void)drawRect:(CGRect)rect
{
    //画虚线的
    CGFloat dashPattern[] = {2,1};// 实线长为2，空白为1
    CGFloat lineWidth = 0.5;
    
    CGFloat _headerimageR = _headerimageWidth/2;//头像的半径
    
    //画多少个圆环
    for (int i = 0; i<3; i++) {
        UIBezierPath* aPath_yuanhuan = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(i*_cirlMargin, i*_cirlMargin, _beisaierView_size.width-(i*_cirlMargin*2), _beisaierView_size.width-(i*_cirlMargin*2))];
        [aPath_yuanhuan setLineDash:dashPattern count:1 phase:1];
        aPath_yuanhuan.lineWidth = lineWidth;
        [_cirlColor set];
        aPath_yuanhuan.lineCapStyle = kCGLineCapRound; //线条拐角
        aPath_yuanhuan.lineJoinStyle = kCGLineCapRound; //终点处理
        [aPath_yuanhuan stroke];
    }
    float maxValue = [[_value_array valueForKeyPath:@"@max.intValue"] floatValue];//value array里面的最大值
    UIBezierPath* aPath = [UIBezierPath bezierPath];//🌿外边的😊大图层
    aPath.lineWidth = 1.0;
    aPath.lineCapStyle = kCGLineCapRound; //线条拐角
    aPath.lineJoinStyle = kCGLineCapRound; //终点处理
    
    UIBezierPath* aPathsmall = [UIBezierPath bezierPath];//🌿里边的😊小图层
    aPathsmall.lineWidth = 1.0;
    aPathsmall.lineCapStyle = kCGLineCapRound; //线条拐角
    aPathsmall.lineJoinStyle = kCGLineCapRound; //终点处理
    
    NSMutableArray *pointArray = [NSMutableArray array];//大图层的顶点位置
    NSMutableArray *pointArraysmall = [NSMutableArray array];//小涂层的顶点位置
    
    //提取出大小图层的point
    for (int i = 0; i<_value_array.count; i++) {
        
        NSValue *value = [NSValue valueWithCGPoint:[self calcCircleCoordinateWithCenter:CGPointMake(_cirlR, _cirlR) andWithAngle:i*(360/_value_array.count) andWithRadius:([_value_array[i] floatValue]/maxValue+(_headerimageR+_whiteDianWdith+_whiteDianBoderWdith+_headerimageBoderWidth)/_cirlR)*(_cirlR-_headerimageR-_whiteDianBoderWdith-_whiteDianWdith-_headerimageBoderWidth)]];//20为头像的半径
        
        [pointArray addObject:value];
        
        NSValue *valuesmall = [NSValue valueWithCGPoint:[self calcCircleCoordinateWithCenter:CGPointMake(_cirlR, _cirlR) andWithAngle:i*(360/_value_array.count) andWithRadius:([_value_array[i] floatValue]/maxValue+(_headerimageR+_whiteDianBoderWdith+_headerimageBoderWidth)/_cirlR-_small_percent)*(_cirlR-_headerimageR-_whiteDianBoderWdith-_whiteDianWdith-_headerimageBoderWidth)]];//20为头像的半径
        
        [pointArraysmall addObject:valuesmall];
        
        
        
    }
    
    for (int i = 0; i<pointArray.count; i++) {
        UIBezierPath *path3 = [UIBezierPath bezierPath];
        [path3 moveToPoint:CGPointMake(_cirlR,_cirlR)];
        CGPoint pointyuanshangde = [self calcCircleCoordinateWithCenter:CGPointMake(_cirlR,_cirlR) andWithAngle:i*(360/pointArray.count) andWithRadius:_cirlR];
        [path3 addLineToPoint:pointyuanshangde];
        [path3 setLineWidth:lineWidth];
        [path3 setLineDash:dashPattern count:1 phase:1];
        [[UIColor lightGrayColor] setStroke];
        [path3 stroke];//画的圆环
        CGPoint p = [pointArray[i] CGPointValue];
        CGPoint psmall = [pointArraysmall[i] CGPointValue];
        
        if (i == 0) {
            [aPath moveToPoint:p];
            [aPathsmall moveToPoint:psmall];
        }else{
            //画曲线 找出控制点
            //            CGPoint nextP = [pointArray[i-1] CGPointValue];
            //            CGPoint control1 = P_M(p.x + (nextP.x - p.x) / 2.0, nextP.y);
            //            CGPoint control2 = P_M(p.x + (nextP.x - p.x) / 2.0, p.y);
            //
            //            [aPath addCurveToPoint:p controlPoint1:control1 controlPoint2:control2];
        }
        
        [aPath addLineToPoint:p];
        [aPathsmall addLineToPoint:psmall];
        [ColorWithHEALa setFill];
        
        
        UIView *cile = [[UIView alloc] initWithFrame:CGRectMake(0, 0, _whiteDianWdith, _whiteDianWdith)];
        cile.backgroundColor = [UIColor whiteColor];
        
        cile.layer.borderWidth = _whiteDianBoderWdith;
        cile.layer.borderColor = ColorWithHEAL.CGColor;
        cile.layer.masksToBounds = YES;
        cile.layer.cornerRadius = _whiteDianWdith/2;
        cile.center = p;
        [self addSubview:cile];
        
        
        UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, _labelWidth, _labelHeight)];
        label.text = _title_array[i];
        label.font = [UIFont systemFontOfSize:12];
        label.textColor = ColorWithHEAL;
        CGFloat selfWidth = self.frame.size.width;
        CGFloat selfHeight = self.frame.size.height;
        CGFloat labelWidth = label.frame.size.width;
        CGFloat labelHeight = label.frame.size.height;
        
        if (p.x<selfWidth/2-labelWidth) {
            CGFloat x = p.x - labelWidth/2;
            CGFloat y;
            if (p.y<(selfHeight/2-labelHeight)) {
                y = p.y - labelHeight/2;
                
            } else {
                y = p.y + labelHeight/2;
                
            }
            label.center = CGPointMake(x, y);
            
        } else {
            CGFloat x = p.x + labelWidth/2;
            
            CGFloat y;
            if (p.y<(selfHeight/2-labelHeight)) {
                y = p.y - labelHeight/2;
                
            } else {
                y = p.y + labelHeight/2;
                
            }
            label.center = CGPointMake(x, y);
        }
        if (p.y>(selfHeight/2-labelHeight/2)&&p.y<(selfHeight/2+labelHeight/2)) {
            if (p.x<selfWidth/2-labelHeight) {
                
                label.center = CGPointMake(p.x-labelWidth/2, p.y);
            }else{
                label.center = CGPointMake(p.x+labelWidth/2, p.y);
            }
        }else{
            if (p.x>(selfWidth/2-labelWidth/2)&&p.x<(selfWidth/2+labelWidth/2)) {
                if (p.y<selfHeight/2-labelWidth) {
                    label.center = CGPointMake(p.x, p.y-labelHeight/2);
                } else {
                    label.center = CGPointMake(p.x, p.y+labelHeight/2);
                }
            }
        }
        label.textAlignment = NSTextAlignmentCenter;
        
        [self addSubview:label];
    }
    
    [aPath fill];
    [aPathsmall fill];
    
    UIImageView *imageview = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, _headerimageWidth, _headerimageWidth)];
    [imageview setImage:_header_image];
    imageview.center = CGPointMake(_cirlR, _cirlR);
    imageview.layer.masksToBounds = YES;
    imageview.layer.cornerRadius = _headerimageR;
    imageview.layer.borderWidth = _headerimageBoderWidth;
    imageview.layer.borderColor = [UIColor whiteColor].CGColor;
    [self addSubview:imageview];
    
}
#pragma mark 计算圆圈上点在IOS系统中的坐标
-(CGPoint) calcCircleCoordinateWithCenter:(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);
}
/**
 ：douxindong
 ：2017-4-20 1:02:26
 : 1.0.0
 --------------------------------------------------------------
 功能说明
 --------------------------------------------------------------
 根据IOS视图中圆组件的中心点(x,y)、半径(r)、圆周上某一点与圆心的角度这3个
 条件来计算出该圆周某一点在IOS中的坐标(x2,y2)。
 
 注意：
 （1）IOS坐标体系与数学坐标体系有差别，因此不能完全采用数学计算公式。
 （2）数学计算公式：
 x2=x+r*cos(角度值*PI/180)
 y2=y+r*sin(角度值*PI/180)
 （3）IOS中计算公式：
 x2=x+r*cos(角度值*PI/180)
 y2=y-r*sin(角度值*PI/180)
 
 --------------------------------------------------------------
 参数说明
 --------------------------------------------------------------
 @param (CGPoint) center
 
 圆圈在IOS视图中的中心坐标，即该圆视图的center属性
 
 @param (CGFloat) angle
 角度值，是0～360之间的值。
 注意：
 （1）请使用下面坐标图形进行理解。
 （2）角度是逆时针转的，从x轴中心(0,0)往右是0度角（或360度角），往左是180度角，往上是90度角，往下是270度角。
 
 (y)
 ^
 |
 |
 |
 |
 -----------------> (x)
 |(0,0)
 |
 |
 |
 
 @param (CGFloat) radius
 圆周半径
 */

@end

//
//  ViewController.m
//  dxd_贝塞尔
//
//  Created by 窦心东 on 2017/4/20.
//  Copyright © 2017年 窦心东. All rights reserved.
//

#import "ViewController.h"
#import "beisaierView.h"
@interface ViewController ()

{
    beisaierView *ber;
}

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    
    ber = [[beisaierView alloc] initWithFrame:CGRectMake(30, 50, 350, 350)];
    
    ber.backgroundColor = [UIColor whiteColor];
    ber.header_image = [UIImage imageNamed:@"HEAL.jpg"];
    ber.headerimageWidth = 40;
    ber.value_array = @[@"40",@"50",@"80",@"50",@"90",@"50",@"70",@"90",@"30"];
    ber.title_array = @[@"阴虚",@"痰湿",@"温热",@"血瘀",@"气郁",@"特禀",@"平和",@"气虚",@"阳虚"];
    [self.view addSubview:ber];
    

    
    
    [self Da_Guang_Gao];
    
}
- (void)Da_Guang_Gao{

    CGFloat margin = 10;
    NSArray *imagearray = @[@"appStore.png",@"wechat.png",@"HEAL.jpg"];
    NSArray *imagearraytitle = @[@"appstore下载",@"微信公众号",@"HEAL小程序"];
    for (int i = 0; i<imagearray.count; i++) {
        
        UIImageView *imageview = [[UIImageView alloc] initWithImage:[UIImage imageNamed:imagearray[i]]];
        imageview.frame = CGRectMake(margin+i*(120+margin), CGRectGetMaxY(ber.frame)+30, 120, 120);
        
        UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10+i*(120+margin),  CGRectGetMaxY(imageview.frame)+30, 120, 40)];
        label.textAlignment = NSTextAlignmentCenter;
        label.text = imagearraytitle[i];
        [self.view addSubview:label];
        [self.view addSubview:imageview];
    }
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


@end

leida.gif
效果图

Git仓库代码demo