如何用百分比值填充圆圈颜色？

在我的应用程序中，我有一个要求，我需要用红色填充圆圈，百分比值为50％，80％，我从API获得如下图像。

目前我正在使用以下代码来实现这一目标。

let roundView = UIView(frame:CGRect(x: 100, y: 100, width: 250, height: 250)) roundView.backgroundColor = UIColor.white roundView.layer.cornerRadius = roundView.frame.size.width / 2 // bezier path let circlePath = UIBezierPath(arcCenter: CGPoint (x: roundView.frame.size.width / 2, y: roundView.frame.size.height / 2), radius: roundView.frame.size.width / 2, startAngle:CGFloat(M_PI_2), endAngle: CGFloat (M_PI * 2.0), clockwise: true) circlePath.move(to: roundView.center) // circle shape let circleShape = CAShapeLayer() circleShape.path = circlePath.cgPath circleShape.strokeColor = UIColor.black.cgColor circleShape.fillColor = UIColor.green.cgColor circleShape.lineWidth = 1.5 // add sublayer roundView.layer.addSublayer(circleShape) // add subview self.view.addSubview(roundView)* 

它显示如下

你能建议我怎么做。 目前我正面临将百分比转换为度数的问题。

Answer 1

你的问题是你没有画出完整的路径 – 单独一个弧就不会这样做。 您需要在中心开始路径，并绘制线段的直边和弧。 这里是Playground – 我尽量保持你的风格，但已经引入了参数proportion ，即你的百分比， startAngle是片段的方向。

 import UIKit let roundView = UIView(frame:CGRect(x: 100, y: 100, width: 250, height: 250)) roundView.backgroundColor = UIColor.white roundView.layer.cornerRadius = roundView.frame.size.width / 2 // vary this to move the start of the arc let startAngle = -CGFloat.pi / 2 // This corresponds to 12 0'clock // vary this to vary the size of the segment, in per cent let proportion = CGFloat(80) let centre = CGPoint (x: roundView.frame.size.width / 2, y: roundView.frame.size.height / 2) let radius = roundView.frame.size.width / 2 let arc = CGFloat.pi * 2 * proportion / 100 // ie the proportion of a full circle // Start a mutable path let cPath = UIBezierPath() // Move to the centre cPath.move(to: centre) // Draw a line to the circumference cPath.addLine(to: CGPoint(x: centre.x + radius * cos(startAngle), y: centre.y + radius * sin(startAngle))) // NOW draw the arc cPath.addArc(withCenter: centre, radius: radius, startAngle: startAngle, endAngle: arc + startAngle, clockwise: true) // Line back to the centre, where we started (or the stroke doesn't work, though the fill does) cPath.addLine(to: CGPoint(x: centre.x, y: centre.y)) // nb as @MartinR points out `cPath.close()` does the same! // circle shape let circleShape = CAShapeLayer() circleShape.path = cPath.cgPath circleShape.strokeColor = UIColor.black.cgColor circleShape.fillColor = UIColor.green.cgColor circleShape.lineWidth = 1.5 // add sublayer roundView.layer.addSublayer(circleShape) roundView 

奖金 – 添加文本标签

在我的初步回答之后，OP抛出了几个弯曲的球，包括定位分段（在上面实现）并用百分比标记分段，这实际上应该是一个单独的问题，但是，这不是一个不合理的事情。一个饼图，所以这里是……

 // Bonus - add text layer // choose your font let fontSize = CGFloat(20) let font = UIFont.systemFont(ofSize: fontSize) let attributes = [NSFontAttributeName: font] // Format the string let str = String(format: "%3.0f%%", proportion) // Calculate the text size let textSize = str.size(attributes: attributes) // Assume the centre of the text is half way along the bisector of the segment let halfAngle = startAngle + arc / 2 let centreText = CGPoint(x: centre.x + radius * cos(halfAngle) / 2, y: centre.y + radius * sin(halfAngle) / 2) // calculate the the lower left of the label given the size let originText = CGPoint(x: centreText.x - textSize.width / 2, y: centreText.y - textSize.height / 2) // Allocate the text layer let label = CATextLayer() label.font = font label.fontSize = fontSize label.frame = CGRect(origin: originText, size: textSize) label.string = str label.alignmentMode = kCAAlignmentCenter label.foregroundColor = UIColor.black.cgColor roundView.layer.addSublayer(label) roundView