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

25 ноября 2018 г. – 6 мая 2019 г. 454

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

Сайты

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

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

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

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

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

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

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

MECHA SNAKE
Предыдущий проект MECHA SNAKE
Все проекты
Следующий проект Дизайн календаря 2019 для Красного Октября
Дизайн календаря 2019 для Красного Октября