ImageMapster zum dynamischen Anzeigen und Ausblenden von Bildauswahlabstürzen

Question

Ich habe ein Bild, in dem ich grau/grün/rot schattierte Blöcke dynamisch anzeigen möchte, um verschiedene Bereiche des Bildes hervorzuheben. Dh kleine Teile des Bildes werden dynamisch zwischen den Graustufen/Grün/Rot verschoben.

Ich habe beschlossen, die jQuery-Plugin ImageMapster zu verwenden: http://www.outsharked.com/imagemapster/

Es scheint ein großes Plugin zu sein, und es läßt mich Imagemaps für ein Bild, Design, das ich controll dann in ImageMapster.

Meine Herausforderung ist, dass ich die gesamte Auswahl von Javascript steuern möchte und dass ich die Farbe der ausgewählten Bereiche zwischen 3 Farben ändern muss und ImageMapster das Bild aktualisieren muss.

Ich habe zwei Methoden ausprobiert.

A. Ändern Sie die ImageMapster mapOptions mit bestimmten Gebietseinstellungen, deaktivieren Sie alle Bereiche und wählen Sie alle Bereiche aus.

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

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

B. Für jeden Bereich abzuwählen neuen Bereich Optionen verwenden, wählen Sie neue Bereich Optionen.

$('#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/

Beide diese Option verursacht Abstürze auf iOS Safari und PC Chrome. - Option A dauert bei Safari etwas länger und bei Chrome länger. - Option B oben stürzt direkt auf Safari und nach einer Weile auf Chrome ab. (Den „select Schritt“ Entfernen entfernt den Fehler, aber das Bild wird nicht Update)

Wenn zunächst die Seite von einem Webserver abrufen ich folgende Fehlermeldung erhalten, die ich weiß nicht, ob es in engen Zusammenhang steht:

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 

Obwohl sich alles wie geplant verhält.

Also meine Fragen sind: 1. Mit ImageMapster ist dies der beste Weg, um ein Update zu erzwingen (dh Abwahl und Auswahl) oder gibt es andere Optionen? 2. Was kann den Fehler mit ImageMapster (oder meinem Code) verursachen?

Jeder Eingang geschätzt!

Answer 1

Dies ist ein "x/y-Problem".

Sie benötigen dazu keinen imageMapster. Versuchen Sie stattdessen, ein Canvas-Element zu verwenden und ein Bild darauf zu zeichnen, und zeichnen Sie dann einfach halbtransparente Rechtecke über dieses Bild. Beachten Sie, dass Sie das Bild neu zeichnen müssen, wenn eine Auswahl aufgehoben wird.