之前一直抱着一种不很好的态度去写代码，不求甚解，不会就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
效果图
