ios - UIBezier 路径：如何将圆划分为多个路径

Question

我正在尝试将圆划分为多个路径，并用很少的动画效果来表示其中的数据，如下图所示。难以划分路径。

我感谢任何帮助和建议。

代码：

import UIKit

class ViewController: UIViewController {

    //MARK:- Properties
    let total: Double = 10
    let categoryA: Double = 4
    let categoryB: Double = 3
    let categoryC: Double = 3
    var catAPer: Double!
    var catBPer: Double!
    var catCPer: Double!

    let radians: Double = (360 * .pi)/180

    //MARK:- IBOutlets
    @IBOutlet var circleView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
        setupCircle()
        calibratePercentage()
        draw(circleView.frame)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    func setupCircle() {
        let size: CGFloat = 240.0
        circleView.bounds = CGRect(x: 0, y: 0, width: size, height: size)
        circleView.layer.cornerRadius = size / 2
        circleView.layer.borderWidth = 1
        circleView.layer.borderColor = UIColor.gray.cgColor
        circleView.backgroundColor = UIColor.orange
    }

    func calibratePercentage() {
        catAPer = (categoryA/total)*100
        catBPer = (categoryB/total)*100
        catCPer = (categoryC/total)*100
        print((catAPer),(catBPer),(catCPer))
    }

    func draw(_ rect: CGRect) {

        let center = CGPoint(x:0,y:0)

        let portionPath1: UIBezierPath!
        portionPath1.move(to: center)
        portionPath1.addArc(withCenter: center, radius: 120, startAngle: radians(0), endAngle: radians(120), clockwise: true);
        portionPath1.close()

        portionPath1.fill(with: CGBlendMode.color, alpha: 1.0)
        portionPath1.fill()

        let portionPath2: UIBezierPath!
        portionPath1.move(to: center)
        portionPath1.addArc(withCenter: center, radius: 120, startAngle: radians(120), endAngle: radians(240), clockwise: true);
        portionPath1.close()

        portionPath1.fill(with: CGBlendMode.colorBurn, alpha: 1.0)
        portionPath1.fill()

        let portionPath3: UIBezierPath!
        portionPath1.move(to: center)
        portionPath1.addArc(withCenter: center, radius: 120, startAngle: radians(240), endAngle: radians(360), clockwise: true);
        portionPath1.close()

        portionPath1.fill(with: CGBlendMode.colorDodge, alpha: 1.0)
        portionPath1.fill()
    }


}

Answer 1

参考：UIBezierPath 用不同的笔画画圆

以下代码可能会提示如何绘制半红半蓝。基本上你需要的只是定义startAngle:x endAngle: y

- (void)drawRect:(CGRect)rect
{
    UIBezierPath *blueHalf = [UIBezierPath bezierPath];
    [blueHalf addArcWithCenter:CGPointMake(100, 100) radius:90.0 startAngle:-M_PI_2 endAngle:M_PI_2 clockwise:YES];
    [blueHalf setLineWidth:4.0];
    [[UIColor blueColor] setStroke];
    [blueHalf stroke];

    UIBezierPath *redHalf = [UIBezierPath bezierPath];
    [redHalf addArcWithCenter:CGPointMake(100, 100) radius:90.0 startAngle:M_PI_2 endAngle:-M_PI_2 clockwise:YES];
    [redHalf setLineWidth:4.0];
    [[UIColor redColor] setStroke];
    [redHalf stroke];
}

您还可以检查以下在 Core Graphics 中创建具有多色段的圆圈

除此之外，如果你喜欢使用第三方库，还有一个不错的图表库https://github.com/danielgindi/Charts