10

我有一个包含 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();
    });
  }

没有放大/缩小图像调整器和突出显示效果完美。

初始图片

放大/缩小后

缺少聚乙烯线的图像

我究竟做错了什么？

4

1 回答 1

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()。

于 2018-05-30T10:23:45.377 回答