如何对称平滑 UIBezierPath 中的曲线

Question

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

请注意，在蓝色圆圈区域，圆圈并没有完全跟随黄球，我尝试将控制点设置到正确的位置，但结果并不理想：

上面描述路径的函数部分是这样的：


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

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

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

你们能帮我看看这个贝塞尔路径有什么问题吗？

此致，

佩德罗

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

Answer 1

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

如果需要，您可以使用引入和引出圆弧的贝塞尔曲线，但对于圆形部分，请使用圆弧。例如。参见。

如何对称平滑 UIBezierPath 中的曲线

How to smooth curve in UIBezierPath symmetrically

swift

uibezierpath