在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]) 
} 

但是使用這個我想讓它，所以我可以顏色基於索引值i每個段的for循環。最初我只是用奇數或偶數進行測試，但發現填充部分會用最後使用的顏色填充整個圓。

我懷疑這是因爲填充顏色填充整個圓圈，即使筆畫有一個有限的開始和結束。我怎樣才能創建相同的效果，但爲每個片段啓用單獨的填充顏色？

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 

注：獲得同等尺寸段，只需要提供在元組的所有條目相同的值。