bezier - 简化高阶贝塞尔曲线

Question

我有一组代表贝塞尔曲线的控制点。它可以是五阶或 100 阶贝塞尔曲线，或介于两者之间的任何曲线。我正在寻找一种方法将贝塞尔曲线简化为多个三次贝塞尔曲线。下图显示了如何将十度曲线简化为三度曲线，但我想更进一步，将其简化为几条三次贝塞尔曲线以实现更好的近似。



代码示例将非常有帮助。

Answer 1

正如 mohsenmadi 已经指出的那样:一般来说，如果不提出自己的错误度量标准，您就无法做到这一点。另一个想法是“好吧，让我们将这条曲线近似为一系列低阶曲线”，这样我们就会得到看起来更好的东西，并且实际上不需要错误度量。这有点像将曲线“展平”为线条，除了我们将使用三次贝塞尔线段代替线条，这提供了漂亮的曲线，同时就现代图形库而言，保持一切“易于处理”。

然后我们可以做的是:通过定期对曲线进行采样，然后通过 Catmull-Rom 算法运行这些点，将“100 阶曲线”拆分为一系列三次贝塞尔曲线。程序非常简单:

为 t 选择一些规则间隔的值，如 0、0.2、0.4、0.6、0.8 和 1，然后

创建点集 tvalues.map(t => getCoordinate(curve, t))。然后，

建立虚拟起点和终点:形成一个点0从点 1 开始并沿其切线向后移动，并形成一个点 n+1从 n 开始并遵循其切线。我们这样做，因为:

从虚拟点开始构建 poly-Catmull-Rom 0并在虚拟点结束 n+1 .

让我们在图片中做到这一点。让我们从 11 阶贝塞尔曲线开始:



然后让我们定期采样:



我们发明了第 0 点和第 n+1 点:



然后我们运行 Catmull-Rom 程序:

i = 0
e = points.length-4
curves = []
do {
  crset = points.subset(i, 4)
  curves.push(formCRCurve(crset))
} while(i++<e)

formCRCurve 有什么作用？好问题:

formCRCurve(points: p1, p2, p3, p4):
  d_start = vector(p2.x - p1.x, p2.y - p1.y)
  d_end = vector(p4.x - p3.x, p4.y - p3.y)
  return Curve(p2, d_start, d_end, p3)

所以我们明白为什么我们需要这些虚拟点:给定四个点，我们可以形成一条从点 2 到点 3 的 Catmull-Rom 曲线，使用我们从点 1 和点 4 得到的切线信息的帮助。

当然，我们实际上想要 Bezier 曲线，而不是 Catmull-Rom 曲线，但因为它们是相同的“种类”曲线，我们可以 freely convert between the two ， 所以:

i = 0
e = points.length-4
bcurves = []
do {
  pointset = points.subset(i, 4)
  bcurves.push(formBezierCurve(pointset))
} while(i++<e)

formBezierCurve(points: p1, p2, p3, p4):
  return bezier(
    p2,
    p2 + (p3 - p1)/6
    p3 - (p4 - p2)/6
    p3
  )

因此，基于点 {p1,p2,p3,p4} 的 Catmull-Rom 曲线经过点 p2和 p3 , 可以写成使用 start/control1/control2/end 坐标 p2 的等效贝塞尔曲线, p2 + (p3 - p1)/6 , p3 - (p4 - p2)/6 , 和 p3 .