閑來(lái)無(wú)事，把之前仿照網(wǎng)友敲的餅圖代碼傳上來(lái)，供以后查看，先看看效果圖：
pie_pic1.jpg
pie_pic2.jpg
- 先創(chuàng)建一個(gè)CAShapeLayer子類(lèi)，這個(gè)是餅圖的數(shù)據(jù)元素所用的layer，方便計(jì)算角度
#import "YBKCustomPieView.h"
@interface YBKCustomPieLayer : CAShapeLayer
@property (nonatomic, assign) CGFloat startAngle;
@property (nonatomic, assign) CGFloat endAngle;
@property (nonatomic, assign) BOOL isSelected;
@end
@implementation YBKCustomPieLayer
@end
- YBKCustomPieView所需屬性
#define kWidth_Self self.bounds.size.width
#define kHeight_Self self.bounds.size.height
#define kSpace_PointToPie 10
#define kSpace_LineTurning 20 //指示線線轉(zhuǎn)折的距離
@interface YBKCustomPieView ()
{
CAShapeLayer *bgLayer; //餅圖背景bgLayer
CAShapeLayer *maskLayer; //附加的動(dòng)畫(huà)效果所用的遮罩maskLayer
}
//數(shù)據(jù)數(shù)組
@property (nonatomic, strong) NSArray *dataArr;
//百分比數(shù)組
@property (nonatomic, strong) NSArray *numberArr;
//文字?jǐn)?shù)組
@property (nonatomic, strong) NSArray *titleArr;
//顏色數(shù)組
@property (nonatomic, strong) NSArray *colorArr;
//圓半徑
@property (nonatomic, assign) CGFloat radius;
//圓環(huán)寬度
@property (nonatomic, assign) CGFloat circleWidth;
@end
- 下面是@implementation YBKCustomPieView中的代碼
初始化
- (instancetype)initWithFrame:(CGRect)frame WithRadius:(CGFloat)radius CircleWidth:(CGFloat)circleWidth DataArr:(NSArray *)dataArr {
self = [super initWithFrame:frame];
if (self) {
self.backgroundColor = [UIColor whiteColor];
self.radius = radius;
self.circleWidth = circleWidth;
//如果圖片路徑大于弧度，顯示出來(lái)的圓弧有交叉；width=radius，顯示整好為實(shí)心圓；width<radius，顯示的是空心圓環(huán)
if (circleWidth > radius) {
self.circleWidth = radius;
}
self.dataArr = dataArr;
}
return self;
}
重寫(xiě)dataArr的set方法，在這里計(jì)算其他數(shù)組的值
-(void)setDataArr:(NSArray *)dataArr {
CGFloat sumValue = [[dataArr valueForKeyPath:@"number.@sum.floatValue"] floatValue];
NSArray *tmpArray = sumValue < 1 ? [dataArr arrayByAddingObject:@{@"number":[NSString stringWithFormat:@"%f", 1 - sumValue], @"city":@"其他"}] : dataArr;
tmpArray = [tmpArray sortedArrayUsingComparator:^NSComparisonResult(id _Nonnull obj1, id _Nonnull obj2) {
if ([obj1[@"number"] floatValue] < [obj2[@"number"] floatValue]) {
return NSOrderedDescending;
} else {
return NSOrderedAscending;
}
}];
_dataArr = tmpArray;
// 對(duì)象操作:針對(duì)數(shù)組的情況
// @distinctUnionOfObjects：返回指定屬性去重后的值的數(shù)組
// @unionOfObjects：返回指定屬性的值的數(shù)組，不去重
// 屬性的值不能為空，否則產(chǎn)生異常。
//
// 數(shù)組操作:針對(duì)數(shù)組的數(shù)組情況
// @distinctUnionOfArrays：返回指定屬性去重后的值的數(shù)組
// @unionOfArrays：返回指定屬性的值的數(shù)組，不去重
// @distinctUnionOfSets：同上，只是返回值為NSSet
_numberArr = [tmpArray valueForKeyPath:@"@unionOfObjects.number"];
_titleArr = [tmpArray valueForKeyPath:@"@unionOfObjects.city"];
NSMutableArray *colorArr = [NSMutableArray arrayWithCapacity:0];
for (int i = 0; i < _numberArr.count; i++) {
[colorArr addObject:[UIColor colorWithRed:(arc4random() % 245 + 10) / 255.0 green:(arc4random() % 245 + 10) / 255.0 blue:(arc4random() % 245 + 10) / 255.0 alpha:1.f]];
}
_colorArr = colorArr;
}
在- (void)drawRect:(CGRect)rect方法中繪制圖形，初始化bgLayer和遮罩maskLayer
- (void)drawRect:(CGRect)rect {
while (self.layer.sublayers.count > 0) {
[self.layer.sublayers.firstObject removeFromSuperlayer];
}
bgLayer = [CAShapeLayer layer];
bgLayer.fillColor = [UIColor clearColor].CGColor;
bgLayer.frame = CGRectMake(CGRectGetMidX(self.bounds) - self.radius, CGRectGetMidY(self.bounds) - self.radius, self.radius * 2, self.radius * 2);
UIBezierPath *bgPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(CGRectGetMidX(bgLayer.bounds), CGRectGetMidY(bgLayer.bounds)) radius:self.radius startAngle:0 endAngle:2 * M_PI clockwise:NO];
bgLayer.path = bgPath.CGPath;
[self.layer addSublayer:bgLayer];
[self addData];
//遮罩
maskLayer = [CAShapeLayer layer];
CGFloat maskHeight = self.bounds.size.width > self.bounds.size.height ? self.bounds.size.height : self.bounds.size.width;
maskLayer.frame = CGRectMake(CGRectGetMidX(self.bounds) - maskHeight / 2, CGRectGetMidY(self.bounds) - maskHeight / 2, maskHeight, maskHeight);
UIBezierPath *maskPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(CGRectGetMidX(maskLayer.bounds), CGRectGetMidY(maskLayer.bounds)) radius:maskHeight / 4 startAngle:0 endAngle:M_PI * 2 clockwise:NO];
maskLayer.fillColor = [UIColor clearColor].CGColor;
maskLayer.strokeColor = self.backgroundColor.CGColor;
maskLayer.lineWidth = maskHeight / 2;
maskLayer.path = maskPath.CGPath;
maskLayer.strokeEnd = 0;
[self.layer addSublayer:maskLayer];
}
開(kāi)始根據(jù)data數(shù)據(jù)的百分比，來(lái)繪制餅圖中的元素
- (void)addData {
CGFloat start = 0;
CGFloat end = start;
for (int i = 0; i < self.numberArr.count; i++) {
end = start + [self.numberArr[i] floatValue] * 2 * M_PI;
//添加一個(gè)子layer用于判斷是否在范圍內(nèi)
CAShapeLayer *subLayer = [CAShapeLayer layer];
subLayer.strokeColor = [UIColor clearColor].CGColor;
subLayer.fillColor = [UIColor clearColor].CGColor;
CGPoint center = CGPointMake(CGRectGetMidX(bgLayer.bounds), CGRectGetMidY(bgLayer.bounds));
UIBezierPath *subPath = [UIBezierPath bezierPath];
[subPath moveToPoint:center];
[subPath addArcWithCenter:center radius:self.radius startAngle:start endAngle:end clockwise:YES];
subLayer.path = subPath.CGPath;
[bgLayer addSublayer:subLayer];
YBKCustomPieLayer *layer = [YBKCustomPieLayer layer];
layer.lineWidth = self.circleWidth;
layer.fillColor = [UIColor clearColor].CGColor;
layer.strokeColor = [self.colorArr[i] CGColor];
end = start + [self.numberArr[i] floatValue] * 2 * M_PI;
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:self.radius - self.circleWidth / 2 startAngle:start endAngle:end clockwise:YES];
layer.startAngle = start;
layer.endAngle = end;
layer.path = path.CGPath;
[subLayer addSublayer:layer];
start = end;
double middleAngle = (layer.startAngle + layer.endAngle) / 2.0;
CGPoint newPosition = CGPointMake(bgLayer.position.x + (self.radius + kSpace_PointToPie) * cos(middleAngle), bgLayer.position.y + (self.radius + kSpace_PointToPie) * sin(middleAngle));
//添加指示點(diǎn)
CAShapeLayer *circlepointLayer = [CAShapeLayer layer];
UIBezierPath *circlepointPath = [UIBezierPath bezierPathWithArcCenter:newPosition radius:2 startAngle:0 endAngle:M_PI * 2 clockwise:NO];
circlepointLayer.fillColor = layer.strokeColor;
circlepointLayer.path = circlepointPath.CGPath;
[self.layer addSublayer:circlepointLayer];
//畫(huà)線
CAShapeLayer *pointLayer = [CAShapeLayer layer];
pointLayer.lineCap = kCALineCapRound;
pointLayer.lineJoin = kCALineJoinRound;
UIBezierPath *pointPath = [UIBezierPath bezierPath];
[pointPath moveToPoint:newPosition];
CGPoint firstLinePoint = CGPointMake(0, 0);
if (newPosition.x >= bgLayer.position.x) {
if (newPosition.y >= bgLayer.position.y) {
//第一象限
firstLinePoint = CGPointMake(newPosition.x + kSpace_LineTurning * cos(M_PI_4 / 2), newPosition.y + kSpace_LineTurning * sin(M_PI_4 * 7 / 8));
} else {
//第四象限
firstLinePoint = CGPointMake(newPosition.x + kSpace_LineTurning * cos(M_PI_2 * 3 + M_PI_4), newPosition.y + kSpace_LineTurning * sin(M_PI_2 * 3 + M_PI_4));
}
} else {
if (newPosition.y >= bgLayer.position.y) {
//第二象限
firstLinePoint = CGPointMake(newPosition.x + kSpace_LineTurning * cos(M_PI - M_PI_4), newPosition.y + kSpace_LineTurning * sin(M_PI - M_PI_4));
} else {
//第三象限
firstLinePoint = CGPointMake(newPosition.x + kSpace_LineTurning * cos(M_PI + M_PI_4), newPosition.y + kSpace_LineTurning * sin(M_PI + M_PI_4));
}
} [pointPath addLineToPoint:firstLinePoint];
CGFloat x = firstLinePoint.x > bgLayer.position.x ? 40:-40;
CGPoint secondLinePoint = CGPointMake(firstLinePoint.x + x, firstLinePoint.y);
[pointPath addLineToPoint:secondLinePoint];
pointLayer.strokeColor = layer.strokeColor;
pointLayer.fillColor = [UIColor clearColor].CGColor;
pointLayer.lineWidth = 1;
pointLayer.path = pointPath.CGPath;
[self.layer addSublayer: pointLayer];
//添加文字
NSString *number = [NSString stringWithFormat:@" %.f%% ", [self.numberArr[i] floatValue] * 100];
NSString *city = [NSString stringWithFormat:@" %@ ", self.titleArr[i]];
NSDictionary *texttr = @{NSFontAttributeName:[UIFont systemFontOfSize:10], NSForegroundColorAttributeName:[UIColor lightGrayColor]};
CGSize numberSize = [number sizeWithAttributes:texttr];;
[self addTextLayerWithText:number Frame:CGRectMake(secondLinePoint.x - numberSize.width / 2, secondLinePoint.y - numberSize.height, numberSize.width, numberSize.height) FontSize:10];
CGSize citySize = [city sizeWithAttributes:texttr];;
[self addTextLayerWithText:city Frame:CGRectMake(secondLinePoint.x - citySize.width / 2, secondLinePoint.y, citySize.width, citySize.height) FontSize:10];
}
}
添加文字textLayer
- (void)addTextLayerWithText:(NSString *)text Frame:(CGRect)frame FontSize:(CGFloat)fontSize {
CATextLayer *textLayer = [CATextLayer layer];
textLayer.string = text;
textLayer.alignmentMode = kCAAlignmentCenter;
textLayer.fontSize = fontSize;
textLayer.foregroundColor = [UIColor lightGrayColor].CGColor;
textLayer.frame = frame;
textLayer.contentsScale = [UIScreen mainScreen].scale;
textLayer.wrapped = NO;
[self.layer addSublayer:textLayer];
}
最后再添加一個(gè)點(diǎn)擊效果在touchesBegan中判斷點(diǎn)擊的是餅圖還是view。如果點(diǎn)擊的是view，那么maskLayer遮罩動(dòng)畫(huà)顯示出來(lái)；如果點(diǎn)擊的是餅圖，那么餅圖中對(duì)應(yīng)的塊就凸顯出來(lái)：
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
CGPoint point = [touches.anyObject locationInView:self];
CGPoint newPoint = [bgLayer convertPoint:point fromLayer:self.layer];
if (![bgLayer containsPoint:newPoint]) {
[self stroke];
return;
}
for (CAShapeLayer *tmpLayer in bgLayer.sublayers) {
//判斷是否在透明層
YBKCustomPieLayer *pieLayer = (YBKCustomPieLayer *)tmpLayer.sublayers.firstObject;
if (CGPathContainsPoint(tmpLayer.path, &CGAffineTransformIdentity, newPoint, 0) && !pieLayer.isSelected) {
pieLayer.isSelected = YES;
CGPoint position = pieLayer.position;
double middleAngle = (pieLayer.startAngle + pieLayer.endAngle) / 2.0;
CGPoint newPosition = CGPointMake(position.x + kSpace_PointToPie * cos(middleAngle), position.y + kSpace_PointToPie * sin(middleAngle));
pieLayer.position = newPosition;
} else {
pieLayer.position = CGPointMake(0, 0);
pieLayer.isSelected = NO;
}
}
}
maskLayer遮罩的動(dòng)畫(huà)代碼
- (void)stroke{
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.duration = 1.f;
animation.fromValue = [NSNumber numberWithFloat:1.f];
animation.toValue = [NSNumber numberWithFloat:0.f];
//禁止還原
animation.autoreverses = NO;
//禁止完成即移除
animation.removedOnCompletion = NO;
//讓動(dòng)畫(huà)保持在最后狀態(tài)
animation.fillMode = kCAFillModeForwards;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[maskLayer addAnimation:animation forKey:@"strokeEnd"];
}
代碼部分至此結(jié)束，下面是調(diào)用代碼，5s后重設(shè)dataArr，并刷新UI。有一個(gè)bug還沒(méi)有優(yōu)化，就是重設(shè)dataArr后，數(shù)據(jù)較多，文字部分有重疊
NSArray *dataArr = @[@{@"number":@"0.15", @"city":@"鄭州"}, @{@"number":@"0.3", @"city":@"上海"}, @{@"number":@"0.1", @"city":@"蘇州"}, @{@"number":@"0.05", @"city":@"無(wú)錫"}, @{@"number":@"0.2", @"city":@"成都"}];
YBKCustomPieView *pieView = [[YBKCustomPieView alloc] initWithFrame:CGRectMake(0, kHeight_Screen / 2 - 150, kWidth_Screen , 300) WithRadius:60 CircleWidth:50 DataArr:dataArr];
[self.view addSubview:pieView];
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(5.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
NSArray *dataArr = @[@{@"number":@"0.15", @"city":@"鄭州"}, @{@"number":@"0.23", @"city":@"上海"}, @{@"number":@"0.1", @"city":@"蘇州"}, @{@"number":@"0.05", @"city":@"無(wú)錫"}, @{@"number":@"0.2", @"city":@"成都"}, @{@"number":@"0.2", @"city":@"北京"}, @{@"number":@"0.01", @"city":@"南京"}, @{@"number":@"0.03", @"city":@"廈門(mén)"}];
pieView.dataArr = dataArr;
[pieView setNeedsDisplay];
});
備注：基本沒(méi)寫(xiě)啥注釋?zhuān)绻行枰?，?qǐng)?zhí)D(zhuǎn)原博客：http://www.itdecent.cn/p/97570c6cafa0
