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

Question

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

我的问题是:如何将一些形状路径中的直线、曲线和多段线进行变换，使这条路径能够包含它们的所有宽度？

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

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

我会尽量简化问题:我们有 2 个点(在下图中以红色表示)，它们形成一条具有特定公式(y = mx + n)的线，我需要确定通过这两个初始点的垂直线的公式，之后，有必要确定“蓝色”点的位置，它们位于 context.lineWidth 值一半的距离处，当所有点都已确定后，可以使用 moveTo() 和创建新路径lineTo() 序列。这种方法应该适用于使用控制点的二次曲线和贝塞尔曲线。问题只存在于这些数学计算中。

Answer 1

您是否尝试过使用 Canvas 2D API 的 .isPointInStroke() 方法:

ctx.isPointInStroke(x, y);
ctx.isPointInStroke(path, x, y);

看看: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/isPointInStroke