javascript - 计算沿曲线均匀分布的点

Question

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

// 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 中的缓慢解决方案或其他方法将无法实现。我需要一个适合渲染器的快速解决方案。这不是为了研究或一次性计算!

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

Answer 1

您想要生成二次贝塞尔曲线的等距(按弧长)分割。

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

求整条曲线的长度(L)，估计所需的段数(N)，然后生成分割点，调整t用于获取长度约为 L/N

的贝塞尔曲线段的参数

示例:您发现 L=100 并且需要 N=4 段。得到t=1/2，将曲线分割为两部分，得到第一部分的长度。如果长度 > 50，则减小 t 并再次分割曲线。重复(使用二分查找)直到长度值接近 50。记住 t 值并执行相同的过程，为曲线的前半部分和后半部分获取长度=25 的线段。