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

Question

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

我决定使用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上崩溃。(删除“选择步骤”将删除错误，但图像不会更新)

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

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 (或我的代码)的错误会是什么？

任何输入都很感谢！

Answer 1

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

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