How to draw a semi-circle using swift iOS 9 and on the basis of one value draw angle and fill that only part with color

Question

I want to draw the two semi circles like this as shown in picture (the below one)

I'm trying it but did not get anything. Tried some chart api and a few code to draw pie chart from stackoverflow but they need to edit and I don't know about Core Graphics. I am working on Xcode 7.3.1 and iOS 9.

My Question is:
How do I draw a semi-circle which take one value and first convert that value to get its equivalent angle and then draw an arc of this angle and fill color in that part?

score 12 · Answer 1 · edited Jun 23 '19 at 15:50

The below code runs in the XCode iOS Playground. It creates a custom UIView class and draws two pie slices. The start and end angle are specified in percent of a full circle.

You can easily extend it to display more or less slices depending on the data you have.

The drawRect method creates a bezier path that starts in the center, then adds an arc segment and finally closes the path so it can be filled.

Xcode 10.2.1/Swift 4.2 Update

class PieChart : UIView {

    override func draw(_ rect: CGRect) {

        drawSlice(rect: rect, startPercent: 0, endPercent: 50, color: .green)
        drawSlice(rect: rect, startPercent: 50, endPercent: 75, color: .red)
    }

    private func drawSlice(rect: CGRect, startPercent: CGFloat, endPercent: CGFloat, color: UIColor) {
        let center = CGPoint(x: rect.origin.x + rect.width / 2, y: rect.origin.y + rect.height / 2)
        let radius = min(rect.width, rect.height) / 2
        let startAngle = startPercent / 100 * CGFloat.pi * 2 - CGFloat.pi
        let endAngle = endPercent / 100 * CGFloat.pi * 2 - CGFloat.pi
        let path = UIBezierPath()
        path.move(to: center)
        path.addArc(withCenter: center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: true)
        path.close()
        color.setFill()
        path.fill()
    }
}

let pieChart = PieChart(frame: CGRect(x: 0.0, y: 0.0, width: 300.0, height: 300.0))
pieChart.backgroundColor = .clear

An Unnamed Earlier Version

import UIKit

class PieChart : UIView {

    override func drawRect(rect: CGRect) {

        drawSlice(rect, startPercent: 0, endPercent: 50, color: UIColor.greenColor())
        drawSlice(rect, startPercent: 50, endPercent: 75, color: UIColor.redColor())
    }

    private func drawSlice(rect: CGRect, startPercent: CGFloat, endPercent: CGFloat, color: UIColor) {
        let center = CGPoint(x: rect.origin.x + rect.width / 2, y: rect.origin.y + rect.height / 2)
        let radius = min(rect.width, rect.height) / 2
        let startAngle = startPercent / 100 * CGFloat(M_PI) * 2 - CGFloat(M_PI)
        let endAngle = endPercent / 100 * CGFloat(M_PI) * 2 - CGFloat(M_PI)
        let path = UIBezierPath()
        path.moveToPoint(center)
        path.addArcWithCenter(center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: true)
        path.closePath()
        color.setFill()
        path.fill()
    }
}

let pieChart = PieChart(frame: CGRect(x: 0.0, y: 0.0, width: 300.0, height: 300.0))
pieChart.backgroundColor = UIColor.clearColor()

score 0 · Answer 2 · edited Jul 09 '16 at 07:20

0

My issue has been resolved.

We just need to do a little change in the first line to make it like as in picture's semicircle:

drawSlice(rect, startPercent: 0, endPercent: 50, color: UIColor.greenColor())
drawSlice(rect, startPercent: 0, endPercent: 25, color: UIColor.redColor())

edited Jul 09 '16 at 07:20

Pang

9,564
146
81
122

answered Jul 08 '16 at 11:15

Hitesh Mor

72
1
11

score 0 · Answer 3 · answered Aug 15 '17 at 19:20

Codo's code in Swift 3:

import UIKit

class PieChart : UIView {

    override func draw(_ rect: CGRect) {

        drawSlice(rect, startPercent: 0, endPercent: 50, color: .green)
        drawSlice(rect, startPercent: 50, endPercent: 75, color: .red)
    }

    private func drawSlice(_ rect: CGRect, startPercent: CGFloat, endPercent: CGFloat, color: UIColor) {
        let center = CGPoint(x: rect.origin.x + rect.width / 2, y: rect.origin.y + rect.height / 2)
        let radius = min(rect.width, rect.height) / 2
        let startAngle = startPercent / 100 * CGFloat.pi * 2 - CGFloat.pi
        let endAngle = endPercent / 100 * CGFloat.pi * 2 - CGFloat.pi
        let path = UIBezierPath()
        path.move(to: center)
        path.addArc(withCenter: center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: true)
        path.close()
        color.setFill()
        path.fill()
    }
}

let pieChart = PieChart(frame: CGRect(x: 0.0, y: 0.0, width: 300.0, height: 300.0))
pieChart.backgroundColor = UIColor.clear

How to draw a semi-circle using swift iOS 9 and on the basis of one value draw angle and fill that only part with color

3 Answers3

Linked