编辑：稍后的新 lineWidth 将覆盖 isPointInStroke 的先前 lineWidth

Question

我有一条在不同方向上绘制的线。 我保存路径，然后检查我是否 hover 过点：

线路是如何制作的：

        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)) {

它似乎没有检测到整个中风，只是检测到微小的中风。 更改lineWidth确实会在视觉上更改线条，但不会更改isPointInStroke 。 调整mouseLocation.x, mouseLocation.y以针对命中框范围进行调整在技术上是可行的，但由于这些线是如此动态和程序化，因此很难解释每个潜在位置（除非我认为这是错误的）。

我还考虑过按照我对所需 lineWidth（如 5）的方式更改维护线，然后只从它们移动的点绘制具有 0 alpha 的矩形并检查isPointInPath 。

编辑：

问题来自我用来创建形状的 function，然后在 function 中我检查是否需要从该形状画一条线，如果需要我画线，然后继续绘制形状。

例如：

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 & color 在视觉上是正确的，在 box 中设置的lineWidth在颜色和大小上也是正确的。

尽管 isPointInStroke 正在检测框内而不是drawLine()内的线集的大小。

我可以将线宽增加到很大，比如 50，并且增加了框的行程，线条的行程不是，但是它正在检测捕捉点，好像它是那么大。

我在这里忽略了什么？

Answer 1

ctx.isPointInStroke()将使用当前的lineWidth值来设置笔画的命中框。 调用它时，请仔细检查它是否仍设置为正确的值。
还要注意它甚至会受到当前转换矩阵的影响。

 const ctx = document.querySelector("canvas").getContext("2d"); const path = new Path2D(); path.moveTo( 10, 10 ); path.lineTo( 80, 10 ); path.lineTo( 80, 50 ); path.lineTo( 30, 50 ); path.lineTo( 10, 30 ); ctx.lineWidth = 20; ctx.strokeStyle = "green"; ctx.stroke(path); ctx.lineWidth = 2; ctx.strokeStyle = "red"; ctx.stroke( path ); function isOverStroke( line_width, x, y ) { ctx.lineWidth = line_width; return ctx.isPointInStroke( path, x, y ); } onmousemove = (evt) => { const rect = ctx.canvas.getBoundingClientRect(); const x = evt.clientX - rect.left; const y = evt.clientY - rect.top; let hovered_color = "transparent"; if( isOverStroke( 2, x, y ) ) { hovered_color = "red"; } else if( isOverStroke( 20, x, y ) ) { hovered_color = "green"; } color_logger.style.backgroundColor = hovered_color; };

 #color_logger { vertical-align: top; display: inline-block; border: 1px solid; width: 30px; height: 30px; }

 <canvas width="150"></canvas> <div id="color_logger"></div>