UIBezierPath bezierPathWithRoundedRect: the cornerRadius value is not consistent
Problem Description:
I want to draw a round rect in an CALayer using [UIBezierPath bezierPathWithRoundedRect: cornerRadius:], when setting up the rect’s cornerRadius, I found that it is not consistent from 0 to maximum radius(about half of the layer’s bound). The value jumped at about 1/3 of maximum radius which is quite confusing. After some research, I found probably it’s a bug of iOS7 style of UIBezierPath drawing a round rect. PaintCode’s research on that. So my question is how to draw an old style of perfect round rect with consistent cornerRadius value change?
Solution – 1
Took a look at the PaintCode link you posted (although, it’s much easier to answer questions here that explain the issue without having to go read an article somewhere else)…
Yes, it appears UIBezierPath(roundedRect: ...) is still buggy when the radius is greater than – as you noted – roughly 1/3 of 1/2 of the rect dimension.
To create a rounded rect path "manually," we can do this (using the rect dimensions and corner radius from that link):
let r: CGRect = CGRect(x: 0, y: 0, width: 150.0, height: 153.0)
let cornerRad: CGFloat = 50.0
// center points for the corner arcs
let ptCTR: CGPoint = CGPoint(x: r.maxX - cornerRad, y: r.minY + cornerRad)
let ptCBR: CGPoint = CGPoint(x: r.maxX - cornerRad, y: r.maxY - cornerRad)
let ptCBL: CGPoint = CGPoint(x: r.minX + cornerRad, y: r.maxY - cornerRad)
let ptCTL: CGPoint = CGPoint(x: r.minX + cornerRad, y: r.minY + cornerRad)
let bez: UIBezierPath = UIBezierPath()
// Top-Right corner
bez.addArc(withCenter: ptCTR, radius: cornerRad, startAngle: .pi * 1.5, endAngle: .pi * 0.0, clockwise: true)
// Bottom-Right corner
bez.addArc(withCenter: ptCBR, radius: cornerRad, startAngle: .pi * 0.0, endAngle: .pi * 0.5, clockwise: true)
// Bottom-Left corner
bez.addArc(withCenter: ptCBL, radius: cornerRad, startAngle: .pi * 0.5, endAngle: .pi * 1.0, clockwise: true)
// Top-Left corner
bez.addArc(withCenter: ptCTL, radius: cornerRad, startAngle: .pi * 1.0, endAngle: .pi * 1.5, clockwise: true)
// close the path
bez.close()