为什么 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 的直接命令之一：它创建路径 'behind the scene' 并立即填充它。
这意味着当命中区域需要路径时，它不会像 rect 那样构建路径。
请注意，您不需要填写它，因此只有在需要时才填写。

附带说明一下，浏览器对命中区域的支持不是很好，正如您在此处看到的那样：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/addHitRegion，它仍处于试验阶段，所以如果您 want/require a广泛支持。

正如@MarkE 所引用的那样，实现命中区域的一种安全方法是自己处理鼠标（getBoundingClientRect 是你的朋友！），你的路径集合，并使用 [=13= 检查坐标].
请注意，isPointInPath 需要一个路径，因此它不适用于直接命令（fillXXX / strokeXXX / ImageData stuff）。

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

Why doesn't fillRect command allow to create a hit region while a combination of rect and fill does?

html

javascript

graphics

canvas

html5-canvas