填充 UIBezierPath 以创建饼图

Question

我正在尝试使用 UIBezierPath 创建饼图。

问题是当填充时，端点不是在中心连接，而是像这样相互连接：

  func progressCircle() -> CALayer { 
        let progressCircle = CAShapeLayer()
        
        let pi : CGFloat = .pi
        let rect = CGRect(x: 0, y: 0, width: 50, height: 50)
        let radius = rect.width/2
        
        let phaseShift = 1/2*pi
        let current : CGFloat = 70.0//currentCount
        let total : CGFloat = 100.0//total
        let startAngle : CGFloat = 0 - phaseShift
        let endAngle = (2 * pi * current/total) - phaseShift
        

        progressCircle.path = UIBezierPath(arcCenter: CGPoint(x: rect.midX, y: rect.midY), radius:radius , startAngle: startAngle, endAngle: endAngle, clockwise: true).cgPath
        progressCircle.fillColor = UIColor.red.cgColor
        

        return progressCircle
    }

Answer 1

这是正常现象，因为您使用的是 UIBezierPath(arcCenter:radius:startAngle:endAngle:clockwise:)。你不会告诉你的路径回到中心。

不如自己画。

注释行不是必需的，但可能会帮助您了解发生了什么。

let bezierPath = UIBezierPath()
let center = CGPoint(x: rect.midX, y: rect.midY)
bezierPath.move(to: center)
//bezierPath.addLine(to: CGPoint(x: center.x + radius * cos(startAngle), y: center.y + radius * sin(startAngle)))
bezierPath.addArc(withCenter: center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: true)
//bezierPath.addLine(to: CGPoint(x: center.x + radius * cos(endAngle), y: center.y + radius * sin(endAngle)))
bezierPath.addLine(to: center)
bezierPath.close()

当然，那是糟糕的 ASCII 艺术，但您看到了 3 个“+”，它们是中心，以及两个用于记录的注释线点。中心和这些点之间的线是隐含的，如果你想隐含它们，取消注释线。

     +-
     |  `
     |   `
+----+   )
`.       '
 `.     '
  `- - -

填充 UIBezierPath 以创建饼图

Filling UIBezierPath to create pie chart

swift

pie-chart

uibezierpath