Question

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

这是我的工作 JSFIDDLE ，我在其中创建了一个包含点击区域的画布，可以显示点击区域的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

所示

控制台显示以下错误：

未捕获NotSupportedError：无法执行'addHitRegion' 'CanvasRenderingContext2D'：指定的路径没有像素。

所以看起来为了创建命中区域，你不能使用fillRect命令 - 我找不到任何解释这种行为。

很高兴听到任何想法！

Answer 1

/build.sbt:17: error: not found: value routesGenerator routesGenerator := InjectedRoutesGenerator ^ [error] Type error in expression是fillRect的直接命令之一：它在场景后面创建一条路径＆＃39;并立即填写这意味着当命中区域需要路径时，它不会像rect一样构建路径请注意，您不需要填写它，所以只有在您需要时才这样做。

作为旁注，浏览器对命中区域的支持并不是那么好，正如您在此处看到的那样：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/addHitRegion，它仍然是实验性的，因此如果您需要/需要广泛支持，请查看此内容。 / p>

正如@MarkE所引用的，实现命中区域的一种安全方法是自己处理鼠标（Context2D是你的朋友！），你的路径集合，并使用getBoundingClientRect检查坐标。
再次注意，isPointInPath期望一条路径，因此它不适用于直接命令（fillXXX / strokeXXX / ImageData东西）。

为什么fillRect命令不允许在rect和fill的组合中创建命中区域？

1 个答案: