1

我正在尝试使用 HTML5<area>在<map>. 我需要它与单击的区域相同（从而模拟悬停效果）。我想出的代码是：

$("area").click(function () {
  var $input = $(this);
  var obj = $input.attr("coords");
  var poly = '[' + obj + ']';
  alert(poly);
  var canvas = document.getElementById("myCanvas")
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = '#f00';

  ctx.beginPath();
  ctx.moveTo(poly[0], poly[1]);
  for (item = 2; item < poly.length - 1; item += 2) {
    ctx.lineTo(poly[item], poly[item + 1])
  }

  ctx.closePath();
  ctx.fill();
});

现在问题出在这个语句var poly = '['+obj+']';中，因为如果我手动输入坐标而不是obj变量，它就可以工作，但是我需要它周围的[and才能使函数工作。]

4

1 回答 1

3

问题是 $input.attr("coords") 正在返回一个字符串，比如说"10,10,100,100"或类似的。你试图把它变成一个数组，但你只是得到一个像"[10,10,100,100]".

为了从你可以使用的字符串中创建一个数组split(',')，它会将字符串拆分为每个 ',' 并返回一个数组，所以你可以这样做：

var poly = $input.attr("coords").split(',');

然后 poly 将是一个数组，如：["10", "10", "100", "100"]。

如果您已经拥有图像地图数据，那么您可以在画布上绘制区域并使其可点击而不是使用地图，这取决于您拥有多少区域以及您想要做什么。

我还假设您在图像映射中没有任何圆圈...

于 2013-09-10T07:49:40.823 回答