计算沿曲线均匀分布的点答案

【问题标题】：Calculate evenly distributed points along a curve计算沿曲线均匀分布的点
【发布时间】：2017-12-08 00:38:42
【问题描述】：

我正在使用这个方程来计算沿二次曲线的一系列点：

// Returns a point on a quadratic bezier curve with Robert Penner's optimization of the standard equation
result.x = sx + t * (2 * (1 - t) * (cx - sx) + t * (ex - sx));
result.y = sy + t * (2 * (1 - t) * (cy - sy) + t * (ey - sy));

遗憾的是，这些点分布不均，如下面的虚线渲染所示。这些点在曲线的中间更密集，并且在边缘附近间隔得更远。如何计算沿二次贝塞尔曲线均匀分布的一组点？

请注意，我正在使用它来渲染虚线，因此 MATLAB 中的慢速解决方案或其他方法将不起作用。我需要一个适合渲染器的快速解决方案。这不是为了研究或一次性计算！

编辑：我不是在问如何完成上述操作。以上是我的渲染！我已经知道如何估计贝塞尔曲线的长度、计算点数等等。我需要的是一种更好的贝塞尔曲线点插值算法，因为我所计算的点沿曲线不均匀分布曲线！

【问题讨论】：

与此类似 (stackoverflow.com/questions/18244305/…) 但我想要一些更简单的东西并在 JS 中编写代码。
github.com/MadLittleMods/svg-curve-lib , gamedev.stackexchange.com/questions/5373/… ....当寻找这个问题的答案时，甚至可以沿着路径移动速度，或者类似的东西，这就是我通常找到答案的方式

标签： javascript geometry bezier curve

【解决方案1】：

您希望生成二次贝塞尔曲线的等距（按弧长）细分。

所以你需要细分程序和function for calculation of curve length。

求整条曲线的长度（L），估计需要的线段数（N），然后生成细分点，调整t参数得到长度约为L/N的Bezier线段

示例：您发现 L=100 并且想要 N=4 段。得到t=1/2，将曲线分为两部分，得到第一部分的长度。如果长度 > 50，则减小 t 并再次细分曲线。重复（使用二分搜索）直到长度值接近 50。记住 t 值并执行相同的过程以获得长度为 25 的段，用于曲线的前半部分和后半部分。

【讨论】：

我已经这样做了！我需要的是一种更好的贝塞尔点插值算法，因为我所做的会导致点分布不均匀！！
看看我在帖子第一段中提供的方程式。我需要一个更好的版本。一个方程，您提供 T 值，它提供沿曲线均匀分布的贝塞尔点的 x/y，其中 T=0 是起点，T=1 是终点。
我确实简短地描述了这样的过程 - 但您需要使用数字方法搜索 t 值以获得等距点

【解决方案2】：

这种方法使用 THREE.js 库，这不是 OP 的问题，但如果只是看看他们如何处理它可能会有用：

  var curve = new THREE.QuadraticBezierCurve(
    new THREE.Vector2( -10, 0 ),
    new THREE.Vector2( 20, 15 ),
    new THREE.Vector2( 10, 0 )
);

  var points = curve.getSpacedPoints(numPoints);

【讨论】：