Thursday, March 14, 2024
HomeiOS Developmentios - Round progress view with outdoors stroke

ios – Round progress view with outdoors stroke


I’m attempting to create a round progress view that has stroke outdoors. However my stroke begins from inside the view as an alternative of the beginning from the skin it like border. How can I remedy it?

My code:

var progressLayer = CAShapeLayer()
var trackLayer = CAShapeLayer()

var progressLineWidth: CGFloat = 20
var progressColor = UIColor.inexperienced
var progress: Float = 0.5

let circlePath = UIBezierPath(arcCenter: CGPoint(x: body.measurement.width / 2.0 - 2, y: body.measurement.top / 2.0 - 2), radius: (body.measurement.width) / 2, startAngle: -(.pi / 2), endAngle: .pi * 1.5, clockwise: true)

trackLayer.path = circlePath.cgPath
trackLayer.strokeColor = UIColor.grey.cgColor
trackLayer.lineWidth = 10
trackLayer.strokeEnd = 1.0
trackLayer.lineDashPattern = [4,4]
trackLayer.fillColor = UIColor.crimson.cgColor
layer.addSublayer(trackLayer)

progressLayer.path = circlePath.cgPath
progressLayer.fillColor = UIColor.clear.cgColor
progressLayer.strokeColor = progressColor.cgColor
progressLayer.lineWidth = progressLineWidth
progressLayer.strokeEnd = CGFloat(progress)
progressLayer.strokeStart = 0
progressLayer.lineDashPattern = [4,4]
layer.addSublayer(progressLayer)

Consequence:

enter image description here

What I need to achive:

enter image description here

Grey and inexperienced strokes ought to begin from the skin of the crimson circle.



Supply hyperlink

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments