R50 70910dff530d939a15a01ceb4c2b5ccf
Веб-программирование, Верстка

Графический редактор Canvas

Добавлено 23 сен 2020 в 15:51
Задача. Разработать графический редактор, посредством которого пользователь сможет создавать бейджики, таблички, баннеры и другие графические материалы с размещением собственной информации.

Выполнена разработка сервиса графического редактора, посредством которого пользователь может создавать бейджики, таблички, баннеры и другие материалы с размещением собственной информации. Основная часть редактора реализована на основе технологии canvas — элемента, предназначенного для создания растрового двухмерного изображения при помощи js-скриптов.

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

Наряду со специфическими функциями доступны общие, такие как копировать, вырезать, вставить, отменить действие назад/вперед.

В редакторе обязательным элементом для добавления является QR-код с определенной информацией. При его генерации происходит дополнительный post-запрос на получение данных, которые «зашиваются» в него.

Результаты работы в редакторе можно использовать несколькими вариантами. Сохранить для последующей печати в формате svg, при этом создается множество копий с динамической подстановкой исходных данных, полученных в самом начале при открытии редактора. Также можно сгенерировать и скачать файл с бейджиком в формате pdf. Доступна опция «Сохранить как шаблон» для возможности в дальнейшем загрузить данные в текущем состоянии и продолжить редактирование.

В редакторе предустановлен список доступных по умолчанию шаблонов из различных категорий. Шаблоны можно фильтровать по определенной категории или создавать свои собственные шаблоны.

http://mvoter-editor.p.flexibleshop.net/editor.htm...
8f5e2dd4bf