iOS (Swift) Annuls-shaped UIBezierPath for CAShapeLayer - ios

Question

I'm trying to make an annulus-shaped UIBezierPath to use as the path of a CAShapeLayer
The following produces a circular path:
let radius = 100.0
let circularPath = UIBezierPath(arcCenter: .zero, radius: radius, startAngle: 0.0, endAngle: 2.0 * .pi, clockwise: true)
let layer = CAShapeLayer()
layer.path = circularPath.cgPath
However, I want an annuls-shaped UIBezierPath that fills between radius and say outerRadius = radius + 10.

Answer 1

If this is what you're going for ("Annulus" shape):
You can achieve it by creating an Oval path and appending a smaller Oval path.
You can run this directly in a Playground page to get that result:
import PlaygroundSupport
import UIKit
class AnnulusView: UIView {
private var annulusLayer: CAShapeLayer!
private var annulusWidth: CGFloat = 10.0
private var fillColor: UIColor = .red
override func layoutSubviews() {
super.layoutSubviews()
if annulusLayer == nil {
annulusLayer = CAShapeLayer()
layer.addSublayer(annulusLayer)
}
let r = bounds
let outerPath = UIBezierPath(ovalIn: r)
let innerPath = UIBezierPath(ovalIn: r.insetBy(dx: annulusWidth, dy:annulusWidth))
outerPath.append(innerPath)
outerPath.usesEvenOddFillRule = true
annulusLayer.path = outerPath.cgPath
annulusLayer.fillRule = kCAFillRuleEvenOdd
annulusLayer.fillColor = fillColor.cgColor
// if you want a border
// annulusLayer.lineWidth = 1
// annulusLayer.strokeColor = UIColor.black.cgColor
}
}
class TestingViewController: UIViewController {
override public var preferredContentSize: CGSize {
get { return CGSize(width: 400, height: 400) }
set { super.preferredContentSize = newValue }
}
var theAnnulusView: AnnulusView = {
let v = AnnulusView()
v.translatesAutoresizingMaskIntoConstraints = false
return v
}()
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .white
view.addSubview(theAnnulusView)
// make the Annulus view 100x100 centered in this view
NSLayoutConstraint.activate([
theAnnulusView.widthAnchor.constraint(equalToConstant: 100),
theAnnulusView.heightAnchor.constraint(equalToConstant: 100),
theAnnulusView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
theAnnulusView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
])
}
}
let viewController = TestingViewController()
PlaygroundPage.current.liveView = viewController

Answer 2

Check out this, It might be helpful.
If you need a full circle, you need to adjust arcCenter
let width:CGFloat = 10
let radius:CGFloat = 100.0-width/2
let circularPath = UIBezierPath(arcCenter: .zero, radius: radius, startAngle: 0.0, endAngle: 2.0 * .pi, clockwise: true)
let layer = CAShapeLayer()
layer.lineWidth = width
layer.path = circularPath.cgPath