HTML 5 Canvas addHitRegion在iOS上不起作用（undefined不是函数）

Question

我正在为我的网站构建一个覆盖图像的可点击画布。在桌面上，一切正常。我循环遍历一组坐标并绘制各种可点击的形状。然而，在iOS上，我的循环绘制了第一个形状，然后显然在该片段的最后一行遇到错误，我试图给该区域一个id。当它到达这一点时它停止绘制。

var canvas = document.getElementById('coveringCanvas');
  var context = canvas.getContext('2d');
  if (mapData.paths.length > 0) {
    for (var x = 0; x < mapData.paths.length; x++) {
      context.beginPath();
      var points = mapData.paths[x];
      for (var i = 0; i < points.length; i++) {
        var point = points[i];
        if (i == 0) {
          context.moveTo(point.x * multiplier, point.y * multiplier);
        } else {
          context.lineTo(point.x * multiplier, point.y * multiplier)
        }
      }
      context.closePath();
      context.lineWidth = 1;
      context.strokeStyle = 'blue';
      context.stroke();
      context.addHitRegion({ id: x });
    }
  }

桌面上的一切正常。 iOS不支持此功能，如果没有，是否有解决方法？我找不到任何文件。抛出的错误是

  

undefined不是函数

似乎表明addHitRegion在iOS中不可用。有没有办法在iOS中获得这些形状的点击事件？

编辑添加我将click事件添加到画布的功能。

function drawMap() {
  var canvas = document.getElementById('coveringCanvas');
  canvas.addEventListener("click", function (event) {
    if (event.region) {
     alert('You clicked parcel ' + event.region);
    }
  }, false);
}

Answer 1

目前，移动设备对addHitRegion()的支持相当渺茫。根据{{​​3}}，这些设备是在撰写本文时唯一支持它的设备（免责声明：不确定MDN是否完全是最新的; caniuse.com不报告此方法的任何内容）：

桌面上的情况要好一些，但不是很多（在Chrome和Firefox中你必须通过标志启用它）：

在撰写本文时，我不知道任何已知的变通方法（polyfill;在与事件系统集成时很难编写一个）。您必须使用手动费力的方法，使用边界检查和/或isPointInPath()（isPointInStroke()）。