- 看到朋友討論群里面發(fā)了一個類似于這樣的需求棒拂，當(dāng)時很感興趣倒谷，剛好上線了占贫，有點閑暇時間桃熄，決定試一試。（上面是完成的效果圖，沒有做適配）
View.h文件
#import <UIKit/UIKit.h>
@interface GraphView : UIView
@property(nonatomic,strong)NSDictionary *dataDic;// 接收數(shù)據(jù)信息
@property(nonatomic,strong)NSArray *nameArr;
@end
View.m文件
#import "GraphView.h"
#define kCount self.dataDic.count // 傳入的數(shù)據(jù)中的個數(shù)
@implementation GraphView
- (void)drawRect:(CGRect)rect
{
//一個不透明類型的Quartz 2D繪畫環(huán)境,相當(dāng)于一個畫布,你可以在上面任意繪畫
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 2.0); // 線寬
CGContextSetStrokeColorWithColor(context, [UIColorgrayColor].CGColor);// 線框顏色
UIColor *aColor = [UIColorcolorWithRed:1green:0.5blue:0.2alpha:0.2];
CGContextSetFillColorWithColor(context, aColor.CGColor);// 填充顏色
//
CGPoint center = CGPointMake(200, 200);
// 從一個點開始
CGContextMoveToPoint(context, center.x, center.y + 160.0);
for(int i = 1; i < kCount; ++i)
{
self.nameArr = @[@"Chinese",@"Math",@"English",@"History",@"PE"];
//
CGPoint point = [self getXAndYWithScores:_dataDic[_nameArr[i - 1]] integer:i];
// 記錄上一個點瞳收，并連接到這個點碉京；
CGContextAddLineToPoint(context, center.x + point.x, center.y + point.y);
}
CGContextClosePath(context); // 結(jié)束一次畫圖
CGContextDrawPath(context, kCGPathFillStroke);// 圖形內(nèi)容填充顏色方式（填滿）
CGContextStrokePath(context); // 可不要
// 如果是畫兩組不同的圖形， 重新創(chuàng)建一次 CGContextRef
CGContextRef context2 = UIGraphicsGetCurrentContext();
CGContextSetRGBStrokeColor(context2, 28, 132, 250, 1);
CGContextSetLineWidth(context2, 1.0);
CGContextSetStrokeColorWithColor(context2, [UIColorlightGrayColor].CGColor);// 線框顏色
// 幾條射線螟深，和注釋
for(int i = 1; i <= kCount; i++)
{
CGContextMoveToPoint(context2, center.x, center.y);
CGFloat x = 200.0 * sinf(i * 2.0 * M_PI / kCOunt);
CGFloat y = 200.0 * cosf(i * 2.0 * M_PI / 5.0);
CGContextAddLineToPoint(context2, center.x + x, center.y + y);
UILabel *nameLb = [[UILabelalloc]initWithFrame:CGRectMake(0, 0, 80, 30)];
nameLb.text = self.nameArr[i - 1];
nameLb.center = CGPointMake(center.x + x, center.y + y);
[selfaddSubview:nameLb];
}
CGContextClosePath(context2);
CGContextDrawPath(context2, kCGPathFillStroke);
CGContextStrokePath(context2);
}
//
- (CGPoint)getXAndYWithScores:(NSString *)scores integer:(NSInteger)integer
{
CGFloat x = 160.0 * ([scores floatValue] / 100) * sinf(integer * 2.0 * M_PI / kCount
);// 如果想要多邊形谐宙， 改動5.0 就行了， 前面相應(yīng)的地方也修改
CGFloat y = 160.0 * ([scores floatValue] / 100) * cosf(integer * 2.0 * M_PI / kCount);
CGPoint point = CGPointMake(x, y);
return point;
}
調(diào)用View
#import "ViewController.h"
#import "GraphView.h"
@interfaceViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[superviewDidLoad];
// 多線的界弧， 可以根據(jù)需求進行調(diào)整
NSDictionary *dataDic = @{@"Chinese":@66,@"Math":@88,@"English":@54,@"History":@90,@"PE":@40};// 隨意填寫, 數(shù)組更加方便
GraphView *grapview = [[GraphView alloc]initWithFrame:self.view.bounds];
grapview.dataDic = dataDic;// 傳值到 UIView界面
grapview.backgroundColor = [UIColor clearColor];
[self.view addSubview:grapview];
}
// 6邊形的效果
六邊形2.png
