How to smooth curve in UIBezierPath symmetrically

Question

I am writing a custom component in Swift with UIBezierPath and I am facing difficulties to correctly find the control points to create a perfect path around a circle. Please have a look of the component below:

Please note that the circle is not following the yellow ball perfectly in the blue circle area, I tried to set the control points to the right position but they are not resulting a good result:

The function used to describe the path above is partially this:


//private let MAGIC_NUMBER: CGFloat = 0.552284749831
private let MAGIC_NUMBER: CGFloat = 0.5

//...

let secondPointEnd: CGPoint = CGPoint(x: middleLeft.x + ballRadius/2, y: middleLeft.y + ballRadius/2)

path.addCurve(
    to: secondPointEnd,
    controlPoint1: CGPoint(x: firstPointEnd.x, y: secondPointEnd.y - (ballRadius * MAGIC_NUMBER)),
    controlPoint2: CGPoint(x: firstPointEnd.x, y: secondPointEnd.y))

let thirdPointStart: CGPoint = CGPoint(x: secondPointEnd.x + ballRadius/2, y: secondPointEnd.y - ballRadius/2)
path.addCurve(
    to: thirdPointStart,
    controlPoint1: CGPoint(x: thirdPointStart.x, y: secondPointEnd.y),
    controlPoint2: CGPoint(x: thirdPointStart.x, y: secondPointEnd.y - (ballRadius * MAGIC_NUMBER)))

For the full source code (Playground): https://gist.github.com/ppamorim/feb3318ac30e20a75d9c62e8abdc2efa

I tried to fix it with multiple configurations, I had no success so far, I also tried to apply the magic number 0.552284749831 but it makes it worse. Am I missing some control point configuration? Is there any invalid control point there?

Could you guys please help me to find what is wrong with this bezier path?

Regards,

Pedro

With help from @Bob, I was able to complete the UIBezierPath like he described: https://gist.github.com/ppamorim/9390708c455a950a65621715ce7b6c82

please update your playground code .. its showing black view only — Jawad Ali, May 18 '20 at 22:04
@Rob Here is the final code: https://gist.github.com/ppamorim/8f64fb5c39aea2eac934d8a626a665f4 Do you know if there is any way to smooth the rounded corners like described in this question? https://stackoverflow.com/questions/52310339/smooth-rounded-corners-in-swift — Pedro Paulo Amorim, May 18 '20 at 22:22

score 1 · Accepted Answer · answered May 18 '20 at 22:27

I wouldn’t recommend rendering the circular bit with beziers. They’re extremely close, but not spot on. It’s fine approximation for corner rounding of a rectangle (or any polygon), but for a true circular portion of the path you should use addArc(withCenter:radius:startAngle:endAngle:clockwise:).

You can use beziers leading into and out of the arc, if you want, but for the circular portion, use an arc. E.g. see https://stackoverflow.com/a/60862388/1271826.

Thank you, this example is amazing and works beautifully. – Pedro Paulo Amorim May 18 '20 at 22:30 — Pedro Paulo Amorim, May 18 '20 at 22:30

How to smooth curve in UIBezierPath symmetrically

1 Answers1