bilderkarten:rendern "verschiedener" Stile für verschiedene Klassen von Bereichen

Question

ist es möglich, verschiedene Bereiche in imagemapster in verschiedenen Stilen zu gestalten?Zum Beispiel:wenn ich einen Hausplan habe, kann ein Benutzer auf verschiedene Räume klicken:wohnzimmer, schlafzimmer, Badezimmer, ....Jedes ausgewählte Wohnzimmer sollte rot dargestellt werden, jedes ausgewählte Schlafzimmer sollte blau ausgewählt werden...Danke Kurt

Answer 1

Derzeit gibt es keine integrierte Möglichkeit, ein Profil zu erstellen, das für eine Gruppe unabhängiger Bereiche gilt, aber Sie können es mit ein wenig Arbeit selbst tun.Hier ist ein funktionierendes Beispiel:

http://jsfiddle.net/jamietre/RyScW/

Richten Sie zuerst einen Querverweis ein:

var profiles = [
{ 
    areas: "ME,VT,CT,NH,RI,DE,MA",
    options: {
        fillColor: '0000ff'   
    }
},
{
    areas: "UT,CO,AZ,NM",
    options: {
        fillColor: '00ff00'   
    }
}
];

Ordnen Sie dann die Profile einem neuen Objekt zu, um den Zugriff mit dem "MapKey" für jeden Bereich zu vereinfachen:

var optionsXref = {};

$.each(profiles,function(i,e) {
    var areas = e.areas.split(',');

    $.each(areas,function(j,key) {
        optionsXref[key]=e.options;
    });        
});

Dadurch wird die soeben erstellte einfache Struktur in ein Objekt konvertiert, das folgendermaßen aussieht:

{ "ME": { reference to first option group },
  "VT": { reference to first option group },
  ... 
  "UT": { reference to 2nd option group },
  ..
}

Fangen Sie abschließend "Klicks" ab und wählen Sie den Bereich manuell mit den spezifischen Optionen aus:

image.mapster({
    mapKey: 'data-state',
    onClick: function(e) {
        if (e.selected) {

            // the 4th parameter is the options that area mapped to that area.

            image.mapster('set',true,e.key, optionsXref[e.key]);       
            return false;
        }            
    }
});

Der return false bewirkt, dass ImageMapster seine eigene Klickbehandlung abbricht.Das war's.

Auch der Vollständigkeit halber - Sie könnten dies einfach auf die altmodische Weise tun und die Optionen jedem Bereich zuweisen:

Der direkte Weg, dies zu tun, besteht darin, jedem Bereich im Voraus spezifische Informationen hinzuzufügen, z.

$('img').mapster({
    areas: [{ 
        mapKey: 'living-room-1',
        fillColor: 'ff0000'
    },
    {
        mapKey: 'living-room-2',
        fillColor: 'ff0000'
    }, ...
    ]
);

Dies wäre offensichtlich eine Menge Daten, wenn Sie viele Bereiche mit vielen Wiederholungen hätten.Es ist effizienter und viel weniger Markup, um es anders zu machen.