Разработка векторного редактора на 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, если у вас будут какие-то идеи по развитию или доработке именно этого плагина, добро пожаловать в комментарии!
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 1

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

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

      Самое читаемое