计算 UIBezierPath 曲线控制点

Posted 2023-03-13

【中文标题】计算 UIBezierPath 曲线控制点

【英文标题】：Calculate UIBezierPath Curved Control Point

【发布时间】：2018-03-11 12:53:56

【问题描述】：

我正在努力理解如何实现以下组件：

理论：

我已经成功创建了 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

我们将不胜感激任何有关正确方向的帮助或建议。 最好的祝福， 投资回报率

【问题讨论】：

您有至少两个技术问题需要处理。 (1) 更简单的方法是学习如何在基于 4 个点的“画布”上绘制 4 边多边形 或 四边形。请注意，此 不是 具有平行边或矩形形状，但 is 每边都有直线 - 您需要在代码中包含“规则”以确保“边”不相交。但这是 easy 部分。 (2) 接下来，您需要定义在曲线上绘制贝塞尔路径的“规则”...我注意到您的示例在曲线上的点上 no 押韵或原因。祝你好运。

嘿@dfd，谢谢你的回复。其实我已经解决了问题（1）。我有一个工作的 4 个可拖动 UIViews，它们使用贝塞尔路径创建一个“框”，由 CAShapeLayer 显示。我现在的问题是“控制点”，我如何计算每条线的略微圆润的控制点（线从每个 UIView 中心连接）。有什么想法吗？

这个形状似乎由四个二次或三次样条线组成，其支持点是相对于角点计算的。如果角点是矩形的角，你的形状是什么样子的？

@clemens 它看起来像一个矩形，平坦，没有曲线。当我将形状设置为矩形后移动其中一个角时。我看到曲线从拐角处开始，没有在中间。我将在问题中添加示例

@clemens 添加了更多插图。

【参考方案1】：

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

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

【讨论】：

你好邓肯，谢谢你的回复。不幸的是，我不明白如何将您的答案翻译成代码。您是否有机会详细说明或提供示例代码？非常感谢！

其实我觉得可能更简单。看起来它可能是 2 对不同的链接二次或三次贝塞尔曲线，其中每条曲线的起点在左上角，终点在右下角。我猜一条曲线由两条二次贝塞尔曲线组成：第一条在左上角有一个端点，第二个端点在右上角；第二个有 和 点在右上角和右下角。不知道中间控制点是怎么推导出来的。