画饼状图二

来源：互联网发布：办公软件教学视频编辑：程序博客网时间：2024/05/19 18:09

这篇文章是对“画饼状图一”这篇文章的补充，在那篇文章中我着重介绍了一个方法：

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

在画饼状图的时候，会有些问题需要注意，因为这个方法画的圆是空心圆，所以我们是通过设置画笔宽度来画成实心，我最初的代码是这样写的：

- (UIBezierPath *)fill {    //需要多少度的圆弧    CGPoint arcCenter = CGPointMake(self.frame.size.width/2, self.frame.size.height/2);    UIBezierPath *_bezierpath = [UIBezierPath bezierPathWithArcCenter:arcCenter                                                                radius:self.frame.size.width/2//self.frame.size.width/4                                                            startAngle:_startAngle                                                              endAngle:_endAngle                                                             clockwise:YES];    _startAngle = _endAngle;    return _bezierpath;}//制作扇形，添加动画- (CAShapeLayer *)shapeLayer:(UIColor *)color {    CAShapeLayer * layer = [CAShapeLayer layer];    layer.fillColor = nil;    layer.strokeColor = color.CGColor;    layer.lineWidth = self.frame.size.width/2;    layer.path = [self fill].CGPath;        CABasicAnimation * animation = [self animation];    [layer addAnimation:animation forKey:nil];        return layer;}

我本来想的是，圆的半径是当前视图宽度的一半，圆心在当前视图的中心，然后半径是当前视图宽度的一半（当前视图为正方形），运行效果如下图：

笔者这才恍然大悟，原来这个方法画的是空心圆，上面写的代码导致两个问题，1是并没有画出实心圆，2是圆的半径超出了当前视图范围。

经过思考和测试，我修改代码如下，把画笔的宽度改成20：

- (UIBezierPath *)fill {    //需要多少度的圆弧    CGPoint arcCenter = CGPointMake(self.frame.size.width/2, self.frame.size.height/2);    UIBezierPath *_bezierpath = [UIBezierPath bezierPathWithArcCenter:arcCenter                                                                radius:self.frame.size.width/2//self.frame.size.width/4                                                            startAngle:_startAngle                                                              endAngle:_endAngle                                                             clockwise:YES];    _startAngle = _endAngle;    return _bezierpath;}//制作扇形，添加动画- (CAShapeLayer *)shapeLayer:(UIColor *)color {    CAShapeLayer * layer = [CAShapeLayer layer];    layer.fillColor = nil;    layer.strokeColor = color.CGColor;    layer.lineWidth = 20;    layer.path = [self fill].CGPath;        CABasicAnimation * animation = [self animation];    [layer addAnimation:animation forKey:nil];        return layer;}

运行结果如图：

可以发现，圆的边缘有一半在视图内，一半在视图外，所以笔者思考，怎么才能解决这个问题呢。

如果有直接画实心圆的方法，就直接可解决，这里笔者暂时没有去找这个方法，笔者通过修改radiud和线的宽度试了一下，代码如下：

- (UIBezierPath *)fill {    //需要多少度的圆弧    CGPoint arcCenter = CGPointMake(self.frame.size.width/2, self.frame.size.height/2);    UIBezierPath *_bezierpath = [UIBezierPath bezierPathWithArcCenter:arcCenter                                                                radius:self.frame.size.width/4                                                            startAngle:_startAngle                                                              endAngle:_endAngle                                                             clockwise:YES];    _startAngle = _endAngle;    return _bezierpath;}//制作扇形，添加动画- (CAShapeLayer *)shapeLayer:(UIColor *)color {    CAShapeLayer * layer = [CAShapeLayer layer];    layer.fillColor = nil;    layer.strokeColor = color.CGColor;    layer.lineWidth = self.frame.size.width/2;    layer.path = [self fill].CGPath;        CABasicAnimation * animation = [self animation];    [layer addAnimation:animation forKey:nil];        return layer;}

运行如下：

关键点在于，1.圆的半径要修改，为原半径的一半，2，线的宽度半径的2倍，这样就能在规定的范围内画出实心圆。

0 0