Javascript 计算沿曲线均匀分布的点

我用这个方程来计算二次曲线上的一系列点：

// 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中使用缓慢的解决方案或其他方法是不行的。我需要一个快速的解决方案，将适合内渲染器。这不是用于研究或一次性计算

---

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

要生成二次贝塞尔曲线的等距（按弧长）细分

所以你需要细分程序和步骤

找到整个曲线的长度（

L

），估计所需的分段数（

N

），然后生成细分点，调整

t

参数以获得长度约为

L/N

---

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

您希望生成等距（按弧长）的二次Bezier曲线细分

所以你需要细分程序和步骤

找到整个曲线的长度（

L

），估计所需的分段数（

N

），然后生成细分点，调整

t

参数以获得长度约为

L/N

---

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

此方法使用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);

---

这种方法使用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);

---

与此（）类似，但我需要更简单的东西和JS中的代码。。。。在寻找这个问题的答案时，沿着一条路径查找匀速运动，或者类似的东西，我通常会发现答案与此类似（），但我想要更简单的东西，并用JS编写代码。。。。当我在寻找这个问题的答案时，沿着一条路径，或者类似的速度，我通常会找到答案，我已经在做了！我需要的是一个更好的bezier点插值算法，因为我正在做的那个会导致点分布不均匀！！看看我在文章第一段中提供的等式。我需要一个更好的版本。一个方程，其中提供T值，它提供沿曲线均匀分布的bezier点的x/y，其中T=0是起点，T=1是终点。我确实简单描述了这一过程，但你需要用数值方法搜索等距点的T值。我已经这样做了！我需要的是一个更好的bezier点插值算法，因为我正在做的那个会导致点分布不均匀！！看看我在文章第一段中提供的等式。我需要一个更好的版本。一个方程，其中提供T值，它提供沿曲线均匀分布的bezier点的x/y，其中T=0是起点，T=1是终点。我确实简单地描述了这一过程，但您需要用数值方法搜索T值以寻找等距点