Swift draw several paths in loops

Question

I'm working on changing my previously circlechart, to a donutchart (That can support more than 1 number).

I got all the angle's correct, changed my data to work with an array.

But when I try to draw my paths, it only draws the last one.

Here's an example screenshot of the issue:

enter image description here

In the above example, it's set to draw this array:

cell.circleChart.percentFills = [weight, 10]

where weight is the % shown in the label of the circle. So you can see, that it doesn't draw the first angle, but the starting point for the next angle is correct.

Here's the code where I draw my donut chart.

    override func drawRect(rect: CGRect) {
    // Define the center.
    let center = CGPoint(x:bounds.width/2, y: bounds.height/2)
    
    // Define the radius
    let radius: CGFloat = max(bounds.width, bounds.height)
    
    // Define starting and ending angles
    var startAngle: CGFloat = CGFloat(DegreesToRadians(-90))
    let endAngle: CGFloat = CGFloat(DegreesToRadians(270))
    
    // Set up the full path. (for the default background color)
    var path = UIBezierPath(arcCenter: center,
        radius: bounds.width/2 - arcWidth/2,
        startAngle: startAngle,
        endAngle: endAngle,
        clockwise: true)

    // draw the full chart with the background color
    path.lineWidth = arcWidth
    chartColor.setStroke()
    path.stroke()
    
    //calculate the arc for each per percent
    let arcLengthPerPercent = CGFloat(DegreesToRadians(360/100))

    // Temporary var for loop testing
    var i = 0
    
    println("startAngle before loop: \(RadiansToDegrees(Double(startAngle)))")
    
    for percentFill in percentFills {
        
        println("LOOP: \(i)")
        
        if i == 0 {
            fillColor = UIColor.formulaBlueColor()
            println("BLUE")
        } else {
            fillColor = UIColor.formulaGreenColor()
            println("GREEN")
        }
        
        //then multiply out by the actual percent
        let fillEndAngle = arcLengthPerPercent * CGFloat(percentFill) + startAngle
        
        println("fillEndAngle: \(RadiansToDegrees(Double(fillEndAngle)))")
        
        //2 - draw the outer arc
        var fillPath = UIBezierPath(arcCenter: center,
            radius: bounds.width/2 - arcWidth/2,
            startAngle: startAngle,
            endAngle: fillEndAngle,
            clockwise: true)
        
        progressLine.path = fillPath.CGPath
        progressLine.strokeColor = fillColor.CGColor
        progressLine.fillColor = UIColor.clearColor().CGColor
        progressLine.lineWidth = arcWidth
        
        // add the curve to the screen
        self.layer.addSublayer(progressLine)
        
        i++
        startAngle = startAngle+(arcLengthPerPercent * CGFloat(percentFill))
    }
    
}

I reckon I'm probably going wrong in the last bit, where I add the progressLine as a subLayer, but I don't know what else I should be doing here instead.

Of course I've tested that if I only have 1 value in the array, it draws that as intended (in the blue color)

Any help getting several paths drawn out, would be greatly appreciated!

@Grimxn That is the code? addSubLayer is a function in swift, it's not something I made. developer.apple.com/library/prerelease/ios/documentation/…: — Mark L
progressLine is undeclared, so your code does not compile. Show your real code, or show enough context so that your code can compile. The question of how and where this thing is declared is crucial to the problem you are having. — matt

matt matt · Accepted Answer · 2015-05-30T16:44:23

But when I try to draw my paths, it only draws the last one.

The problem is that progressLine is declared outside this routine. Therefore you are just adding the same path layer over and over as a sublayer - not multiple path sublayers. Therefore it appears only once in your interface, containing the path (segment) that you most recently assigned to it — the last one in the last iteration of the loop.

Swift draw several paths in loops

1 Answers