计算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
}

任何有关正确方向的帮助或建议都将受到高度赞赏。 最好的祝福， ROI

Answer 1

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

仔细观察，你会发现4个角中的3个是平滑的曲线，而且其中一个有一个“扭曲”＃34;在里面。弯曲的角落似乎不是被移动的角落。这可能是开始/结束点。