Создание карты разметки областей в Inkscape

Создаем карту полигонов с нуля.

Этот способ подойдет в тех случаях, когда изображение карты подготовлено в графическом редакторе или сторонней программе типа Hexographer, Dungeon Painter или CC.

Для примера я взял карту небольшого средневекового городка за авторством Vladar:

Запускаем Inkscape, меню File-> Document Properties (Shift-Ctrl-D), выбираем A4/Landscape:

Закрываем окно крестиком.

Вставляем изображение: меню File -> Import (Ctrl-I). Выбираем изображение и в диалоге импорта выбираем указанные значения:

После импорта карты выравниваем её по границе листа (это необязательный шаг, но в будущем он поможет нам избежать некоторых проблем). Выделяем изображение, меню Object -> Align and Distribute (Shift-Control-A), выбираем:

Можно выровнять изображение и по центральным линиям листа – разницы нет, просто запомните, как вы это сделали для конкретной карты. В будущем пригодится.

Получилось вот что:

Растягивать карту на весь лист мы не будем, задать границы зума и размер карты можно во время импорта на сайт.

Теперь открываем палитру слоёв: Layer -> Layers (Shift-Ctrl-L) и текущий слой переименовываем в ‘Image’:

Нажимаем на плюсик и создаем еще один слой с именем ‘Paths’. Все полигоны рисовать будем именно на новом слое. Выбираем слой мышкой:

Примечание: движок позволяет создать на карте несколько слоёв с полигонами, каждому задать диапазоны видимости (zoom), цвета разметки, выделения и так далее, но это выходит за рамки элементарного руководства.

И начинаем размечать на карте наши регионы.

Выбираем инструмент «Кривые Безье» (Shift-F6) и обязательно выбираем режим ломаных линий (create a sequence of straight line segments). Забудьте о кривых линиях, движок визуализации их рисовать не умеет. С этим придётся смириться. Если очень хочется сделать кривую линию - нарисуйте огибающую (?), только помните - чем больше объектов на карте - тем больше нагрузка на браузер.

Как рисовать полигон? Вообще-то это интуитивно понятно. Во-первых, полигон должен быть замкнутым (иначе какой это полигон?). Во-вторых, Inkscape даёт подсказку – когда мы хотим замкнуть линию – мы подводим курсор к стартовому узлу. Если он зажигается красным – при клике на нём мы получим замкнутый полигон.

Вот что получилось:

Здесь регион задан граница региона - жирная чёрная линия. Важно: это только инструмент разметки. На сайте цвета линии границы регионов задаются отдельно. На некоторых картах, возможно, эту границу удобнее рисовать красным. Экспериментируйте.

Выбрав тот регион, мы можем задать его свойства – Object -> Object properties (или Shift-Ctrl-O):

Идентификатор региона (ID) менять категорически не рекомендую.

В поле Label можно указать кодовое имя региона (alias) – допустимы только латинские буквы и цифры. Поле Label задает alias региона, Title задает его название, Description – содержание. Следует помнить, что наличие информации хотя бы в одном из полей Title или Description означает, что по региону есть информация. Но, конечно, мы можем пропустить заполнение этих значений во время разметки полигонов и задать эти значения уже через интерфейс редактора карты на сайте.

Помните, что во время разметки карты на полигоны мы должны находиться на слое Paths. Если какой-то регион мы нарисовали на слое Image – его можно переместить туда вручную.

Важно: перекрываться полигоны не должны (отрисовываться полигон будет, но цвета будут накладываться). Тем не менее, можно сделать полигон с «дыркой».

Закончив разметку (и в любой момент в процессе), сохраняем файл как Inkscape SVG и переходим непосредственно к подготовке файла регионов для импорта. В данный момент за этим вопром следует обращаться к автору.