快速绘制半圆，未填充

Question

我想我做错了一些可怕的事情，但我需要向您展示我的想法。我想画一个大约 180 度的半圆，它有三种不同的颜色。但我不希望它被填满，我只想让它成为圆圈本身。我正在使用这段代码:

func addCirc(colour: UIColor, perc: CGFloat) {
    let center = CGPoint(x: 150, y:150)
    let radius = min(200, 200) / 2
    let startAngle = 0 / 100 * CGFloat(Double.pi) * 2 - CGFloat(Double.pi)
    let endAngle = perc / 100 * CGFloat(Double.pi) * 2 - CGFloat(Double.pi)
    let path = UIBezierPath()
    path.move(to: center)
    path.addArc(withCenter: center, radius: CGFloat(radius), startAngle: startAngle, endAngle: endAngle, clockwise: true)
    colour.setStroke()
    path.close()
    path.lineWidth = 20
    path.stroke()
}

let leftColour = UIColor.red
let middleColour = UIColor.yellow
let rightColour = UIColor.green
addCirc(colour: rightColour, perc: 50)
addCirc(colour: middleColour, perc: 30)
addCirc(colour: leftColour, perc: 10)

结果如下所示:

所以我只想拥有圆圈本身并删除底线和对角线。我想在这种情况下使用 addArc 是错误的。有人知道解决它的替代方法吗？

Answer 1

我认为对 path.close 的调用使所有这些直线都出现了。如果您只想要一个圆弧而不需要其他任何东西，为什么不尝试初始化器 init(arcCenter:radius:startAngle:endAngle:clockwise:)？

class MyView: UIView {
    override func draw(_ rect: CGRect) {
        let path = UIBezierPath(arcCenter: CGPoint(x: 100, y: 70), radius: 50, startAngle: -CGFloat.pi, endAngle: 0, clockwise: true)
        UIColor.black.setStroke()
        path.lineWidth = 10
        path.stroke()
    }
}

你可以创建这样的东西:

如果您希望圆弧的不同部分具有不同的颜色，您可能需要记住圆弧前一部分结束的角度(即将角度存储在变量中)。您目前似乎没有这样做。

这是我能够想出的:

override func draw(_ rect: CGRect) {
    var lastArcAngle = -CGFloat.pi
    func addArc(color: UIColor, percentage: CGFloat) {
        let fullCircle = CGFloat.pi * 2
        let arcAngle = fullCircle * percentage
        let path = UIBezierPath(arcCenter: CGPoint(x: 100, y: 70), radius: 50, startAngle: lastArcAngle, endAngle: lastArcAngle + arcAngle, clockwise: true)
        color.setStroke()
        path.lineWidth = 10
        path.stroke()
        lastArcAngle += arcAngle
    }
    addArc(color: .red, percentage: 1.0 / 6.0)
    addArc(color: .green, percentage: 1.0 / 6.0)
    addArc(color: .blue, percentage: 1.0 / 6.0)
}