ImageMapster可以动态显示和隐藏图像选择崩溃

ImageMapster to dynamically show and hide image selection crash

本文关键字：图像 选择 崩溃 隐藏 动态显示 ImageMapster      更新时间：2023-09-26

我有一个图像，我想在其中动态显示灰色/绿色/红色阴影块，以突出显示图像的不同区域。图像的小部分会在灰色/绿色/红色之间动态切换。

我决定使用jQuery插件ImageMapster：http://www.outsharked.com/imagemapster/

它似乎是一个很棒的插件，它让我可以为一个图像设计图像映射，然后在ImageMapster中进行控制。

我的挑战是，我想控制javascript的所有选择，并且我需要在3种颜色之间更改所选区域的颜色，并使ImageMapster更新图像。

我试过两种方法。

A使用特定区域设置更改ImageMapster mapOptions，取消选择所有区域，选择所有区域。

$('#shape1').mapster('set_options',{areas : newArea});
$('area').mapster('deselect');
$('area').mapster('select');

JSFiddle：https://jsfiddle.net/koniak/zo04e3ns/

B对于每个区域，取消选择使用新区域选项，选择使用新的区域选项。

$('#shape1').mapster('set',false,value.id, {fillColor: stateOptions[value.state].fillColor});
$('#shape1').mapster('set',true,value.id, {fillColor: stateOptions[value.state].fillColor});

JSFiddle：https://jsfiddle.net/koniak/evwuvnby/

这两个选项都会导致iOS Safari和PC Chrome崩溃。-上面的选项A在Safari上需要一段时间，在Chrome上需要更长的时间。-上面的选项B直接在Safari上崩溃，过一段时间后在Chrome上崩溃。（删除"选择步骤"会删除错误，但图像不会更新）

当最初从网络服务器检索页面时，我得到了以下错误，我不知道它是否相关：

jquery.imagemapster.js:2047 Uncaught TypeError: Cannot read property 'width' of null
p.createCanvasFor @ jquery.imagemapster.js:2047
m.Graphics.createVisibleCanvas @ jquery.imagemapster.js:1841
p.refreshSelections @ jquery.imagemapster.js:2062
m.MapData.removeSelectionFinish @ jquery.imagemapster.js:3378
finishSetForMap @ jquery.imagemapster.js:1472
$.mapster.impl.me.set @ jquery.imagemapster.js:1525
$.mapster.impl.me.deselect @ jquery.imagemapster.js:1430
$.fn.mapster @ jquery.imagemapster.js:834updateCycle @ (index):145nter code here

尽管一切都按计划进行。

所以我的问题是：1.使用ImageMapster是强制更新的最佳方式（即取消选择和选择）还是有其他选项？2.是什么原因导致ImageMapster（或我的代码）出现错误？

感谢您的任何意见！

这是一个"x/y问题"。

你不需要imageMapster。相反，尝试使用画布元素并在其上绘制图像，然后简单地在该图像的顶部绘制半透明矩形。请注意，当取消选择时，您需要重新绘制图像。

相关文章：