Javascript 编辑：isPointInStroke的新线宽将替代以前的线宽

我有一条线，画在一个可变的方向上。我保存路径，然后检查是否将鼠标悬停在该点上：

生产线的制作方法：

        let path = new Path2D();            
        ctx.lineWidth = 20; // this doesn't seem to affect the hitbox of the liine
        ctx.globalAlpha = 1;
        ctx.beginPath();
        path.moveTo(start.x + (width / 2), start.y);
        path.lineTo(start.x + (width / 2) + linePadding, start.y);
        path.lineTo(mid, start.y);
        path.lineTo(mid, end.y);
        path.lineTo(end.x - (width / 2) - linePadding, end.y);
        ctx.stroke(path);
        ctx.closePath();

当我检查是否击中路径时：

                path_Arrows.some(element => {
                    if (ctx.isPointInStroke(element.path, mouseLocation.x, mouseLocation.y)) {

它似乎没有检测到整个中风，只是微小的中风。更改

线宽

会在视觉上更改线条，但不会更改

isPointInStroke

。调整

mouseLocation.x，mouseLocation.y

以调整hitbox范围在技术上是可行的，但由于这些行是如此动态和程序化，因此很难解释每个潜在位置（除非我认为这是错误的）

我还考虑过改变维护一条线的方式，使用所需的线宽（如5），然后从它们移动的点开始绘制0字母的矩形，并检查

isPointInPath

编辑：

问题来自于我用来创建形状的函数，然后在函数中我检查是否需要从该形状绘制直线，如果需要，我绘制直线，然后继续绘制形状

例如：

drawLine(ctx, from, to);

let box = new Path2D();
ctx.beginPath();
ctx.strokeStyle  = "black";
ctx.lineWidth = 1;
ctx.fillStyle = "blue";
box.rect(x, y, rWidth, rHeight);
ctx.fill(box);

ctx.strokeRect(x, y, rWidth, rHeight);
ctx.closePath();

该行的创建方式与我在

drawLine（）

中进行编辑之前显示的方式非常相似，然后在调用后继续提取框。在

drawLine（）

中设置线宽和颜色在视觉上是正确的，在框中设置的

lineWidth

在颜色和大小上也是正确的

尽管isPointInStroke正在检测框中设置的线的大小，而不是

drawLine（）

中的线

我可以将线宽增加到一个很大的数值，比如50，框的笔划增加，线的笔划不是，但它检测到捕捉点的情况，就好像它是那么大

我在这里忽略了什么？

ctx.isPointInStroke（）

将使用当前的

线宽值设置笔划的点击框。当您调用它时，请仔细检查它是否仍设置为正确的值。

还要注意，它甚至会受到当前变换矩阵的影响


const ctx=document.querySelector（“canvas”）.getContext（“2d”）；
常量路径=新路径2D（）；
路径。移动到（10，10）；
线路图（80,10）；
线路图（80,50）；
线路图（30,50）；
线路图（10,30）；
ctx.线宽=20；
ctx.strokeStyle=“绿色”；
冲程（路径）；
ctx.lineWidth=2；
ctx.strokeStyle=“红色”；
冲程（路径）；
功能等反行程（线宽，x，y）{
ctx.lineWidth=线宽；
返回ctx.isPointInStroke（路径x，y）；
}
onmousemove=（evt）=>{
const rect=ctx.canvas.getBoundingClientRect（）；
const x=evt.clientX-rect.left；
const y=evt.clientY-rect.top；
让悬停的_color=“transparent”；
if（等反行程（2，x，y））{
悬停的_color=“red”；
}
else if（等反行程（20，x，y））{
悬停的_color=“绿色”；
}
color\u logger.style.backgroundColor=悬停的\u颜色；
};
彩色记录器{
垂直对齐：顶部；
显示：内联块；
边框：1px实心；
宽度：30px；
高度：30px；
}

实际上，我做了一个类似的测试，似乎出于某种原因，我的笔划被注册为1px线，我不知道在哪里或如何绘制，尽管视觉效果要大得多。目前正在进行调试，以确定其来源。可能正在更改画布的大小（
宽度
或
高度
），这将重置我找到的上下文的所有属性。。我有一个元素，我将编辑我的问题，因为这会引发一个新问题，我不明白为什么会发生。编辑可能会更好，因为它自己的问题。另外，你能试着设置一个演示你是如何打电话的吗？从这里不清楚为什么您希望线宽不是
1
，因为它显然是您设置它的最后一个值。