ImageMapsterが画像の選択のクラッシュを動的に表示および非表示にする

Question

画像の異なる領域を強調表示するために灰色/緑色/赤色の影付きブロックを動的に表示する画像があります。すなわち、イメージの小さな部分は、グレー/グリーン/レッドの色合いの間で動的にシフトします。

私はjQueryのプラグインImageMapsterを使用することにしました： http://www.outsharked.com/imagemapster/

素晴らしいプラグインのようだ、とそれは私が、私はその後、ImageMapsterにcontroll画像のためのイメージマップを設計できます。

私はJavaScriptからすべての選択をコントロールしたいので、選択した領域の色を3色に変更し、ImageMapsterでイメージを更新する必要があります。

私は2つの方法を試みました。

ImageMapster mapOptionsを特定の領域設定に変更し、すべての領域の選択を解除してすべての領域を選択します。各領域についてhttps://jsfiddle.net/koniak/zo04e3ns/

B.、新しい領域オプションを使用して選択解除するには、新たな領域のオプションを使用して選択：

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

JSFiddle。

$('#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クロームのクラッシュの原因となります。 - 上記のオプション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 

：最初に、Webサーバーからページを取得する場合（「ステップを選択し、」エラーを削除しますが、画像文句を言わないの更新を削除する）

私は、それが関連しています場合、私は知らない次のエラーを取得します

すべてが計画どおりに動作します。

私の質問は次のとおりです： 1. ImageMapsterを使用するのが、更新を強制する最良の方法です（選択を解除して選択する）か、他のオプションがありますか？ 2. ImageMapster（または私のコード）のバグの原因は何ですか？

Answer 1

これは「x/y問題」です。

これにはimageMapsterは必要ありません。代わりに、キャンバス要素を使用してイメージを描画し、そのイメージの上に半透明の四角形を描画するだけです。選択解除が発生すると、イメージを再描画する必要があることに注意してください。