图像地图缩放后，Maphilight()无法正常工作

Question

我有一个带有300-400个多边形区域的图像映射，在事件“onclick”上应该突出显示该区域并获取一些数据等...当页面加载时（我的图像有点大，3-5MB），所以我使用davidjbradshaw/image-map-resizer插件调整了这些图像映射的大小。当我开始实现突出显示方法时，一切都正常，但在缩放图像后，我的多边形坐标会出错。如果我删除突出选项并缩放图像，我的多边形坐标将被调整为适当的图像大小。

JS代码用于调整大小（正常工作）

 $( document ).ready(function() {
    imageMapResize();
  });

  function ZoomIn () {
    $("img").animate({
      height: '+=200',
      width: '+=200'
    }, 1000, function() {
      imageMapResize();
    });    
  }

  function  ZoomOut () {
    $("img").animate({
      height: '-=200',
      width: '-=200'
    }, 1000, function() {
      imageMapResize();
    });
  }

JS代码用于调整/突出显示（未正常工作）

$( document ).ready(function() {
    imageMapResize();
    $('img[usemap]').maphilight();
  });

  function ZoomIn () {
    $("img").animate({
      height: '+=200',
      width: '+=200'
    }, 1000, function() {
      imageMapResize();
      $('img[usemap]').maphilight();
    });
  }

  function  ZoomOut () {
    $("img").animate({
      height: '-=200',
      width: '-=200'
    }, 1000, function() {
      imageMapResize();
      $('img[usemap]').maphilight();
    });
  }

没有缩放和高亮功能的图像调整器能够完美工作。

缩放后

我做错了什么？

- KuKeC

Answer 1

我做错了什么？

没有做错任何事情，因为我已经查看了代码。

我认为问题出在jQuery.maphilight()插件本身上，它显然不支持响应式缩放，但是。

所以，与其试图修复问题/问题，或者等待作者修复它，您可能想考虑使用jQuery.mapster()。

工作示例

$( document ).ready(function() {
  $('img[usemap]').mapster({
    fill: true,
    fillColor: '000000',
    fillOpacity: 0.2,
    stroke: true,
    strokeColor: 'ff0000',
    strokeOpacity: 1,
    strokeWidth: 1,
    fade: true
  });
});

function ZoomIn() {
  $("img").animate({
    height: '+=200',
    width: '+=200'
  }, 1000, function() {
    $(this).mapster('resize', $(this).width(), $(this).height());
  });
}

function ZoomOut() {
  $("img").animate({
    height: '-=200',
    width: '-=200'
  }, 1000, function() {
    $(this).mapster('resize', $(this).width(), $(this).height());
  });
}

演示: http://jsfiddle.net/mt5pynn8/
演示: http://jsfiddle.net/mt5pynn8/1/

附加说明

jQuery.mapster()不支持jQuery版本3，其次，该插件最后更新于2013年。（但它仍然运行得很好。）

更新

jQuery.mapster()带有调整大小的功能；因此，imageMapResize()不是必需的。请注意，我已经测试过，调整大小的功能并不完美，无论是imageMapResize()还是jQuery.mapster()。

- Sally CJ