mapa de imagem:renderizando estilos “diferentes” para diferentes classes de áreas

Question

é possível estilizar áreas diferentes em estilos diferentes no imagemapster?Por exemplo:quando tenho a planta de uma casa, o usuário pode clicar em diferentes cômodos:salas de estar, quartos de dormir, banheiros,....Qualquer sala de estar selecionada deve ser renderizada em vermelho, qualquer quarto de dormir selecionado deve ser selecionado em azul...Obrigado Kurt

Answer 1

No momento, não existe uma maneira integrada de criar um perfil que se aplique a um grupo de áreas independentes, mas você pode fazer isso sozinho com apenas um pouco de trabalho.Aqui está um exemplo prático:

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

Primeiro configure uma referência cruzada:

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

Em seguida, mapeie os perfis para um novo objeto para facilitar o acesso a eles usando o "mapKey" de cada área:

var optionsXref = {};

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

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

Isso converte a estrutura simples que você acabou de criar em um objeto parecido com este:

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

Por fim, intercepte os “cliques” e selecione a área manualmente utilizando as opções específicas:

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;
        }            
    }
});

O return false faz com que o ImageMapster cancele seu próprio tratamento de cliques.É isso.

Também para completar - você poderia fazer isso à moda antiga e atribuir as opções a cada área:

A maneira direta de fazer isso é adicionar informações específicas a cada área antecipadamente, por exemplo.

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

Obviamente, seriam muitos dados se você tivesse muitas áreas, com muita repetição.É mais eficiente e com muito menos marcação fazer o contrário.