如何在 UIBezierPath 中对称地平滑曲线

Question

我正在使用UIBezierPath在 Swift 中编写一个自定义组件，并且我在正确找到控制点以围绕圆创建完美路径时遇到了困难。 请看下面的组件：

请注意，蓝色圆圈区域中的圆圈没有完全跟随黄色球，我尝试将控制点设置在右侧 position 但它们没有产生好的结果：

用于描述上述路径的 function 部分是这样的：

//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)))

完整源代码（游乐场）： https://gist.github.com/ppamorim/feb3318ac30e20a75d9c62e8abdc2efa

我尝试使用多种配置修复它，到目前为止我没有成功，我还尝试应用幻数0.552284749831但它使情况变得更糟。 我是否缺少一些控制点配置？ 那里有无效的控制点吗？

你们能帮我找出这条贝塞尔路径有什么问题吗？

问候，

佩德罗

在@Bob 的帮助下，我能够像他描述的那样完成UIBezierPath ： https://gist.github.com/ppamorim/9390708c455a950a652621715ce7b6c8

Answer 1

我不建议使用贝塞尔曲线渲染圆形位。 它们非常接近，但并不准确。 这是矩形（或任何多边形）的圆角的近似值，但对于路径的真正圆形部分，您应该使用addArc(withCenter:radius:startAngle:endAngle:clockwise:) 。

如果需要，您可以使用引入和引出圆弧的贝塞尔曲线，但对于圆形部分，请使用圆弧。 例如，参见https://stackoverflow.com/a/60862388/1271826 。