title: CAShapeLayer is off center
body: <p>I have been trying to create a a custom &quot;slider&quot; or knob with <code>UIControl</code> for my app. I found <a href="https://www.raywenderlich.com/5294-how-to-make-a-custom-control-tutorial-a-reusable-knob" rel="nofollow noreferrer">this</a> tutorial and have been using it for some inspiration, but since it does not really accomplish what I want to do I am using it as more of a reference than a tutorial. Anyways, I wrote the code below and found that my CAShapeLayer was not in the center of the UIView that I set to be an instance of my custom class <code>CircularSelector</code>.</p>
  <p>Here is my code:</p>
  <pre><code>    class CircularSelector: UIControl {
       
       
       private let renderer = CircularSelectorRenderer()
       
       override init(frame: CGRect) {
         super.init(frame: frame)
         commonInit()
       }
       
       required init?(coder aDecoder: NSCoder) {
         super.init(coder: aDecoder)
         commonInit()
       }
       
       private func commonInit() {
           
           renderer.updateBounds(bounds)
           //layer.borderWidth = 4
          // layer.borderColor = UIColor.red.cgColor
           layer.addSublayer(renderer.selectorLayer)
       }
       
   }
  
  
   class CircularSelectorRenderer {
       
       
       let selectorLayer = CAShapeLayer()
       
       init() {
           selectorLayer.fillColor = UIColor.clear.cgColor
           selectorLayer.strokeColor = UIColor.white.cgColor
           //Testing
           //selectorLayer.borderColor = UIColor.white.cgColor
          // selectorLayer.borderWidth = 4
           
       }
       
       private func updateSelectorLayerPath() {
           let bounds = selectorLayer.bounds
           let arcCenter = CGPoint(x: bounds.midX, y: bounds.maxY)
           let radius = 125
           
           var ring = UIBezierPath(arcCenter: arcCenter, radius: CGFloat(radius), startAngle: 0.degreesToRadians, endAngle: 180.degreesToRadians, clockwise: false)
           
           selectorLayer.lineWidth = 10
           selectorLayer.path = ring.cgPath
           
       }
       
       func updateBounds(_ bounds: CGRect) {
           selectorLayer.bounds = bounds
           selectorLayer.position = CGPoint(x: bounds.midX, y: bounds.midY)
           updateSelectorLayerPath()
           
       }
       
   }
  </code></pre>
  <p>This is what I get:</p>
  <p><a href="https://i.stack.imgur.com/6dJ6P.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6dJ6P.png" alt="Simulator" /></a></p>
  <p>and when I uncomment the code under the <code>//Testing</code> line in the <code>init()</code> of the <code>CircularSelectorRenderer</code> I get this:</p>
  <p><a href="https://i.stack.imgur.com/govbK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/govbK.png" alt="Simulator" /></a></p>
  <p>The grey UIView is of the class <code>CircularSelector</code>. I am confused as to why my <code>CAShapeLayer</code> is wider than the grey view itself and why it is not in the center of the grey view. Why is this happening and how can I fix it.</p>