我有一些来自网络服务的百分比值。根据百分比值，我想通过以下方式在 UIView 中绘制一些弧线。
白圈是一个UIView，我尝试通过这种方式实现。
func colorProgress()
{
let circleColorPath=UIBezierPath(arcCenter: CGPoint.init(x: RDcircleEnum.circleCenterX.getValues(), y: RDcircleEnum.circleCenterY.getValues()), radius: self.innerCircleRadius, startAngle: CGFloat(0), endAngle: CGFloat(Double.pi*self.progressAmount), clockwise: true)
let shapeLayer = CAShapeLayer()
shapeLayer.path = circleColorPath.cgPath
//change the fill color
shapeLayer.fillColor = UIColor.blue.cgColor
//you can change the stroke color
shapeLayer.strokeColor = UIColor.red.cgColor
//you can change the line width
shapeLayer.lineWidth = 3.0
self.progressColor.setFill()
circleColorPath.fill()
}
但这并没有给出我想要的。我想根据百分比值绘制不同长度的弧线。请帮帮我。
这是您想要实现的完美逻辑:
https://codereview.stackexchange.com/questions/97615/draw-an-arc-based-on-a-given-percentage
自定义 UIView 类
import UIKit
class DemoView: UIView {
var startPoint: CGFloat = 0
var color: UIColor = UIColor.yellow
var trackColor: UIColor = UIColor.gray
var trackWidth: CGFloat = 1
var fillPercentage: CGFloat = 100
override init(frame: CGRect) {
super.init(frame: frame)
self.backgroundColor = UIColor.clear
} // init
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)!
self.backgroundColor = UIColor.clear
} // init
private func getGraphStartAndEndPointsInRadians() -> (graphStartingPoint: CGFloat, graphEndingPoint: CGFloat) {
// make sure our starting point is at least 0 and less than 100
if ( 0 > self.startPoint ) {
self.startPoint = 0
} else if ( 100 < self.startPoint ) {
self.startPoint = 100
} // if
// make sure our fill percentage is at least 0 and less than 100
if ( 0 > self.fillPercentage ) {
self.fillPercentage = 0
} else if ( 100 < self.fillPercentage ) {
self.fillPercentage = 100
} // if
// we take 25% off the starting point, so that a zero starting point
// begins at the top of the circle instead of the right side...
self.startPoint = self.startPoint - 25
// we calculate a true fill percentage as we need to account
// for the potential difference in starting points
let trueFillPercentage = self.fillPercentage + self.startPoint
let π: CGFloat = .pi
// now we can calculate our start and end points in radians
let startPoint: CGFloat = ((2 * π) / 100) * (CGFloat(self.startPoint))
let endPoint: CGFloat = ((2 * π) / 100) * (CGFloat(trueFillPercentage))
return(startPoint, endPoint)
} // func
override func draw(_ rect: CGRect) {
// first we want to find the centerpoint and the radius of our rect
let center: CGPoint = CGPoint(x: rect.midX, y: rect.midY)
let radius: CGFloat = rect.width / 2
// make sure our track width is at least 1
if ( 1 > self.trackWidth) {
self.trackWidth = 1
} // if
// and our track width cannot be greater than the radius of our circle
if ( radius < self.trackWidth ) {
self.trackWidth = radius
} // if
// we need our graph starting and ending points
let (graphStartingPoint, graphEndingPoint) = self.getGraphStartAndEndPointsInRadians()
// now we need to first draw the track...
let trackPath = UIBezierPath(arcCenter: center, radius: radius - (trackWidth / 2), startAngle: graphStartingPoint, endAngle: 2.0 * .pi, clockwise: true)
trackPath.lineWidth = trackWidth
self.trackColor.setStroke()
trackPath.stroke()
// now we can draw the progress arc
let percentagePath = UIBezierPath(arcCenter: center, radius: radius - (trackWidth / 2), startAngle: graphStartingPoint, endAngle: graphEndingPoint, clockwise: true)
percentagePath.lineWidth = trackWidth
percentagePath.lineCapStyle = .round
self.color.setStroke()
percentagePath.stroke()
return
} // func } // class
viewController 中的实现:
let demoView : DemoView = DemoView()
demoView.frame = CGRect(x: 50, y: 100, width: 200, height: 200)
demoView.trackWidth = 5
demoView.startPoint = 0
demoView.fillPercentage = 25
self.view.addSubview(demoView)
关于ios - 如何在swift 3中绘制弧线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46418786/
| 欢迎光临 OGeek|极客世界-中国程序员成长平台 (http://ogeek.cn/) | Powered by Discuz! X3.4 |