iOS 繪制扇形圖

隨着產品對於APP界面和數據需求的提升，圖形化越來越多，對各種圖形的繪制就越來越對了。

今天簡單小結下繪圖中扇形的繪制：

 

繪圖的方法很多，在此我只簡單介紹下用UIBezierPath繪制扇形。

 

+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;

center:扇形的中心點
radius:扇形的半徑
startAngle:扇形繪制的起始弧度（正負都可以）
endAngle:扇形繪制的結束弧度
clockwise:是否順時針

- (void)addLineToPoint:(CGPoint)point;

添加一條線到點point

 

1、直接path繪制

//設置填充顏色
[[UIColor redColor] setFill];
//開始填充
[path fill];

 

2、用CAShapeLayer完成繪制

CAShapeLayer *layer = [CAShapeLayer layer];//初始化layer
layer.frame = view.bounds;//設置layer位置大小
layer.fillColor = [UIColor redColor].CGColor;//設置填充顏色
layer.path = path.CGPath;//設置繪制路徑     
[view.layer addSublayer:layer];//添加到view的layer上

以上是繪制一個扇形，若需要繪制一個圓中多個扇形需要循環處理

 

下面是一種繪制源碼，需要的可以借鑒：

DrawFanPictureView.h文件

#import <UIKit/UIKit.h>

@interface DrawFanPictureView : UIView
/**
 *  扇形每部分所占比例和對應顏色dict
 *  key為比例數據     value為對應顏色值
 */
@property (nonatomic,strong)NSDictionary *dataDict;
@property (nonatomic) CGFloat startDegres;//設置起始弧度    系統默認水平右側為0度開始弧度
@end

dataDict存儲的是繪制扇形比例數據和顏色值    key為比例數據     value為對應比例數據的顏色值

由於我這里只考慮了不同比例的情況，若是比例值相同時就不能用字典的方式傳數據了，相同比例的情況下可以用多個數組來處理。

系統默認弧度圖：

 

DrawFanPictureView.m文件

#import "DrawFanPictureView.h"
@interface DrawFanPictureView ()
@property (nonatomic) CGFloat pictureDataSum;//比例總和
@end
@implementation DrawFanPictureView
- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = [UIColor clearColor];
    }
    return self;
}

- (void)setDataDict:(NSDictionary *)dataDict {
    _dataDict = dataDict;
    [self dataSum];
    //刷新view
    [self setNeedsDisplay];
}

//比例總和
- (void)dataSum {
    [_dataDict.allKeys enumerateObjectsUsingBlock:^(id  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
        _pictureDataSum += [obj floatValue];
    }];
}
//繪圖
- (void)drawRect:(CGRect)rect {
    //設置開始弧度
    CGFloat endDegres = 0+_startDegres;
    //提取比例數據
    NSArray *dataarr = _dataDict.allKeys;
    for (int i=0; i<dataarr.count; i++) {
        //求結束弧度
        endDegres += M_PI*2*((CGFloat)[dataarr[i] floatValue]/_pictureDataSum);
        
        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.frame.size.width/2, self.frame.size.height/2) radius:MIN(self.frame.size.width/2, self.frame.size.height/2) startAngle:_startDegres endAngle:endDegres clockwise:YES];
        [path addLineToPoint:CGPointMake(self.frame.size.width/2, self.frame.size.height/2)];
        
#if 1
        CAShapeLayer *layer = [CAShapeLayer layer];
        layer.frame = self.bounds;
        UIColor *color = _dataDict[dataarr[i]];
        layer.fillColor = [UIColor redColor].CGColor;//設置填充顏色
        layer.path = path.CGPath;
        
        [self.layer addSublayer:layer];
#else
        UIColor *color = _dataDict[dataarr[i]];
        //設置填充顏色
        [color setFill];
        //開始填充
        [path fill];
#endif
        //重新設定開始弧度
        _startDegres = endDegres;
    }
}
@end

 

引用實現代碼：

DrawFanPictureView *view1 = [[DrawFanPictureView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
view1.dataDict = @{@"100":[UIColor redColor],@"50":[UIColor blueColor],@"160":[UIColor orangeColor]};
[self.view addSubview:view1];
    
DrawFanPictureView *view = [[DrawFanPictureView alloc] initWithFrame:CGRectMake(100, 250, 100, 100)];
view.dataDict = @{@"100":[UIColor redColor],@"50":[UIColor blueColor],@"160":[UIColor orangeColor]};
view.startDegres = -M_PI*1/2;//調整起始弧度
[self.view addSubview:view];