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



    О том, как я решил сделать собственный векторный редактор на 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, если у вас будут какие-то идеи по развитию или доработке именно этого плагина, добро пожаловать в комментарии!
    Share post

    Comments 1

      0
      Поюзать пока возможности нет, но штука крутая, около года назад тоже хотел нечто подобное сделать, но дальше хотелок не двинулось…

      Only users with full accounts can post comments. Log in, please.