Разработка векторного редактора на JavaScript (часть вторая, с исходниками)

О том, как я решил сделать собственный векторный редактор на JavaScript, я писал ранее ^[1]. К сожалению, выложить полноценный редактор по ряду причин не представляется возможным, поэтому я решил написать небольшой плагин, который позволяет создавать и редактировать контуры, привязывая их к любому отдельному изображению на странице. Разумеется, основной «фишкой» редактора остается возможность полуавтоматического создания контура по принципу инструмента «волшебная палочка» в Photoshop, то есть: кликнул на изображение и получил готовый контур, который затем можно корректировать.

Плагин написан на JavaScript + jQuery, работа с изображением происходит в CANVAS элементе.

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

Инициализация плагина происходит штатно, вызовом вида

$(НужныйЭлемент).mapContourEditor(НачальныеПеременные);

Список переменных следующий:

• contour — массив переменных вида x0,y0,x1,y1,...,xn,yn, по умолчанию — пустой
• tolerance — радиус (или чувствительность) цвета для инструмента «волшебная палочка», первоначальное значение 20. Вообще, поиск контура происходит по границе цветов и именно этот параметр определяет, насколько широка эта самая граница.
• cback — фоновый цвет готового контура, по умолчанию значение rgba(120,0,0,0.3)
• cborder – цвет рамки контура, по умолчанию rgba(255,0,0,0.3)
• msize – размер маркера (точки контура), по умолчанию квадрат со сторонами 2 (в пикселах)
• mback – внутренний цвет маркера, по умолчанию rgba(255,255,255,0.5)
• mborder – цвет рамки маркера rgba(255,0,0,0.5)
• magicStick – режим «волшебной палочки», по умолчанию 1 (включено), после создания контура автоматически переключается в 0 — включено. Когда magicStick=0 – можно редактировать контур, создавать, передвигать и удалять маркеры контура.

Немного методов

На данном этапе решил сделать минимальное количество методов и ограничился только:

• getData – получить переменную, например, для того, чтобы узнать включен режим magicStick, необходимо вызвать

  $(НужныйЭлемент).mapContourEditor('getData','magicStick');
  

• setData – задавать необходимые переменные, например:

  $(НужныйЭлемент).mapContourEditor('setData',{magicStick:1});
  

• destroy – удалить редактор из конкретного элемента:

  $(НужныйЭлемент).mapContourEditor('destroy');
  

И о событиях

Событие вообще только одно:
magicStickChange – вызывается при смене режима редактора:

$(НужныйЭлемент).on('magicStickChange',function(){Обработчик смены режим Magic Stick});

Собственно все, демо и краткое описание плагина можно посмотреть здесь: evalexdy.github.io/MapContourEditor/ ^[2], если у вас будут какие-то идеи по развитию или доработке именно этого плагина, добро пожаловать в комментарии!

Автор: evalexdy

Источник ^[3]