主页 / 问题 / 1209864
Accepted
Anton Brock
Asked:2021-11-26 04:09:43 +0000 UTC2021-11-26 04:09:43 +0000 UTC

如何使用 UIBezierPath 绘制给定的 UIView？

  • 772

目标：画一个给定的圆圈，颜色部分可以完全填充，也可以是一半，等等。里面的文字不需要。

图片

我做了什么：我坐了一整天，通过寻找一个角度，转动这个角度，以所需的形式移动了所有 5 个弧线。但我意识到最有可能做到的是一个圆圈有 5 个部分，不幸的是，我不明白该怎么做。

swift

1 个回答

  1. Best Answer

    以下是此类扇区的实现示例，扇区的大小是根据视图的宽度计算的

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

}

    在此处输入图像描述

    • 1

相关问题