ImageMaPster: рендеринг «разные» стили для разных классов областей

StackOverflow https://stackoverflow.com//questions/11682309

  •  12-12-2019
  •  | 
  •  

Вопрос

Можно ли стирать разные районы в разных стилях в ImageMapster?Например: когда у меня есть план дома, пользователь может щелкнуть разные номера: гостиная, спальные номера, ванны, ...,Любая выбранная гостиная должна быть представлена красным, любая выбранная спальная комната должна быть выбрана синим ... Благодарность Курт

Это было полезно?

Решение

сейчас нет встроенного, прямо сейчас, чтобы создать профиль, который применяется к группе независимых областей, но вы можете сделать это самостоятельно с небольшим количеством работ. Вот рабочий пример:

http://jsfiddle.net/jamietre/ryscw/

Сначала настройте перекрестную ссылку: 

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

Затем набрать профили к новому объекту, чтобы облегчить доступ к ним, используя «MapKey» для каждой области: 

var optionsXref = {};

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

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

Это преобразует простую структуру, которую вы только что создали в объект, который выглядит так: 

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

Наконец, перехватывать «клики» и выберите область вручную, используя определенные параметры: 

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

Генеракодицетагкод вызывает imageMapster, чтобы отменить свой собственный щелчок. Вот и все.

Также для полноты - вы можете просто сделать это старомодный путь и назначить варианты каждой области:

Прямой способ сделать это, добавив конкретную информацию в каждую область, например, e.g. 

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

Это, очевидно, будет много данных, если у вас было много областей, с большим повторением. Это более эффективно и намного меньше разметки, чтобы сделать это другим способом.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top