Для моего финального проекта на Генеральной Ассамблее я решил взять холст. Canvas является частью HTML5 и позволяет рисовать графику на лету с помощью скриптов. Это довольно мощно, и я был удивлен, увидев, что из этого получается.
У меня была идея приложения для рисования по номерам для этого проекта. В идеале я хотел бы, чтобы пользователи загружали любую фотографию и превращали ее в холст для рисования по номерам, чтобы они могли заполнить его позже с помощью инструмента заливки холста. Я знал, что это будет большой проблемой для реализации, поскольку в настоящее время нет ничего, что могло бы работать так же. Так что мне пришлось много искать вокруг.
Вот что я нашел до сих пор.
После некоторых поисков я понял, что вы можете получить доступ к путям через файл SVG. Пути имеют решающее значение для приложения для рисования по номерам, поскольку мне нужно будет создать контуры цветных областей и сообщить программе, что это за области. Пути создадут определение и контроль над этими различными цветными областями.
Я нашел RMagick и Autotrace, которые позволили мне преобразовать растровое изображение в файл SVG, а затем проследить различные цветные области. После преобразования и трассировки изображения я использовал Fabric.js, чтобы сделать области пути белыми, и добавил обводку, чтобы очертить эти области.
Я не упомянул, что также использую Dropzone.js для удобной загрузки. Что красиво и мило. (Хотя сейчас нет, так как я еще не добавил скрипт css.)
Затем с помощью Fabric.js я могу добавить событие щелчка (мышь: вниз) на каждом известном пути и заполнить его определенным цветом.
И вот где я сейчас! Завтра я надеюсь поработать над созданием дополнительных функций при загрузке, таких как сохранение информации о цвете, чтобы помочь создать ключ для пользователей после рендеринга холста. Ключ будет обеспечивать цветовой контекст для каждой области. Я также попытался бы установить числовое значение в каждой области пути, которая соответствует ключу.
Я планирую добавить палитру цветов, ластик и сброс на холст.
Самые сложные препятствия были преодолены, но мне все еще нужно думать о сохранении изображения после того, как пользователь закончит рисовать свой холст. Я надеюсь использовать что-то, что вернет мне URL-адрес данных.
Я буду держать вас в курсе…
