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

в 9:22, , рубрики: canvas, javascript, jquery, интерфейсы, плагин jquery

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

О том, как я решил сделать собственный векторный редактор на JavaScript, я писал ранее. К сожалению, выложить полноценный редактор по ряду причин не представляется возможным, поэтому я решил написать небольшой плагин, который позволяет создавать и редактировать контуры, привязывая их к любому отдельному изображению на странице. Разумеется, основной «фишкой» редактора остается возможность полуавтоматического создания контура по принципу инструмента «волшебная палочка» в 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/, если у вас будут какие-то идеи по развитию или доработке именно этого плагина, добро пожаловать в комментарии!

Автор: evalexdy

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js