ios - 计算 UIBezierPath 曲线控制点

Question

我正在努力了解如何实现以下组件:

理论:

我已经成功创建了 4 个可拖动的 UIView'。当其中一个 UIView 更改位置时，我正在创建 UIBezierPath，将每个 UIView 中心连接到一个盒子形状，并使用 CAShapeLayer 显示它。我无法理解如何计算“addQuadCurve”控制点以实现图中的曲线。

当前代码:

func updateLines() {
 let path = UIBezierPath()
 path.move(to: v.center)
 path.addLine(to: v2.center)
 path.addLine(to: v4.center)
 path.addLine(to: v3.center)
 path.close()
 line.path = path.cgPath
 line.strokeColor = UIColor.black.cgColor
 line.fillColor = UIColor.red.cgColor
}

对于正确方向的任何帮助或建议，我们将不胜感激。此致，投资返回率

Answer 1

在我看来，它就像一组相连的三次贝塞尔曲线，起点和终点在同一点。如果您观看动画，您会发现当您拖动不同的点时，曲线的开始/结束点会发生变化。

仔细观察，您会发现 4 个角中有 3 个是光滑的曲线，其中一个有一个“扭结”。扭结的角似乎不是被移动的那个点。这可能是起点/终点。