在一点分割三次贝塞尔曲线答案

【问题标题】：Split a cubic Bézier curve at a point在一点分割三次贝塞尔曲线
【发布时间】：2017-12-12 23:41:28
【问题描述】：

This question 和this question 都展示了如何在特定参数化值 0 ≤ t ≤ 1 处沿曲线分割三次贝塞尔曲线，由两个新段组成原始曲线形状。我需要在我知道坐标的曲线上的一点上分割我的贝塞尔曲线，但不是该点的参数化值 t。

以 Adobe Illustrator 为例，用户可以在其中单击曲线将一个点添加到路径中，而不会影响路径的形状。

假设我find the point on the curve 最接近用户点击的位置，我该如何计算控制点？给定曲线上的一个点，是否有分割贝塞尔曲线的公式？

或者（不太理想），给定曲线上的一个点，有没有办法确定对应于该点的参数化值 t（除了在二分搜索中使用 De Casteljau 算法） ?

我的 Bézier 曲线恰好只是二维的，但一个很好的答案将包括应用于任意维度所需的向量数学。

【问题讨论】：

IIRC 和 Bezier curve can be represented as a matrix 插入参数值并获取坐标，您可以（理论上）计算逆矩阵并使用它，也许。
找到曲线上最近的点假定确定 t 值。
准确找到最近的点并不是那么简单，因为它需要求解一个二维的 6 阶多项式。但是您也可以在屏幕空间中执行此操作。绘制曲线时，将相应的 t 值绘制到单独的缓冲区中。然后，您只需要进行屏幕空间最近点搜索，即可立即知道参数。顺便说一句，对参数的二分搜索也不起作用，因为三次曲线中的坐标不是单调的。
@NicoSchertler 我怀疑二进制搜索会失败，but I had to try。对。很多地方都不完美。在我的情况下，其他人（网络浏览器 SVG）正在绘制曲线，所以我必须自己绘制它以找到最接近的。麻烦的是，SVG 坐标并不总是像素，所以我必须仔细选择我的行进尺寸以平衡性能和精度。感谢您的输入。好消息：一旦我使用这种方法找到了位置，我也将使用 t 值进行拆分。
我建议你阅读 Pomax 关于贝塞尔曲线的综合书籍，可能交叉点和求根会帮助你获得四次曲线：pomax.github.io/bezierinfo/#intersections。但是，我认为使用 de Casteljau 和二分搜索可能会更好，它适用于任何程度的贝塞尔曲线。

【解决方案1】：

在不使用 De Casteljau 算法的情况下确定曲线上某个点的参数值是可能的，而且可能更简单，但您必须使用启发式方法来找到一个好的起始值并类似地近似结果。

一种可能且相当简单的方法是使用牛顿法：

t_n+1 = t_n - ( b_x(t_n) - c_x ) / b_x'(t_n)

其中 b_x(t) 指的是具有控制点 x 的多项式形式的某些贝塞尔曲线的 x 分量₀、x₁、x₂ 和 x₃，b_x'(t)是一阶导数，c_x 是曲线上的一个点，使得：

c_x = b_x(t) | 0

b_x(t)的系数为：

A = -x₀ + 3x₁ - 3x₂ + x₃ em>
B = 3x₀ - 6x₁ + 3x₂
C = -3x₀ + 3x₁
D = x₀

和：

b_x(t) = At³ + Bt² + Ct + D,
b_x'(t) = 3At² + 2Bt + C

现在找到一个很好的起始值来插入牛顿的方法是棘手的部分。对于大多数不包含环或尖点的曲线，您可以简单地使用公式：

t_n = ( c_x - x₀ ) / ( x₃ - x ₀ ) | x₀1 2 3

现在你已经有了：

b_x(t_n) ≈ c_x

因此，应用牛顿法的一个或多个迭代将为 c_x 提供一个更好的 t 近似值。

请注意，Newton Raphson 算法具有二次收敛性。在大多数情况下，一个好的起始值在两次迭代后会导致可以忽略不计的改进，即不到半个像素。

最后值得注意的是，三次贝塞尔曲线具有通过求一阶导数的根来求极值的精确解。因此，有问题的曲线可以简单地在它们的极值处细分以去除环或尖点，然后通过分析有问题的结果部分可以获得更好的结果。以这种方式细分三次方将满足上述约束。

【讨论】：