Как реализовать отрисовку произвольных регионов фигуры?

#javascript #html #веб_программирование

Не знаю как подойти к его реализации.
Хочу реализовать карту с которой можно будет взаимодействовать.(На web-странице.)

1) При наведении на область 1, взаимодействовать с областью 1.

2) При наведении на область 2, взаимодействовать с областью 2.

3) и т.д.



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


    

Ответы

Ответ 1

Могу предложить вариант.
В богом забытом редакторе под названием DreamWeaver есть инструмент под названием
Polygonal hotspot tool которым можно обвести картинку любой сложности. Далее сохранить
это дело как web страницу, в результате чего получить html с координатами.

Далее просто берем эти самые координаты и переносим в svg.

Всё!

100% для создания координат есть еще инструменты. Но алгоритм прост: берем картинку,
инструмент, обводим, получаем координаты, перекидываем координаты в svg



var allStates = $("svg.us > *");

allStates.on("mouseover", function() {
  
  allStates.removeClass("on");
  $(this).addClass("on");
  
});
.on {
  fill: pink;
  stroke: red;
  stroke-width: 2;
}

body {
  padding: 20px;
}






Координаты в фотошопе:  https://stackoverflow.com/a/13847787/6104996

Gimp: http://www.gimp.org/downloads/ с инструкцией http://docs.gimp.org/ru/plug-in-imagemap.html

UPD:

Программы для работы с векторной графикой с возможностью сохранить в svg и посмотреть
координаты тоже:


CorelDRAW
Adobe Illustrator CS2
Inkscape
SVG-Edit