I have a line drawer 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 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 so bad variant, and when I change colors for layers, colors changes with different timeInterval.
Also, this all look like this:
P.S.: 1.00035 there is for remove the gap between layers. And alpha need to be < 1.0 (0.1 - 0.9), so how do its opaque?
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
A simple way of doing this is to create path shifted inwards by the desired cornerRadius
, stroke it with the twice as thick line and apply rounded line joining style.
let layer = CAShapeLayer()
layer.strokeColor = UIColor.lightGray.cgColor
layer.fillColor = UIColor.lightGray.cgColor
layer.lineWidth = 2.0 * cornerRadius
layer.lineJoin = kCALineJoinRound
layer.path = getSemicirclePath(
arcCenter: arcCenter,
radius: radius,
cornerRadius: cornerRadius
)
func getSemicirclePath(arcCenter: CGPoint, radius: CGFloat, cornerRadius: CGFloat) -> CGPath {
let path = UIBezierPath(
arcCenter: CGPoint(x: arcCenter.x, y: arcCenter.y - cornerRadius),
radius: radius - cornerRadius,
startAngle: .pi,
endAngle: 2.0 * .pi,
clockwise: true
)
path.close()
return path.cgPath
}
Here is the example result:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With