如何使用Swift iOS 9并基于一个值绘制角度绘制半圆并仅用颜色填充该部分 [英] 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

问题描述

我要画两个半圆，如下图所示(下一个)

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

我正在尝试，但是什么也没得到. 尝试了一些图表API和一些代码来从stackoverflow绘制饼图，但是它们需要进行编辑，而我对Core Graphics还是一无所知. 我正在使用Xcode 7.3.1和iOS 9.

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?

推荐答案

以下代码在XCode iOS Playground中运行.它创建一个自定义的UIView类并绘制两个饼图.起始角和终止角以完整圆的百分比指定.

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.

drawRect方法创建一个从中心开始的贝塞尔曲线路径，然后添加一个弧段，最后关闭该路径，以便可以对其进行填充.

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更新

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

---

未命名的早期版本

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()

这篇关于如何使用Swift iOS 9并基于一个值绘制角度绘制半圆并仅用颜色填充该部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！