Web paint как пользоваться
Уроки на web-paint отлично подойдут как начинающим, так и продолжающим художникам для развития своих навыков. В этом разделе собраны самые интересные и полезные уроки по рисованию, включая поэтапные уроки и творческие идеи.
Как нарисовать пальму карандашом. Поэтапный урок
Отправляйтесь вместе с нами в тропическое место и научитесь легко рисовать пальму в этом полном пошаговом уроке.&.
Как правильно заточить любой карандаш
Как нарисовать алмаз карандашом: поэтапный урок
Сегодня мы попробуем нарисовать бриллиант с помощью этого урока для детей и начинающих. Нам всем нравится ф.
Как нарисовать гриб карандашом за 7 простых шагов
В этом уроке мы расскажем о том, как нарисовать гриб. Грибы бывают очень разные по форме, размеру, цвету, есть съ.
Как нарисовать геншин импакт. 11 лучших персонажей Genshin Impact.
В этом уроке вы научитесь рисовать персонажей Genshin Impact. Основной урок будет посвящен персонажу Люмине. В эт.
19 идей оформления Bullet Journal с примерами
Мы нашли классный повод для вас купить новый красивый блокнот и цветных ручек или маркеров. Сегодня мы расскажем .
Как рисовать тени карандашом карандашом: 5 простых уроков с примерами
27 идей как нарисовать Амонг Ас поэтапно
В этом небольшом уроке мы расскажем вам, как поэтапно нарисовать персонажа из игры Among Us и в конце предложим 2.
Как нарисовать мужчину карандашом в полный рост
Эта статья расскажет вам, как нарисовать мужчину, ребенка и человеческий скелет. Благодаря этим основам вы сможет.
Как нарисовать Хаги Ваги (Huggy Wuggy) поэтапно + раскраски
Сегодня вы узнаете как нарисовать Хаги Ваги, ожившую куклу-монстра с синим мехом и зубами, персонаж игры Poppy Pl.
Дудлинг для начинающих. С чего начать? Поэтапные узоры, рисунки и схемы
Как нарисовать единорога карандашом: пошаговая инструкция
В этом уроке я покажу вам, как рисовать единорога карандашом, а затем раскрасить цветными карандашами. Вы увидите.
Как нарисовать охранника из Игры в кальмара
Открытка на День Святого Валентина своими руками
Хотите нарисовать открытку на День Святого Валентина ❤ для своих друзей и близких? Вы попали по адрес.
Как нарисовать айфон карандашом
- вкладки с основными функциями графического редактора;
- часто используемые действия (создать, сохранить, вырезать, копировать и пр.);
- параметры выбранного инструмента.
Также можно включить отображение вспомогательных панелей:
- инструменты;
- журнал;
- слои;
- палитра.
Для этого нужно сделать активными соответствующие иконки.
Создание и открытие изображений
Откройте вкладку «Файл» и кликните по нужному варианту.
Аналогичные кнопки расположены на рабочей панели:
При открытии необходимо выбрать изображение на жёстком диске, а при создании появится окно, где нужно задать параметры новой картинки и нажать «ОК».
Обратите внимание, что размер изображения можно будет изменить в любой момент.
Основные манипуляции с изображением
В процессе редактирования картинку можно визуально увеличивать, уменьшать, выравнивать по размеру окна или возвращать реальный размер. Делается это через вкладку «Вид».
Или с помощью ползунка внизу окна.
Во вкладке «Изображение» имеется всё необходимое, чтобы изменить размер картинки и полотна, а также совершить её переворот или поворот.
Любые действия можно отменять и возвращать через «Правку».
Или посредством кнопок на панели:
Выделение и обрезка
Для выделения определённой области картинки предусмотрено 4 инструмента:
- «Выбор прямоугольной области»;
- «Выбор области овальной (круглой) формы»;
- «Лассо» – позволяет захватывать произвольную область, обводя её по контуру;
- «Волшебная палочка» – автоматически выделяет отдельные объекты на изображении.
Каждый вариант выделения работает в разных режимах, например, добавление или вычитание выделенной области.
Для выделения всего изображения нажмите CTRL+A.
Дальнейшие действия будут выполняться непосредственно в отношении выделенной области. Через вкладку «Правка» можно вырезать, скопировать и вставить выделенное. Здесь же можно полностью удалить эту область, выполнить заливку, инвертировать выделение или отменить его.
Некоторые из этих инструментов вынесены на рабочую панель. Сюда вошла и кнопка «Обрезка по выделению», после нажатия по которой на изображении останется только выделенная область.
Грамотно используя инструменты выделения и обрезку, Вы сможете делать прозрачный фон на картинках.
Рисование и заливка
Для рисования предназначены инструменты «Кисть», «Карандаш» и «Клонирующая кисть».
Работая с «Кистью», Вы можете менять её ширину, жёсткость и тип заливки. Для выбора цвета используйте панель «Палитра». Для нанесения рисунка зажмите левую кнопку мыши и перемещайте «Кисть» по полотну.
Зажав правую кнопку, Вы будете рисовать дополнительным цветом «Палитры».
Кстати, основной цвет «Палитры» может быть аналогичным цвету любой точки текущего рисунка. Для этого просто выберете инструмент «Пипетка» и кликните по месту, откуда нужно скопировать цвет.
«Карандаш» имеет фиксированный размер в 1 px и возможность настройки «Режима наложения». В остальном его использование аналогично «Кисти».
«Клонирующая кисть» позволяет выбрать точку на картинке (Ctrl+ЛКМ) и использовать её как исходник для нанесения рисунка в другой области.
С помощью «Заливки» можно быстро закрасить отдельные элементы изображения указанным цветом. Кроме типа «Заливки», важно правильно настроить её чувствительность, чтобы не захватывались лишние области.
Для удобства нужные объекты обычно выделяют, а затем заливают.
Текст и фигуры
Для нанесения надписи на изображение выберите соответствующий инструмент, укажите параметры шрифта и цвет в «Палитре». После этого кликните по нужному месту и начните ввод.
При нанесении прямой линии Вы можете определить её ширину, стиль (стрелка, пунктир, штрих и пр.), а также тип заливки. Цвет, как обычно, выбирается в «Палитре».
Если потянуть за мигающие точки на линии, то она изогнётся.
Обратите внимание на крестик рядом с фигурой. С его помощью можно перетаскивать вставленные объекты по всему рисунку. Это же касается текста и линий.
Коррекция и эффекты
Во вкладке «Коррекция» находятся все нужные инструменты для изменения цветового тона, яркости, контрастности и т.д.
Соответственно во вкладке «Эффекты» Вы можете выбрать и применить для Вашего изображения один из фильтров, которые встречаются в большинстве других графических редакторов.
Сохранение изображения
Или воспользуйтесь значком на рабочей панели.
Изображение сохранится в том месте, откуда оно было открыто. Причём старый вариант будет удалён.
Для того, чтобы задать параметры файла самостоятельно и не заменять источник, используйте «Сохранить как».
Вы сможете выбрать место сохранения, указать формат изображения и его имя.
Мы рады, что смогли помочь Вам в решении проблемы.
Отблагодарите автора, поделитесь статьей в социальных сетях.
Опишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.
Большинству пользователей давно уже известно, что Paint – инструмент для рисования, который может быть использован для создания простых рисунков или базового редактирования изображений. Paint был включен в каждую версию Windows, начиная с самой первой, выпущенной в 1985 году и присутствует в современных Windows 7, Windows 8 и Windows 10. Но если сравнивать с более ранними версиями приложения, Paint подвергся значительному изменению, после почти 20-летнего застоя.
Где найти Paint и как его открыть?
Приложение можно открыть несколькими способами. В Windows 7 открыв меню Пуск нужно выбрать Все программы .
Ярлык запуска нужно искать в папке Стандартные или напечатать «Paint» в строке поиска и выбрать соответствующий результат.
В Windows 10 для открытия редактора изображения Paint нужно перейти к меню Пуск и выбрать папку Все приложения .
Теперь нужно прокрутить вниз окна и открыть папку Стандартные – Windows , в которой находится ярлык запуска программы.
Но самым быстрым способом открытия приложения в Windows 10, как и в Windows 7 и 8, 8.1 является поиск Paint. Сначала следует открыть окно поиска щёлкнув или коснувшись значка «Лупы» на панели инструментов, ввести «Paint» в строку поиска, а далее выбрать нужный вариант из результатов.
Тут же, если щёлкнуть по результату правой кнопкой мыши или коснуться и удерживать, появится контекстное меню, в котором можно закрепить Paint на панели задач и на начальном экране, что поможет в последующем сделать более быстрым открытие приложения.
Для тех, кто не ищет лёгких путей в открытии приложения, может сделать это с помощью окна Выполнить, Командной строки, Проводника или PowerShell введя команду mspaint.exe .
Открыть Paint можно, запустив исполняемый файл, находящийся в
Не зависимо от способа открытия Paint, появится окно как на рисунке ниже.
Обзор интерфейса Paint
Если сравнивать сегодняшний интерфейс Paint с его более ранними версиями, то можно понять, что он сильно переработан. Все варианты верхней части окна отображены в виде удобных вкладок. Новый дизайн схож с версиями Microsoft Office c 2007 до 2016, имеющее общее название «Лента». Возможно многим пользователям данный интерфейс может показаться привычным и простым в использовании.
Версии Paint в Windows 8.1 и 10 идентичны, но совсем незначительно отличаются от версии Paint в Windows 7. Отличие заключается в плоском и не имеющем эффектов прозрачности интерфейсе. Все варианты и особенности, кроме панели быстрого доступа, идентичны, которая располагается в верхней части окна и содержит несколько важных кнопок: Сохранить, Отменить и Вернуть.
К другому способу добавления кнопок на панель быстрого запуска Paint относится добавление любого варианта ленты. Для этого нужно, при наличие сенсорного дисплея, нажать и удерживать значок до появления меню или щелчком правой кнопкой мыши выбрать Добавить на панель быстрого доступа .
Главное меню в Paint носит название «Файл»
При наведении курсора на вариант сохранения Сохранить как , появятся наиболее популярные форматы изображения: JPG, GIF, PNG и BitMaP.
Вкладка «Главная» содержит в себе инструменты для редактирования и создания изображения: Кисти, Фигуры и различные Цвета и т.д.
Следующая вкладка «Вид». Активировав её, можно изменить масштаб изображения или выбрать показ изображения во весь экран. Тут можно активировать и дезактивировать Линейку, Линии сетки и Строку состояния для более лучшего выравнивания изображения.
Под вкладками и меню находится полотно для рисования, а под ним Строка состояния где можно увидеть общую информацию о текущем изображении и масштаб.
Опции и особенности вкладки «Главная»
Вкладка «Главная» имеет больше всего функций просто необходимых для создания и редактирования изображения.
Первый раздел вкладки – Буфер обмена имеет инструменты: Вставить, Вырезать и Копировать. Кроме использования этих инструментов, можно использовать и привычные сочетания клавиш.
Раздел Изображение включает в себя возможность различного выделения, повороты, изменение размера и такую возможность как обрезать ненужное. Тут, выделив часть изображения, можно выбрать то, что следует изменить.
Инструмент Изменить размер, даёт возможность применить размер изображения в пикселях или процентах и произвести его наклон в градусах.
Инструменты, Кисти и Фигуры, с их помощью можно и нужно, рисовать и редактировать изображения.
Данный материал кратко объясняет, как работать в Paint. Как может быть понятно из этого краткого руководства, Paint остаётся хоть и не единственным, но основным инструментом редактирования, содержащий достаточное количество инструментов для обычного пользователя. Данная версия Paint более проста в использовании, а инструменты более доступны.
Многие люди в современном мире предпочитают заниматься творчеством. Творчество, как вид деятельности, помогает человеку во многих сферах жизни. Человек, который умеет рисовать или создавать что-то необычное, всегда представляется людям человеком креативным с богатым внутренним миром и хорошим вкусом. Творчество помогает не только творить красивые вещи, но и дарит расслабление. Давно доказано, что рисование или другой вид искусства, подобен медитации — это изучение самого себя и окружающего мира. К тому же, многие из тех людей, которые начинали заниматься творчеством для невинного развлечения, впоследствии открывали в себе настоящий талант, который приводил их к успеху и славе. Во всяком случае, заниматься творчеством никому не повредит, и если у вас есть внутренний позыв к тому, чтобы этим заниматься, то стоит уделить немного времени своим желаниям, чтобы почувствовать всю радость и счастье от того, что вы можете создать нечто очень прекрасное.
Рисование является одним из самых популярных видов творчества. Люди хотят уметь изображать предметы при помощи карандаша или красок максимально реалистичными и правдоподобными. Не у всех это получается, по крайней мере, сразу. Если это произошло и ваши попытки рисования оканчиваются одним разочарованием, то стоит знать, что любое творчество, и уж тем более рисование, требует определённых знаний, навыков и опыта. Пожалуй, только самый одаренный человек может без всяких навыков взять в руки карандаш или кисть и нарисовать что-то приличное. Большинство начинающих художников встречаются с тем, что их рисунки больше похожи на детские каракули. Что же делать в том случае, если вы хотите научиться рисовать, но у вас абсолютно нет возможности поступить в художественное заведение? В этом вам помогут уроки рисования карандашом на сайте Web-Paint. Здесь вы найдёте большое количество полезных пошаговых уроков для начинающих художников.
Теперь вам не нужно искать книги для художников, чтобы научиться правильно изображать те или иные вещи. Данный сайт предоставит вам множество полезных уроков, которые быстро и очень просто объяснят вам все основы и законы рисования для построения любого рисунка или картины. Хотите узнать, как нарисовать розу карандашом просто, быстро и очень реалистично? Здесь вы найдёте поэтапный урок с рисунками, которые показывают каждый шаг в процессе рисования розы. Помимо прочего, большое количество уроков, изучив которые вы станете настоящим художником.
Я смотрю на многообразие цветов. Я смотрю на пустой холст. Затем я пытаюсь нанести цвета как слова, из которых возникают поэмы, как ноты, из которых возникает музыка.
Материал предыдущих глав даёт вам всё необходимое для создания простого веб-приложения. Именно этим мы и займёмся.
Наше приложение будет программой для рисования в браузере, схожей с Microsoft Paint. С его помощью можно будет открывать файлы с изображениями, малевать на них мышкой и сохранять обратно. Вот, как это будет выглядеть:
Простая программа рисования
Рисовать на компьютере клёво. Не надо волноваться насчёт материалов, умения, таланта. Просто берёшь, и начинаешь калякать.
Реализация
Интерфейс программы выводит вверху большой элемент , под которым есть несколько полей ввода. Пользователь рисует на картинке, выбирая инструмент из поля , а затем нажимая на холсте мышь. Есть инструменты для рисования линий, стирания кусочков картинки, добавления текста и т.п.
Щелчок на холсте передаёт событие «mousedown» текущему инструменту, который обрабатывает его, как считает нужным. Рисование линий, например, будет слушать события «mousemove», пока кнопка мыши не будет отпущена, и нарисует линию по пути мыши текущим цветом и размером кисти.
Цвет и размер кисти выбираются в дополнительных полях ввода. Они выполняют обновление свойств контекста рисования на холсте fillStyle, strokeStyle, и lineWidth каждый раз при их изменении.
Загрузить картинку в программу можно двумя способами. Первый использует поле file, где пользователь выбирает файл со своего диска. Вторая запрашивает URL и скачивает картинку из интернета.
Картинки хранятся нестандартным способом. Ссылка save с правой стороны ведёт на текущую картинку. По ней можно проходить, делиться ей или сохранять файл через неё. Я скоро объясню, как это работает.
Строим DOM
Интерфейс программы состоит из более чем 30 элементов DOM. Нужно их как-то собрать вместе.
Очевидным форматом для сложных структур DOM является HTML. Но разделять программу на HTML и скрипт неудобно – для элементов DOM понадобится множество обработчиков событий или других необходимых вещей, которые надо будет как-то обрабатывать из скрипта. Для этого придётся делать много вызовов querySelector и им подобных, чтобы найти нужный элемент DOM для работы.
Было бы удобно определять части DOM рядом с теми частями кода JavaScript, которые ими управляют. Поэтому я решил создавать всю конструкцию DOM прямо в JavaScript. Как мы видели в главе 13, встроенный интерфейс для создания структур DOM ужасно многословен. Поскольку нам придётся создать много конструкций, нам понадобится вспомогательная функция.
Эта функция – расширенная версия функции elt из главы 13. Она создаёт элемент с заданным именем и атрибутами, и добавляет все остальные аргументы, которые получает, в качестве дочерних узлов, автоматически преобразовывая строки в текстовые узлы.
Так мы легко и просто создаём элементы, не раздувая код до размеров лицензионного соглашения.
Основание
Ядро нашей программы – функция createPaint, добавляющая интерфейс рисования к элементу DOM, который передаётся в качестве аргумента. Так как мы создаём программу последовательно, мы определяем объект controls, который будет содержать функции для инициализации разных элементов управления под картинкой.
У каждого элемента управления есть доступ к контексту рисования на холсте, а через него – к элементу . Основное состояние программы хранится в этом холсте – он содержит текущую картинку, выбранный цвет (в свойстве fillStyle) и размер кисти (в свойстве lineWidth).
Мы обернём холст и элементы управления в элементы с классами, чтобы можно было добавить им стили, например серую рамку вокруг картинки.
Выбор инструмента
Первый элемент управления, который мы добавим – элемент , позволяющий выбирать инструмент рисования. Как и в случае с controls, мы будем использовать объект для сбора необходимых инструментов, чтобы не надо было описывать их работу в коде по отдельности, и чтобы можно было легко добавлять новые. Этот объект связывает названия инструментов с функцией, которая вызывается при их выборе и при клике на холсте.
В поле tool есть элементы для всех определённых нами инструментов, а обработчик события «mousedown» на холсте берёт на себя обязанность вызывать функцию текущего инструмента, передавая ей объекты event и context. Также он вызывает preventDefault, чтобы зажатие и перетаскивание мыши не вызывало выделения участков страницы.
Самый простой инструмент – линия, который рисует линии за мышью. Чтобы рисовать линию, нам надо сопоставить координаты курсора мыши с координатами точек на холсте. Вскользь упомянутый в 13 главе метод getBoundingClientRect может нам в этом помочь. Он говорит, где показывается элемент, относительно левого верхнего угла экрана. Свойства события мыши clientX и clientY также содержат координаты относительно этого угла, поэтому мы можем вычесть верхний левый угол холста из них и получить позицию относительно этого угла.
Несколько инструментов рисования должны слушать событие «mousemove», пока кнопка мыши нажата. Функция trackDrag регистрирует и убирает событие для данных ситуаций.
У неё два аргумента. Один – функция, которая вызывается при каждом событии «mousemove», а другая – функция, которая вызывается при отпускании кнопки. Каждый аргумент может быть не задан.
Инструмент для рисования линий использует две вспомогательные функции для самого рисования.
Функция сначала устанавливает свойство контекста lineCap в “round”, из-за чего концы нарисованного пути становятся закруглёнными, а не квадратными, как это происходит по умолчанию. Этот трюк обеспечивает непрерывность линий, когда они нарисованы в несколько приёмов. Если рисовать линии большой ширины, вы увидите разрывы в углах линий, если будете использовать установку lineCap по умолчанию.
Затем, по каждому событию «mousemove», которое случается, пока кнопка нажата, рисуется простая линия между старой и новой позициями мыши, с использованием тех значений параметров strokeStyle и lineWidth, которые заданы в данный момент.
Аргумент onEnd просто передаётся дальше, в trackDrag. При обычном вызове третий аргумент передаваться не будет, и при использовании функции он будет содержать undefined, поэтому в конце перетаскивания ничего не произойдёт. Но он поможет нам организовать ещё один инструмент, ластик erase, используя очень небольшое дополнение к коду.
Свойство globalCompositeOperation влияет на то, как операции рисования на холсте меняют цвет пикселей. По умолчанию, значение свойства «source-over», что означает, что цвет, которым рисуют, накладывается поверх существующего. Если цвет непрозрачный, он просто заменит существующий, но если он частично прозрачный, они будут смешаны.
Инструмент “erase” устанавливает globalCompositeOperation в «destination-out», что имеет эффект ластика, и делает пиксели снова прозрачными.
Вот у нас уже есть два инструмента для рисования. Мы можем рисовать чёрные линии в один пиксель шириной (это задано значениями свойств холста strokeStyle и lineWidth по умолчанию), и стирать их. Работающий, хотя и примитивный, прототип программы.
Цвет и размер кисти
Предполагая, что пользователи захотят рисовать не только чёрным цветом и не только одним размером кисти, добавим элементы управления для этих настроек.
В главе 18 я обсуждал разные варианты полей формы. Среди них не было полей для выбора цвета. По традиции у браузеров нет встроенных полей для выбора цвета, но за последнее время в стандарт включили несколько новых типов полей форм. Один из них — . Среди других — «date», «email», «url» и «number». Пока ещё их поддерживают не все. Для тега тип по умолчанию – “text”, и при использовании нового тега, который ещё не поддерживается браузером, браузеры будут обрабатывать его как текстовое поле. Значит, пользователям с браузерами, которые не поддерживают инструмент для выбора цвета, необходимо будет вписывать название цвета вместо того, чтобы выбирать его через удобный элемент управления.
При смене значения поля color значения свойств контекста холста fillStyle и strokeStyle заменяются на новое значение.
Настройка размера кисти работает сходным образом.
Код создаёт варианты размеров кистей из массива, и убеждается в том, что свойство холста lineWidth обновлено при выборе кисти.
Сохранение
Такие URL полезны для разных вещей, как, например, включение небольших картинок прямо в файл стилей. Они также позволяют нам ссылаться на создаваемые файлы на стороне клиента, в браузере, не перемещая их сперва на какой-либо сервер.
У элемента холста есть удобный метод toDataURL, который возвращает URL с данными, содержащий картинку на холсте в виде графического файла. Но нам не следует обновлять ссылку для сохранения при каждом изменении картинки. В случае больших картинок перемещение данных в URL занимает много времени. Вместо этого мы подключаем обновление к ссылке, чтоб она обновляла свой атрибут href каждый раз, когда она получает фокус с клавиатуры или над ней появляется курсор мыши.
Таким образом, линк просто сидит себе тихонечко и указывает на неправильные данные, но как только пользователь приблизится к нему, он волшебным образом обновляет себя так, чтобы указывать на текущую картинку.
Если вы загрузите большую картинку, некоторые браузеры поперхнутся слишком большим URL с данными, который получится в результате. Для маленьких картинок система работает без проблем.
Но здесь мы опять сталкиваемся с деталями реализации песочницы в браузере. Когда картинка грузится с URL с другого домена, если ответ сервера не содержит заголовок, разрешающий использование ресурса с других доменов (см. главу 17), холст будет содержать информацию, которая будет видна пользователю, но не видна скрипту.
Мы могли запросить картинку с приватной информацией (график изменений банковского счёта). Если бы скрипт мог получить к ней доступ, он мог бы шпионить за пользователем.
Для предотвращения таких утечек информации, когда картинка, невидимая скрипту, будет загружена на холст, браузеры пометят его как «испорчен». Пиксельные данные, включая URL с данными, нельзя будет получить с «испорченного» холста. На него можно писать, но с него нельзя читать.
Поэтому нам нужна обработка try/catch в функции update для ссылки сохранения. Когда холст «портится», вызов toDataURL выбросит исключение, являющееся экземпляром SecurityError. В этом случае мы перенаправляем ссылку на ещё один вид URL с протоколом javascript:. Такие ссылки просто выполняют скрипт, стоящий после двоеточия, и наша ссылка покажет предупреждение, сообщающее о проблеме.
Загрузка картинок
Последние два элемента управления используются для загрузки картинок с локального диска и с URL. Нам потребуется вспомогательная функция, которая пробует загрузить картинку с URL и заменить ею содержимое холста.
Нам надо поменять размер холста, чтобы он соответствовал картинке. Почему-то при смене размера холста его контекст забывает все настройки (fillStyle и lineWidth), в связи с чем функция сохраняет их и загружает обратно после обновления размера холста.
Элемент управления для загрузки локального файла использует технику FileReader из главы 18. Кроме используемого там метода readAsText у таких объектов есть метод под названием readAsDataURL – а это то, что нам нужно. Мы загружаем файл, который пользователь выбирает, как URL с данными, и передаём его в loadImageURL для вывода на холст.
Загружать файл с URL ещё проще. Но с текстовым полем мы не знаем, закончил ли пользователь набирать в нём URL, поэтому мы не можем просто слушать события “change”. Вместо этого мы обернём поле в форму и среагируем, когда она будет отправлена – либо по нажатию Enter, либо по нажатию на кнопку load.
Теперь мы определили все элементы управления, требующиеся нашей программе, но нужно добавить ещё несколько инструментов.
Закругляемся
Очень просто можно добавить инструмент для вывода текста, который выводит запрос пользователю, куда он должен ввести текст.
Можно было бы добавить полей для размера текста и шрифта, но для простоты мы всегда используем шрифт sans-serif и размер шрифта, как у текущей кисти. Минимальный размер – 7 пикселей, потому что меньше текст будет нечитаемый.
Ещё один необходимый инструмент для каляк-маляк – “аэрозоль”. Она рисует случайные точки под кистью, пока нажата кнопка мыши, создавая более или менее густые точки в зависимости от скорости движения курсора.
Аэрозоль использует setInterval для выплёвывания цветных точек каждые 25 миллисекунд, пока нажата кнопка мыши. Функция trackDrag используется для того, чтобы currentPos указывала на текущее положение курсора, и для выключения интервала при отпускании кнопки.
Чтобы посчитать, сколько точек нужно нарисовать каждый раз по окончанию интервала, функция подсчитывает размер области текущей кисти и делит его на 30. Для поиска случайного положения под кистью используется функция randomPointInRadius.
Эта функция создаёт точки в квадрате между (-1,-1) и (1,1). Используя теорему Пифагора, она проверяет, лежит ли созданная точка внутри круга с радиусом 1. Когда такая точка находится, она возвращает её координаты, умноженные на радиус.
Цикл нужен для равномерного распределения точек. Проще было бы создавать точки в круге, взяв случайный угол и радиус и вызвав Math.sin и Math.cos для создания точки. Но тогда точки с большей вероятностью появлялись бы ближе к центру круга. Это ограничение можно обойти, но результат будет сложнее, чем предыдущий цикл.
Теперь наша программа для рисования готова. Запустите код и попробуйте.
Упражнения
В программе ещё очень много чего можно улучшить. Давайте добавим ей возможностей.
Прямоугольники
Определите инструмент Rectangle, заполняющий прямоугольник (см. метод fillRect из главы 16) текущим цветом. Прямоугольник должен появляться из той точки, где пользователь нажал кнопку мыши, и до той точки, где он отпустил кнопку. Заметьте, что последнее действие может произойти левее или выше первого.
Как только это заработает, вы заметите, что некомфортно не видеть прямоугольник, когда вы перетаскиваете мышь, чтобы указать его размер. Можете ли вы придумать способ показать прямоугольник во время перетаскивания без фактического рисования на холсте, пока кнопка мыши не будет отпущена?
Если не придумаете, вспомните о стиле position: absolute, который мы обсуждали в главе 13. который можно использовать, чтобы выводить узел поверх остального документа. Свойства pageX и pageY событий мыши можно использовать для точного расположения элемента под мышью, записывая нужные значения в стили left, top, width и height.
Пипетка
Ещё один часто встречающийся инструмент – пипетка, который позволяет щелчком мыши на картинке выбрать цвет, который находится под курсором. Сделайте такой инструмент.
Для его изготовления понадобится доступ к содержимому холста. Метод toDataURL примерно это и делал, но получить информацию о пикселе из URL с данными сложно. Вместо этого мы возьмём метод контекста getImageData, возвращающий прямоугольный кусок картинки в виде объекта со свойствами width, height и data. Свойство data содержит массив чисел от 0 до 255, используя четвёрку чисел для представления красного, зелёного, синего и альфа (непрозрачность) компонентов каждого пикселя.
Этот пример получает числа из одного пикселя холста, один раз, когда тот пуст (все пиксели – прозрачные чёрные), и один раз, когда пиксель окрашен в красный цвет.
Аргументы getImageData показывают начальные координаты прямоугольника x и y, которые нам надо получить, за которыми идут ширина и высота.
Игнорируйте прозрачность в этом упражнении, работайте только с первыми тремя компонентамидля заданного пикселя. Также не волнуйтесь по поводу обновления поля color при выборе цвета. Просто убедитесь, что fillStyle и strokeStyle контекста установлены в цвет, оказавшийся под курсором.
Помните, что эти свойства принимают любой цвет, который понимает CSS, включая запись вида rgb(R, G, B), которую вы видели в главе 15.
Заливка
Это упражнение более сложное, чем предыдущие, и оно потребует разработки нетривиального решения хитрой задачи. Убедитесь, что у вас есть свободное время и терпение перед началом работы, и не отчаивайтесь, если сразу у вас что-то не будет получаться.
Инструмент заливки окрашивает пиксель под курсором мыши и под целой группой пикселей вокруг него, имеющих тот же цвет. Для целей нашего упражнения мы будем считать, что эта группа включает все пиксели, до которых можно добраться от начального, двигаясь по одному пикселю по горизонтали и вертикали (но не по диагонали), не прикасаясь к пикселям, чей цвет отличается от исходного.
Следующая картинка демонстрирует множество пикселей, окрашиваемых, когда инструмент заливки применяется к помеченному пикселю:
Заливка не протекает через диагональные разрывы и не касается пикселей, которых нельзя достичь, даже если они того же цвета, что и исходный.
Вам вновь понадобится getImageData для выяснения цвета пикселя. Скорее всего, удобнее будет получить всю картинку за раз, а потом уже получать данные по пикселям из получившегося массива. Пиксели в массиве организованы схожим образом с решёткой из главы 7, по рядам, только каждый пиксель описывается четырьмя значениями. Первое значение для пикселя с координатами (x,y) находится на позиции (x + y × width) × 4
Включайте в рассмотрение четвёртое число (альфа), потому что нам нужно будет различать чёрные и пустые (прозрачные) пиксели.
Поиск соседних пикселей того же цвета требует пройти по поверхности пикселей вверх, вниз, влево и вправо, пока там находятся пиксели того же цвета. За первый проход всю группу пикселей найти не получится. Вместо этого нужно будет сделать что-то похожее на отслеживание в регулярных выражениях, описанное в главе 9. Когда у вас есть больше одного возможного направления, нужно сохранить все те, по которым вы прямо сейчас не идёте, и просмотреть их позже, по окончанию текущего шага.
У картинки среднего размера много пикселей. Постарайтесь свести работу программы к минимуму, или же она будет работать слишком долго. К примеру, игнорируйте пиксели, которые вы уже обрабатывали.
Рекомендую для окраски отдельных пикселей вызывать fillRect, и хранить какую-то структуру данных, где записано, какие пиксели вы уже обошли.
Читайте также: