Search code examples
iosuikitcalayer

CALayer: create broken ellipse with round edges?

Here is my code to add an elliptic CALayer to a UIView:

let circleLayer = CAShapeLayer()
circleLayer.path = UIBezierPath(arcCenter: CGPoint(x: frame.size.width / 2, y: frame.size.height / 2),
                                radius: frame.size.width / 2,
                                startAngle: -.pi / 2,
                                endAngle: .pi / 6,
                                clockwise: false).cgPath
circleLayer.lineWidth = 8.0
circleLayer.cornerRadius = 4.0
circleLayer.strokeColor = UIColor.black.cgColor
circleLayer.fillColor = UIColor.clear.cgColor
circleLayer.lineJoin = .round
squareView.layer.backgroundColor = UIColor.clear.cgColor
squareView.layer.addSublayer(circleLayer)

The result I get :

enter image description here

However, I would like to get this result instead:

enter image description here

Could you help me getting this?

Thank you for your help!

Solution

  • To make your line caps round, simply tell your shape layer to use round line caps:

    circleLayer.lineCap = .round