Как нарисовать данную UIView с помощью UIBezierPath?

Question

Цель: Нарисовать данный круг, цветовая часть можно быть полностью заполненной, а может наполовину и т.д Текст внутри не нужен.

Что сделано мною: Весь день сидел и сделал через поиск угла, поворота данного угла, передвинул все 5 найденых дуг в нужном виде. Но понял, скорее всего можно сделать, чтобы был один круг с 5 частями, к сожалению, так и не понял как это сделать.

Answer 1

Вот пример реализации подобных секторов, размеры секторов рассчитываются на основе ширины вью

class ArcsView: UIView {
    
    struct Arc {
        var color: UIColor
        var angle: CGFloat
    }

    override func draw(_ rect: CGRect) {
        
        let arcsCount = 5
        let arcsWidth: CGFloat = 40.0
        let spaceWidth: CGFloat = 10.0
        
        let innerArcRadius = rect.width / 2.0 - arcsWidth
        let outerArcRadius = rect.width / 2.0
        
        // определяем расстояния (углы) между секторами по формуле треугольника, зная длины всех сторон
        
        let innerSpaceAngle = acos((pow(innerArcRadius, 2) + pow(innerArcRadius, 2) - pow(spaceWidth, 2)) / (2 * innerArcRadius * innerArcRadius))
        let outerSpaceAngle = acos((pow(outerArcRadius, 2) + pow(outerArcRadius, 2) - pow(spaceWidth, 2)) / (2 * outerArcRadius * outerArcRadius))
        let arcsAngle = CGFloat.pi * 2 / CGFloat(arcsCount)
        
        // заполняем массив для примера
        
        let arcs = [
            Arc(color: .red, angle: arcsAngle),
            Arc(color: .orange, angle: arcsAngle),
            Arc(color: .yellow, angle: arcsAngle),
            Arc(color: .green, angle: arcsAngle),
            Arc(color: .blue, angle: arcsAngle)
        ]
        
        // поворачиваем сектора для симметрии
        
        var angle: CGFloat = -arcsAngle / 4
        
        arcs.forEach {
            
            // добавляем дуги, которые сами соединяются линией и затем замыкаем контур
            
            let path = UIBezierPath()
            path.lineWidth = 2

            path.addArc(withCenter: CGPoint(x: rect.midX, y: rect.midY),
                        radius: innerArcRadius,
                        startAngle: angle + innerSpaceAngle / 2,
                        endAngle: angle + $0.angle - innerSpaceAngle / 2,
                        clockwise: true)

            path.addArc(withCenter: CGPoint(x: rect.midX, y: rect.midY),
                        radius: outerArcRadius,
                        startAngle: angle + $0.angle - outerSpaceAngle / 2,
                        endAngle: angle + outerSpaceAngle / 2,
                        clockwise: false)

            path.close()

            $0.color.setFill()
            path.fill()

            angle += $0.angle
        }
    
    }

}

БЛОГ НА HUSL

Как нарисовать данную UIView с помощью UIBezierPath?

Ответы (1 шт):