快速绘制半圆,未填充

时间:2018-06-29 11:04:17

标签: swift draw

我想我做错了什么,但我需要向您介绍一下我的想法。我想绘制大约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)

结果如下所示: enter image description here

所以我只想拥有圆形本身,并删除底线和对角线。我猜在这种情况下使用addArc是错误的。 有人知道解决方案吗?

1 个答案:

答案 0 :(得分:2)

我认为对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()
    }
}

您可以创建以下内容:

enter image description here

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

这就是我想出的:

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