Question

我有最新的Chrome版本，我在规范中看到它应该支持.addHitRegion()方法，如MDN所述。出于某种原因，我收到Uncaught TypeError: context.addHitRegion is not a function错误。

我的代码就像这样简单：

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.rect(10,10,100,100);
context.fill();
context.addHitRegion({'id': 'The First Button', 'cursor': 'pointer'});

我该如何解决？

Answer 1

使用浏览器访问： chrome：// flags

然后

将标志实验性网络平台功能设置为true以启用它。

Answer 2

正如其他答案所述，您可以通过标志启用此功能，但是：您将无法要求您的用户执行此操作。并且支持仅限于少数浏览器。我会建议寻找其他解决方案 - 我在这里列出一些：

更好的方法是使用Path2D objects。它们在定义命中形状方面提供了相同的灵活性。将这些与isPointInPath()一起使用，它也会占用路径对象。将每个路径存储在一个数组中，使用要测试的位置循环。不幸但是，这仅限于几个浏览器，但你至少可以使用poly-fill such as this来修复它（请参阅链接中的注释以获取限制）。

关于支持和可用性的更好选择，以及需要更多工作的选项，是重建您想要在上下文本身上测试的每个单一路径，然后使用上面的isPointInPath()来查看如果鼠标位置在该路径内。

如果形状很简单，例如矩形或圆形，您可以进行简单的数学测试，这是一种高效的替代方案。

Answer 3

所以你需要在这里设置实验标志

来自您链接的页面底部的兼容性表：

此功能位于功能标志后面。设置标志 ExperimentalCanvasFeatures为true以启用它。

要启用实验性画布功能，请浏览到“chrome：// flags”，启用“启用实验性画布功能”并重新启动。

Answer 4

不幸的是，点击区域功能现在已过时，并且似乎无法启用。您可以使用isPointInPath（）作为替代。您需要创建一个路径对象才能传递给该函数。像这样：

  const rectangle = new Path2D();
  ctx.beginPath();
  rectangle.rect(10, 10, 100, 100);
  ctx.fill(rectangle);

...然后进行检查，您可以将其放入事件侦听器：

 canvas.addEventListener("mousemove", (e) => {
      if (ctx.isPointInPath(rectangle, e.offsetX, e.offsetY)) {
      console.log("rectangle is hit");
    });

.addHitRegion（）在Chrome中无效

4 个答案: