javascript - 查找二次贝塞尔曲线与点或矩形之间的最短距离

Question

我正在开发一个简单的白板应用程序，其中的绘图由二次贝塞尔曲线表示(使用 JavaScript 的 CanvasPath.quadraticCurveTo 函数)。我正在尝试实现功能，以便橡皮擦工具或选择工具能够确定它们是否正在触摸绘图。
为了说明我在说什么，下图中是一个红色绘图，我需要能够确定黑色矩形和黑点与绘图区域重叠。出于调试目的，我添加了作为曲线控制点的蓝色圆圈和相同的贝塞尔曲线但宽度更小的绿线。

我已经包含了生成贝塞尔曲线的代码:

        context.beginPath();
        context.moveTo(localPoints[0].x, localPoints[0].y);
        let i;
        for (i = 1; i < localPoints.length - 2; i++)
        {
            let xc = (localPoints[i].x + localPoints[i + 1].x) / 2;
            let yc = (localPoints[i].y + localPoints[i + 1].y) / 2;
            context.quadraticCurveTo(localPoints[i].x, localPoints[i].y, xc, yc);
        }
        // curve through the last two points
        context.quadraticCurveTo(localPoints[i].x, localPoints[i].y, localPoints[i + 1].x, localPoints[i + 1].y);
        context.stroke();

我已经能够找到有关如何确定线段是否与贝塞尔曲线相交的答案，但我无法找到如何确定某物是否与实际曲线相交但足够接近以被认为与其重叠的“区域”。为此，我认为我只需要找到曲线和矩形/点之间的距离，然后确保距离小于用于绘制曲线的宽度，但我不确定如何找到该距离。

Answer 1

一些有趣的文章/帖子:
How to track coordinates on the quadraticCurve
https://coderedirect.com/questions/385964/nearest-point-on-a-quadratic-bezier-curve
如果它不起作用，也许你可以看看这个库:https://pomax.github.io/bezierjs/
正如 Pomax 在评论中所建议的那样，您正在寻找的东西在图书馆中，看起来有一个适当的解释。
如果您想尝试，有一个现场演示:https://pomax.github.io/bezierinfo/#projections
它的源代码在这里:https://pomax.github.io/bezierinfo/chapters/projections/project.js

要使用它，请使用 GitHub 中的步骤安装它:https://github.com/Pomax/bezierjs
当然要感谢 Pomax 推荐他的图书馆