javascript - 为什么 fillRect 命令不允许创建命中区域，而 rect 和 fill 的组合却可以？

Question

我在使用 CanvasRenderingContext2D.addHitRegion() 时偶然发现了这个问题，我试图了解这是否是预期的行为，如果是，其背后的原因是什么。

这是我的工作 JSFIDDLE 我创建了一个带有点击区域的 Canvas ，并且可以显示点击区域的 ID。

以下是我添加命中区域的方法:

ctx.beginPath();
ctx.rect(0, i, canvasWidth, itemHeight);
ctx.fill();
ctx.addHitRegion({'id': count, 'cursor': 'pointer'});

这是相同的示例，只有一个小更改(这就是我最初尝试执行此操作的方式 - 当我可以使用一个命令来执行相同操作时为什么要使用 2 个命令？)

ctx.fillRect(0, i, canvasWidth, itemHeight);
ctx.addHitRegion({'id': count, 'cursor': 'pointer'});

不幸的是，它不起作用，如 JSFIDDLE所示

控制台显示以下错误:

Uncaught NotSupportedError: Failed to execute 'addHitRegion' on 'CanvasRenderingContext2D': The specified path has no pixels.

因此，似乎为了创建命中区域，您不能使用 fillRect 命令 - 而且我找不到对此行为的任何解释。

很高兴听到任何想法!

Answer 1

fillRect 是 Context2D 的直接命令之一:它创建一条“场景后面”的路径并立即填充它。
这意味着当命中区域需要路径时，它不会像 rect 那样构建路径。
请注意，您不需要填写它，因此仅在需要时才填写。

顺便说一句，浏览器对点击区域的支持不是很好，正如您在这里看到的:https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/addHitRegion ，它仍处于实验阶段，因此如果您想要/需要广泛的支持，请查看此内容。

正如 @MarkE 引用的，实现点击区域的一种安全方法是自己处理鼠标(getBoundingClientRect 是你的 friend !)、你的路径集合，并使用 检查坐标isPointInPath。
再次请注意，isPointInPath 需要一个路径，因此它不适用于直接命令(fillXXX/strokeXXX/ImageData 之类的东西)。