javascript - 检查一个点位于样条/贝塞尔曲线上的哪些点之间

标签 javascript algorithm geometry computational-geometry bezier

这就是我要解决的问题。我有包含 3 个点 (x1, y1)、(x2, y2)、(x3, y3)(位于二维平面中)的贝塞尔曲线。我想弄清楚的是,用户是否在贝塞尔曲线上点击了第四个点,点击点是位于点 1 和点 2 之间,还是位于点 2 和点 3 之间。点击点仅在线条为直接点击,因此它必须位于点 1 和点 2 或点 2 和点 3 之间。

这些行是在编译时随机创建的,可以从任何 (x, y) 位置开始和结束。 example of a curve

组成直线的3组点是起点、曲线点和终点。这三个点是直线的控制点。然后从控制点创建一个线对象。每次运行程序时都会随机创建控制点,从而使样条曲线每次都不同。

对于这个问题,是否应该遵循任何特定的算法。我在 javascript 中对此进行编码,但任何类似伪代码的 C++ 或 Java 都可以。感谢您的帮助。

最佳答案

为您的曲线构建一个 LUT(查找表),以便当用户点击它时,您可以将他们点击的 (x,y) 坐标解析为曲线的 t 值(或其他任何值)当然,你调用了你的控制变量)。与其基于 (x,y) 坐标进行评估(这实际上是不可能的),不如将所有四个坐标都解析为 t 值,这变得非常简单:

当 (x1,y1) 为 t=0,(x2,y2) 为某个 t=T 且 (x3,y3) 为 t=1 时,如果用户点击曲线上的任意位置,我们会得到一个新的 t 值。如果该值小于 T,则该点位于点 1 和点 2 之间,如果该值大于 T,则该点位于点 2 和点 3 之间。

构建查找表应该是每条曲线的一次性操作,在您第一次绘制曲线时运行,因为那时您已经将 t 值映射到 (x,y) 坐标,因此您可以“免费”构建反向映射。如果您不控制绘制代码,则在创建曲线时必须运行自己的代码。

这有一个问题:您在此处给出的曲线(由三个曲线上的点定义)不是定义贝塞尔曲线的常用方法。对于贝塞尔曲线,控制点定义了曲线的“外壳”;对于二次曲线(具有三个点),这意味着点 1 和 3 在曲线上,但点 2 非常不在曲线上。要找到基于这三个点的真实贝塞尔曲线(即通过这三个点的曲线),您需要运行将三个点变成真实曲线的算法。

(告诉你如何做到这一点的完整代码几乎超出了这个答案的范围,但我在一篇关于贝塞尔曲线的长篇文章中对此进行了解释,最终在 http://pomax.github.io/bezierinfo/#pointcurves 中基于三点形成真实曲线)

关于javascript - 检查一个点位于样条/贝塞尔曲线上的哪些点之间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16995743/

相关文章:

javascript - 为什么 0 == ""在 JavaScript 中为真

javascript - Javascript HTML播放声音仅一次,但是发生了更多奇怪的事情

arrays - 如果可以删除任何一个元素,则查找是否可以将数组分为相等和的两个子数组

algorithm - 算法的 OOP 与 PP

geometry - 圆-矩形碰撞检测(交叉点)

javascript - 为什么Jquery hide和js style.display ="none"不能互换

javascript - 如何在 JavaScript 中创建无限循环

arrays - 考虑所有连续子数组的数组每个元素的频率

python - 贝塞尔曲线与线段的交点

delphi - 计算邻域距离