时间戳

首页 > 解决方案 > 如何在 UIBezierPath 中对称地平滑曲线

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

问题描述

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

在此处输入图像描述

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

在此处输入图像描述

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


//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/9390708c455a950a65621715ce7b6c82

标签： swiftuibezierpath

解决方案

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

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

推荐阅读