Search code examples
iosswiftcore-graphicscore-animation

How to round UIBezierPath line edge?


I have a line drawn by UIBezierPath:

let line = CAShapeLayer()
line.path = UIBezierPath(arcCenter: center,
                          radius: radius,
                          startAngle: CGFloat(114.0/180.0) * .pi,
                          endAngle: .pi,
                          clockwise: true).cgPath
line.lineWidth = LINE_WIDTH
line.strokeColor = UIColor.red.withAlphaComponent(0.9).cgColor
line.fillColor = UIColor.clear.cgColor

I try to round the corner by adding some new CAShapeLayer():

let corner = CAShapeLayer()
corner.path = UIBezierPath(arcCenter: coordByCorner(114.0*1.00035),
                           radius: LINE_WIDTH/2,
                           startAngle: CGFloat(114.0/180.0) * .pi,
                           endAngle: CGFloat(114.0/180.0 + 1) * .pi,
                           clockwise: false).cgPath
corner.strokeColor = UIColor.clear.cgColor
corner.fillColor = UIColor.red.withAlphaComponent(0.9).cgColor

line.addSublayer(corner)

But I think this is a bad variant and when I change colors for layers, colors changes with different timeInterval.

Also, this all looks like this:

enter image description here

P.S.: 1.00035 there is to remove the gap between layers. And alpha needs to be < 1.0 (0.1 - 0.9). So how to do this while keeping the alpha?


Solution

  • Problem solved by adding kCALineCapRound

    let line = CAShapeLayer()
    line.path = UIBezierPath(arcCenter: center,
                          radius: radius,
                          startAngle: CGFloat(114.0/180.0) * .pi,
                          endAngle: .pi,
                          clockwise: true).cgPath
    line.lineWidth = LINE_WIDTH
    line.strokeColor = UIColor.red.withAlphaComponent(0.9).cgColor
    line.fillColor = UIColor.clear.cgColor
    line.lineCap = kCALineCapRound // this parameter solve my problem