Выразительный JavaScript (Хавербеке) - страница 204
>
>
>
19. Проект: Paint
Я смотрю на многообразие цветов. Я смотрю на пустой холст. Затем я пытаюсь нанести цвета как слова, из которых возникают поэмы, как ноты, из которых возникает музыка.
Жоан Миро
Материал предыдущих глав даёт вам всё необходимое для создания простого веб-приложения. Именно этим мы и займёмся.
Наше приложение будет программой для рисования в браузере, схожей с Microsoft Paint. С его помощью можно будет открывать файлы с изображениями, малевать на них мышкой и сохранять обратно. Вот, как это будет выглядеть:
Простая программа рисования
Рисовать на компьютере клёво. Не надо волноваться насчёт материалов, умения, таланта. Просто берёшь, и начинаешь калякать.
Реализация
Интерфейс программы выводит вверху большой элемент >, под которым есть несколько полей ввода. Пользователь рисует на картинке, выбирая инструмент из поля >, а затем нажимая на холсте мышь. Есть инструменты для рисования линий, стирания кусочков картинки, добавления текста и т. п.
Щелчок на холсте передаёт событие >"mousedown" текущему инструменту, который обрабатывает его, как считает нужным. Рисование линий, например, будет слушать события >"mousemove", пока кнопка мыши не будет отпущена, и нарисует линию по пути мыши текущим цветом и размером кисти.
Цвет и размер кисти выбираются в дополнительных полях ввода. Они выполняют обновление свойств контекста рисования на холсте >fillStyle, >strokeStyle, и >lineWidth каждый раз при их изменении.
Загрузить картинку в программу можно двумя способами. Первый использует поле >file, где пользователь выбирает файл со своего диска. Вторая запрашивает URL и скачивает картинку из интернета.
Картинки хранятся нестандартным способом. Ссылка save с правой стороны ведёт на текущую картинку. По ней можно проходить, делиться ей или сохранять файл через неё. Я скоро объясню, как это работает.
Строим DOM
Интерфейс программы состоит из более чем 30 элементов DOM. Нужно их как-то собрать вместе.
Очевидным форматом для сложных структур DOM является HTML. Но разделять программу на HTML и скрипт неудобно – для элементов DOM понадобится множество обработчиков событий или других необходимых вещей, которые надо будет как-то обрабатывать из скрипта. Для этого придётся делать много вызовов