UIBezier paths：円を複数のパスに分割する方法

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

次のコードは、半分赤と半分青を描画する方法のヒントを与えることができます。基本的にはあなたが必要なすべてのあなたはまた、すべてに加えて、以下のCreate a circle with multi coloured segments in Core Graphics

を確認することが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]; 
} 

を定義することであるあなたが第三部品ライブラリを使用したい場合は、そこにあります素敵な図書館https://github.com/danielgindi/Charts