Question

我试图将圆圈划分为多个路径，并用少量动画效果表示其中的数据，如下图所示。划分路径时遇到困难。

我感谢任何帮助＆amp;建议。

代码：

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 draw circle with different strokes

以下代码可能会提示如何绘制半红色和半蓝色。基本上您只需要定义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];
}

您还可以查看以下Create a circle with multi coloured segments in Core Graphics

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

UIBezier路径：如何将圆分成多个路径

1 个答案: