ios - 绘制带孔饼图

Question

我有“饼图”图表，用 UIBezierPath 绘制。我想要的是，开始用偏移绘制它，以实现圆内的“孔”。现在它看起来像这样:

它创建这样的“切片”:

- (void)drawSliceOfPie:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle fillColor:(UIColor *)fillColor strokeColor:(UIColor *)strokeColor lineWidth:(CGFloat)lineWidth
{

    // Draw text


    //draw arc
    CGPoint center = CGPointMake(self.bounds.size.height / 2, self.bounds.size.width / 2);

    UIBezierPath *arc = [UIBezierPath bezierPath]; //empty path
    [arc setLineWidth:lineWidth];
    [arc moveToPoint:center];
    CGPoint next;
    next.x = center.x + radius * cos(startAngle);
    next.y = center.y + radius * sin(startAngle);
    [arc addLineToPoint:next]; //go one end of arc

    [arc addArcWithCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES]; //add the arc
    [arc addLineToPoint:center]; //back to center

    // Draw text (new)
    float _x, _y, _nextX, _nextY;
    _nextX =center.x + radius/2 * cos(startAngle);
    _nextY =center.y + radius/2 * sin(startAngle);

    _x =_nextX + radius/2 * cos(endAngle);
    _y =_nextY + radius/2 * sin(endAngle);
    // x - 523, y - 472

    NSString *str = @"123";
    CGPoint halfCenter = CGPointMake(_x, _y);
    [str drawAtPoint:halfCenter withAttributes:nil];
    //

    [fillColor set];
    [arc fill];
    [strokeColor set];
    [arc stroke];
}

我只是想在这里面实现“While hole”(不是在上面添加 subview ，而是用偏移绘制它)。如何实现？

Answer 1

下面是使用UIBezierPath整体绘制饼图的代码

SWIFT 版本:-

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        self.drawCircle(center: self.view.center, radius: 100, startAngle: 0, endAngle: CGFloat(M_PI * 0.8), color: UIColor.red)
        self.drawCircle(center: self.view.center, radius: 100, startAngle: CGFloat(M_PI * 0.8), endAngle: CGFloat(M_PI * 0.2), color: UIColor.green)
        self.drawCircle(center: self.view.center, radius: 100, startAngle: CGFloat(M_PI * 0.2), endAngle: CGFloat(M_PI * 0.0), color: UIColor.blue)

            }

    func drawCircle(center: CGPoint, radius: CGFloat, startAngle: CGFloat, endAngle:CGFloat, color: UIColor) {

        let circlePath = UIBezierPath(arcCenter: center, radius: radius, startAngle: startAngle, endAngle:endAngle, clockwise: false)

        let shapeLayer = CAShapeLayer()
        shapeLayer.path = circlePath.cgPath

        //change the fill color
        shapeLayer.fillColor = UIColor.clear.cgColor
        //you can change the stroke color
        shapeLayer.strokeColor = color.cgColor
        //you can change the line width
        shapeLayer.lineWidth = 50.0

        view.layer.addSublayer(shapeLayer)

    }
}

Objective-C 版本:-

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    [self drawCircle:self.view.center radius:100 startAngle:0 endAngle:(M_PI * 0.8) color:[UIColor redColor]];
    [self drawCircle:self.view.center radius:100 startAngle:(M_PI * 0.8) endAngle:(M_PI * 0.2) color:[UIColor greenColor]];
    [self drawCircle:self.view.center radius:100 startAngle:(M_PI * 0.2) endAngle:(M_PI * 0.0) color:[UIColor blueColor]];
}


- (void) drawCircle:(CGPoint) center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle color:(UIColor *)color
{
    UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:false];
    CAShapeLayer *shapeLayer = [[CAShapeLayer alloc] init];
    shapeLayer.path = circlePath.CGPath;

    //change the fill color
    shapeLayer.fillColor = [[UIColor clearColor] CGColor];
    //you can change the stroke color
    shapeLayer.strokeColor = [color CGColor];
    //you can change the line width
    shapeLayer.lineWidth = 50.0;

    [self.view.layer addSublayer:shapeLayer];
}