主页 / 问题 / 1211822
Accepted
Anton Brock
Asked:2021-11-30 19:31:49 +0000 UTC2021-11-30 19:31:49 +0000 UTC

如何使用 UIBezierPath 绘制这样一条带有缩进的多行？

  • 772

目标：

你需要画这条线。为了更好地理解 - 蓝色部分是金额的 100% 的 5%（我也从 100% 的行中理解）：

多线

我做了什么：

正如你所看到的，我只有一条线，是的，我可以用颜色填充它，但我不知道如何在屏幕截图中绘制上面的内容

问题：

  • 是否有任何现成的解决方案（在 UIBezierPath 中）来计算填充百分比？
  • 是否有为此准备好的库？
  • 应该使用什么方法/算法来动态计算条形的填充？

只是一条线

swift

1 个回答

  1. Best Answer

    这就是你可以画的方式

    class PercentageView: UIView {
    
    struct Percentage {
        var value: CGFloat
        var color: UIColor
    }

    override func draw(_ rect: CGRect) {
        
        let padding: CGFloat = 3.0
        
        
        // фон для вью
        
        UIColor.lightGray.withAlphaComponent(0.3).setFill()
        let path = UIBezierPath(roundedRect: bounds, cornerRadius: 6)
        path.fill()
        
        // тестовые данные
        
        let data = [
            Percentage(value: 5, color: .blue),
            Percentage(value: 15, color: .green),
            Percentage(value: 10, color: .red),
            Percentage(value: 70, color: .magenta)
        ]
        
        // рисуем полоски
        
        var x: CGFloat = 0.0
        let paddings = padding * CGFloat(data.count - 1)
        
        data.forEach {
            
            let sizeFactor = $0.value / 100
            let width = sizeFactor * rect.width - sizeFactor * paddings
            let path = UIBezierPath(roundedRect: CGRect(x: x, y: 0, width: width, height: rect.height), cornerRadius: 6)
            
            $0.color.setFill()
            path.fill()

            x += width + padding
        }
        
    }

}

    在此处输入图像描述

    • 1

相关问题