Создайте круг с многоцветными сегментами в Core Graphics

Question

Я пытаюсь нарисовать круговую диаграмму, которая будет состоять из сегментов одинакового размера, каждый с другим цветом. Я основывая свой код от этого SO: Draw a circular segment progress in SWIFT

let circlePath = UIBezierPath(ovalInRect: CGRect(x: 200, y: 200, width: 150, height: 150)) 
var segments: [CAShapeLayer] = [] 
let segmentAngle: CGFloat = 1.0/CGFloat(totalSegments) 

for var i = 0; i < totalSegments; i++ { 
    let circleLayer = CAShapeLayer() 
    circleLayer.path = circlePath.CGPath 

    // start angle is number of segments * the segment angle 
    circleLayer.strokeStart = segmentAngle * CGFloat(i) 

    //create a gap to show segments 
    let gapSize: CGFloat = 0.008 
    circleLayer.strokeEnd = circleLayer.strokeStart + segmentAngle - gapSize 

    circleLayer.lineWidth = 10 
    circleLayer.strokeColor = UIColor(red:0, green:0.004, blue:0.549, alpha:1).CGColor 
    circleLayer.fillColor = UIColor.redColor().CGColor 

    // add the segment to the segments array and to the view 
    segments.insert(circleLayer, atIndex: i) 
    view.layer.addSublayer(segments[i]) 
} 

Но с помощью этого я хотел бы сделать это так, я могу окрасить каждый сегмент на основе значения индекса я в течение цикла. Первоначально я просто тестировал с нечетным или четным, но обнаружил, что заполняющая часть заполнит весь круг последним используемым цветом.

Я подозреваю, что это потому, что заполняющий цвет заполняет весь круг, хотя ход имеет конечный старт и конец. Как я могу создать такой же эффект, но включить отдельный цвет заливки для каждого сегмента?

Answer 1

Вот функция рисования круговой диаграммы. Мне было весело на игровой площадке. Может быть, вы можете использовать его для ваших требований:

import Foundation 
import UIKit 


// Pie Chart Drawing function 
// -------------------------- 
// - Takes an array of tuples with relative value and color for slices 
// - draws at center coordinates with a givn radius 
// 
func drawPieChart(slices:[(value:CGFloat, color:UIColor)], at center:CGPoint, radius:CGFloat) 
{ 
    // the calue component of the tuples are summed up to get the denominator for surface ratios 
    let totalValues:CGFloat = slices.reduce(0, combine: {$0 + $1.value}) 

    // starting at noon (-90deg) 
    var angle:CGFloat = -CGFloat(M_PI)/2 

    // draw each slice going counter clockwise 
    for (value,color) in slices 
    { 
     let path = UIBezierPath() 

     // slice's angle is proportional to circumference 2π 
     let sliceAngle = CGFloat(M_PI)*2*value/totalValues 
     // select fill color from tuple 
     color.setFill() 

     // draw pie slice using arc from center and closing path back to center 
     path.moveToPoint(center) 
     path.addArcWithCenter(center, 
         radius: radius, 
        startAngle: angle, 
        endAngle: angle - sliceAngle, 
        clockwise: false 
          ) 
     path.moveToPoint(center) 
     path.closePath() 

     // draw slice in current context 
     path.fill() 

     // offset angle for next slice 
     angle -= sliceAngle 
    } 
} 

// Pie chart Data 
let slices:[(value:CGFloat, color:UIColor)] = 
    [ (3, UIColor.greenColor()), 
    (5, UIColor.redColor()), 
    (8, UIColor.blueColor()), 
    (13,UIColor.yellowColor()) 
    ] 

// UIView 
let viewSize = CGSize(width: 300, height: 300) 
let view:UIView = UIView(frame: CGRect(origin: CGPointZero, size: viewSize)) 
view.backgroundColor = UIColor.whiteColor() 

// CoreGraphics drawing 
UIGraphicsBeginImageContextWithOptions(viewSize, false, 0) 

// draw pie chart in Image context 
drawPieChart(slices, at:CGPointMake(150,150), radius:100) 

// set image to view layer (you could also use it elsewhere) 
view.layer.contents = UIGraphicsGetImageFromCurrentImageContext().CGImage 
UIGraphicsEndImageContext() 

// Playground (quick look or Timeline) 
let preview = view 

Примечание: чтобы получить равные отрезки размера, просто обеспечить одинаковое значение во всех записях массива кортежа.