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];

 

转载于:https://www.cnblogs.com/BagBear/p/5973726.html