UIBezier paths : How to divide the circle into multiple paths

Question

I am trying to divide the circle into multiple paths and represent data in it with few animation effects as shown in below image. Having trouble in dividing the paths.

I appreciate any help & suggestions.

Code:

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()
    }


}

score 0 · Answer 1 · edited May 23 '17 at 12:02

Reference : UIBezierPath draw circle with different strokes

The following code may give a hint how to draw half red and half blue. Basically all you need is to define the 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];
}

You may also check the following Create a circle with multi coloured segments in Core Graphics

In addition to all, if you like to use a third part library, there is a nice chart library https://github.com/danielgindi/Charts

i appreciate your help.. swift doesn't support CGPointMake. – Karen Apr 05 '17 at 16:02 — Karen, Apr 05 '17 at 16:02

UIBezier paths : How to divide the circle into multiple paths

1 Answers1