Собственный графический редактор. WIP
Примитивный интерфейс графического редактора, который я разрабатывал для собственного проекта — контруктора бренд-листов. Бренд-лист — это как бренд-вол, только гораздо меньше. Редактор позволяет создать ячейку паттерна и автоматически генерирует целый паттерн нужного размера. После этого паттерн можно скачать в виде PDF. Редактор написан на чистых html, css и js, без всяких реактов или жиквери. При этом он реактивный и все параметры синхронизируются при любых изменениях свойств объекта — изменяется внешний вид объекта и обновляются параметры в инспекторе. Проект, к сожалению, не закончен и, скорее всего, я к нему не вернусь. Но большую часть функциональностей я успел заимплементить и результатом доволен.
Сайты
![Дмитрий Поярков Дмитрий Поярков](/api/files/10h3nkp0ft3so3i/9ghnsdf2ql84asv/1588467300382_me_yUlxaOILQL.jpg?thumb=100x100)
Дмитрий Поярков
UI дизайнер, UX дизайнер и Фронт-энд
![Собственный графический редактор. WIP](/api/files/2n9wxef87ex02sb/c3b9rf4dndpximq/1601309799091_hero_YZBOPNGP69.jpg)
Демо редактора
![1601310715316_group_33_NCNobo0ASF.png](/api/files/6n5uqluz2p0o1wa/68wbfohwuzkll62/1601310715316_group_33_NCNobo0ASF.png)
Быстрое проектирование
![1601310715347_artboard_dcmYITYsHN.png](/api/files/6n5uqluz2p0o1wa/xbvp199fgw9ct9h/1601310715347_artboard_dcmYITYsHN.png)
Быстрый набросок дизайна
![1601312475557_bitmaps_edGsx7Tot4.png](/api/files/6n5uqluz2p0o1wa/wshsapg0fn46xbe/1601312475557_bitmaps_edGsx7Tot4.png)
Так выглядят внутренности проекта
![1601312475532_bitmap_d2NDurmWuF.png](/api/files/6n5uqluz2p0o1wa/2cmetdl2k0ocxhl/1601312475532_bitmap_d2NDurmWuF.png)
Исчерпывающий набор всех свойств всех объектов
Описание
Редактор имеет две вкладки: для редактирования и для предпросмотра результата.
Во вкладке редактирования есть инструменты для создания примитивных шейпов, текста и загрузки файлов (картинки, svg , видео, gif, pdf и еще много чего). Есть панель инспектора, в которой можно изменить параметры объекта. У каждого типа объекта свой набор параметров, который можно редактировать в инспекторе.
Во вкладке предпросмотра отображается сгенерированная картинка в виде паттерна, которую можно скачать, но для этого пока еще нет кнопки.
Механизм работы
Каждый объект является html-объектом, которым достаточно просто манипулировать. Все свойства объекта хранятся в памяти в виде объекта. Все объекты хранятся в массиве, который достаточно передать на сервер для хранения и генерирования итогового PDF-изображения, а так же очень легко сгенерировать набор объектов на артборде по параметрам, пришедшим с сервера.
Рамка выделения состоит из нескольких svg-объектов, которая просто подстраивается под размер и тип объекта при выделении и накладывается самым верхним слоем. Внешний вид рамки можно настраивать. Сама рамка ничем не управляет и служит только опорными точками для определения кликов.
При переключении в режим предпросмотра генерируется картинка ячейки на канвасе (реплика из данных об объектах), который не виден пользователю. Пользователь видит уже результирующий html-div, в который гененрируется итоговая картинка и тайлится.
Проблемы
По мере добавления новых функциональностей я начал сталкиваться с некоторыми ограничениями браузера. Например, в нативный селектор нельзя вставить картинку/иконку напротив пункта меню. Поэтому мне пришлось создать с нуля кастомный селект, в который можно вставлять картинки, можно менять шрифт каждой строчки, можно добавить заголовки и при этом я сохранил поведение нативного селектора MacOS. Кроме этого сделал кастомные слайдеры, кастомные инпуты и кастомные табы (нативных табов не существует). Все селекты и табы генерируются на лету из задекларированного объекта свойств в виде JSON.
Еще одним из ограничений были возможности отрисовки графики на канвасе. Например, он не умеет делать внутренние тени или не умеет скруглять углы у прямоугольников. Поэтому мне так же пришлось дописать прототип канваса кастомными методами.
А так же сделал кастомный колор-пиккер, который можно таскать по всему экрану и который реактивно меняет параметры в зависимости от выбранного объекта или его свойства. Он, кстати, был самым простым в реализации.
![1601314392652_bitmap1_TWVR3Wqw5p.png](/api/files/6n5uqluz2p0o1wa/9gts4pkb1rbh0mi/1601314392652_bitmap1_TWVR3Wqw5p.png)
Пустой артборд. У артборда есть набор свойств, есть счетчик объектов и можно изменить цвет фона
![1601314392691_bitmap2_S414uKJlRc.png](/api/files/6n5uqluz2p0o1wa/7kdtsn1gclhfan0/1601314392691_bitmap2_S414uKJlRc.png)
Изменение цвета фона артборда
![1601314392720_bitmap3_nTcsSSkCrJ.png](/api/files/6n5uqluz2p0o1wa/dmq99vdvdl6ch30/1601314392720_bitmap3_nTcsSSkCrJ.png)
Примитивный шейп
![1601314392759_bitmap4_Z4rGXJswmz.png](/api/files/6n5uqluz2p0o1wa/sfnztuszeh1ugiv/1601314392759_bitmap4_Z4rGXJswmz.png)
Пример селекта с svg-иконками вместо текста для выбора типа контура
![1601314392838_bitmap6_QPOw7xtwcd.png](/api/files/6n5uqluz2p0o1wa/1p2e5boaf4k8oeh/1601314392838_bitmap6_QPOw7xtwcd.png)
Экран предпросмотра со сгенерированным паттерном
![1601314392911_bitmap7_QqtG2brpW0.png](/api/files/6n5uqluz2p0o1wa/wenfc4mx8vf07va/1601314392911_bitmap7_QqtG2brpW0.png)
Загруженная пользовательская картинка
![1601314393115_bitmap8_cYfvZ3Nims.png](/api/files/6n5uqluz2p0o1wa/9gn2au2rdcxs4dp/1601314393115_bitmap8_cYfvZ3Nims.png)
Текстовый объект
![1601314393422_bitmap9_MmvU9pVl6f.png](/api/files/6n5uqluz2p0o1wa/n45ldfwt23q3h0s/1601314393422_bitmap9_MmvU9pVl6f.png)
Пример селекта с выбором шрифтов, которые подгружаются с гугл-шрифтов. Шрифты сразу отображаются так как они будут выглядеть в редакторе, отсортированы по алфавиту и сгруппированы по типам начертаний: антиква, гротеск и моноширный. Не понимаю, почему во всяких Фигмах, Фотошопах и остальных редакторах до сих пор до этого не додумались. Селект не вытягивается больше, чем окно редактора и при открытии позиционирует выбранный пункт прямо над кнопкой селекта, чтобы не пришлось искать текущий выбор
![1601314393605_bitmap10_CE0r7t8rNE.png](/api/files/6n5uqluz2p0o1wa/rv1vu35frrekrxk/1601314393605_bitmap10_CE0r7t8rNE.png)
Пример селекта с выбором вида начертания. Этот селект следит за тем, какой выбран шрифт, чтобы отображать все доступные начертания. А так же каждый пункт показывает то, каким будет текст после выбора
![MECHA SNAKE](/api/files/lz282lhh1hogaxv/nfu4c48jp6idyd0/frame_2241_min_SHZDwXOe0z.png?thumb=300x300)
![Дизайн календаря 2019 для Красного Октября](/api/files/lz282lhh1hogaxv/a450a2cjtimouhg/1592038389288_artboard_copy_6_dNVNVz9Z6F.png?thumb=300x300)