javascript - .isPointInPath()用于描边线和折线

我需要一种机制来检测具有不同笔触宽度的线，曲线和折线的鼠标悬停事件，我已经为矩形和椭圆建立了这样一种机制，所以我对canvas API并不陌生。我会勾勒出所有绘制的对象并检测鼠标在其上的位置，当矩形或椭圆的笔划宽度大于1像素时，我会扩展路径，使其也包含边框。对于线和折线，当我的lineWidth为20像素时，我很难理解如何扩展它们。

我的问题是:如何在某些形状路径中变换直线，曲线和折线，以便该路径可以包含其所有宽度？

我需要创建的路径包含该图中用黑色表示的线/曲线宽度。

----------更多信息----------

我将尝试简化问题:
我们有2个点(在下图中以红色表示)，它们形成一条具有特定公式(y = mx + n)的线，我需要推导穿过这两个初始点的垂直线的公式，之后，则有必要确定“蓝色”点的位置，该位置在context.lineWidth值的一半处。确定了所有点后，就可以使用moveTo()和lineTo()序列。该方法应适用于使用控制点的二次曲线和贝塞尔曲线。问题仅存在于这些数学计算中。

最佳答案

我在math.stackexchange here上找到了解决方案，该解决方案仅适用于直线，但适用于经过某些特定修改的曲线和折线。首先，我们需要确定穿过两个初始点的直线的公式:

步骤1



之后，有必要以简短的形式定义此公式:

第2步



当我们具有直线的斜率时，我们需要在其上垂直线的斜率:

第三步



现在我们需要获取两个初始点的邻居点:

第四步



如果要在应用程序中实现这些公式，则应缓存一些结果以提高性能。

关于javascript - .isPointInPath()用于描边线和折线，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11485316/