Собственный графический редактор. WIP

сайты

523 25 November 2018—6 May 2019 (7 months)

Примитивный интерфейс графического редактора, который я разрабатывал для собственного проекта — конструктора бренд-листов. Бренд-лист — это как бренд-вол, только гораздо меньше. Редактор позволяет создать ячейку паттерна и автоматически генерирует целый паттерн нужного размера. После этого паттерн можно скачать в виде PDF.

Редактор написан на чистых HTML, CSS и JavaScript, без всяких React или jQuery. При этом он реактивный, и все параметры синхронизируются при любых изменениях свойств объекта — изменяется внешний вид объекта и обновляются параметры в инспекторе.

Проект, к сожалению, не закончен и, скорее всего, я к нему не вернусь. Но большую часть функциональностей я успел реализовать, и результатом доволен.

Дмитрий Поярков

Дмитрий Поярков

UI дизайнер, UX дизайнер and Фронт-энд

Демо редактора

1601310715316_group_33_NCNobo0ASF.png Быстрое проектирование
1601310715347_artboard_dcmYITYsHN.png Быстрый набросок дизайна
1601312475557_bitmaps_edGsx7Tot4.png Так выглядят внутренности проекта
1601312475532_bitmap_d2NDurmWuF.png Исчерпывающий набор всех свойств всех объектов

Описание

Редактор имеет две вкладки: для редактирования и для предпросмотра результата.

Во вкладке редактирования есть инструменты для создания примитивных шейпов, текста и загрузки файлов (картинки, svg , видео, gif, pdf и еще много чего). Есть панель инспектора, в которой можно изменить параметры объекта. У каждого типа объекта свой набор параметров, который можно редактировать в инспекторе.

Во вкладке предпросмотра отображается сгенерированная картинка в виде паттерна, которую можно скачать, но для этого пока еще нет кнопки.

Механизм работы

Каждый объект является html-объектом, которым достаточно просто манипулировать. Все свойства объекта хранятся в памяти в виде объекта. Все объекты хранятся в массиве, который достаточно передать на сервер для хранения и генерирования итогового PDF-изображения, а так же очень легко сгенерировать набор объектов на артборде по параметрам, пришедшим с сервера.

Рамка выделения состоит из нескольких svg-объектов, которая просто подстраивается под размер и тип объекта при выделении и накладывается самым верхним слоем. Внешний вид рамки можно настраивать. Сама рамка ничем не управляет и служит только опорными точками для определения кликов.

При переключении в режим предпросмотра генерируется картинка ячейки на канвасе (реплика из данных об объектах), который не виден пользователю. Пользователь видит уже результирующий html-div, в который гененрируется итоговая картинка и тайлится.

Проблемы

По мере добавления новых функциональностей я начал сталкиваться с некоторыми ограничениями браузера. Например, в нативный селектор нельзя вставить картинку/иконку напротив пункта меню. Поэтому мне пришлось создать с нуля кастомный селект, в который можно вставлять картинки, можно менять шрифт каждой строчки, можно добавить заголовки и при этом я сохранил поведение нативного селектора MacOS. Кроме этого сделал кастомные слайдеры, кастомные инпуты и кастомные табы (нативных табов не существует). Все селекты и табы генерируются на лету из задекларированного объекта свойств в виде JSON.

Еще одним из ограничений были возможности отрисовки графики на канвасе. Например, он не умеет делать внутренние тени или не умеет скруглять углы у прямоугольников. Поэтому мне так же пришлось дописать прототип канваса кастомными методами.

А так же сделал кастомный колор-пиккер, который можно таскать по всему экрану и который реактивно меняет параметры в зависимости от выбранного объекта или его свойства. Он, кстати, был самым простым в реализации.

1601314392652_bitmap1_TWVR3Wqw5p.png Пустой артборд. У артборда есть набор свойств, есть счетчик объектов и можно изменить цвет фона
1601314392691_bitmap2_S414uKJlRc.png Изменение цвета фона артборда
1601314392720_bitmap3_nTcsSSkCrJ.png Примитивный шейп
1601314392759_bitmap4_Z4rGXJswmz.png Пример селекта с svg-иконками вместо текста для выбора типа контура
1601314392838_bitmap6_QPOw7xtwcd.png Экран предпросмотра со сгенерированным паттерном
1601314392911_bitmap7_QqtG2brpW0.png Загруженная пользовательская картинка
1601314393115_bitmap8_cYfvZ3Nims.png Текстовый объект
1601314393422_bitmap9_MmvU9pVl6f.png Пример селекта с выбором шрифтов, которые подгружаются с гугл-шрифтов. Шрифты сразу отображаются так как они будут выглядеть в редакторе, отсортированы по алфавиту и сгруппированы по типам начертаний: антиква, гротеск и моноширный. Не понимаю, почему во всяких Фигмах, Фотошопах и остальных редакторах до сих пор до этого не додумались. Селект не вытягивается больше, чем окно редактора и при открытии позиционирует выбранный пункт прямо над кнопкой селекта, чтобы не пришлось искать текущий выбор
1601314393605_bitmap10_CE0r7t8rNE.png Пример селекта с выбором вида начертания. Этот селект следит за тем, какой выбран шрифт, чтобы отображать все доступные начертания. А так же каждый пункт показывает то, каким будет текст после выбора
Дизайн календаря 2020 для Красного Октября
← Предыдущий проект Дизайн календаря 2020 для Красного Октября
Все проекты
Следующий проект → Дизайн календаря 2019 для Красного Октября
Дизайн календаря 2019 для Красного Октября