Создайте программу показывающую пульсирующее сердце windows form
- обучающая: изучить возможности построения графиков с помощью элемента управления Chart, написать и отладить программу построения на экране графика заданной функции; изучить возможности Visual Studio по созданию простейших графических изображений, написать и отладить программу построения на экране различных графических примитивов; изучить возможности Visual Studio по созданию простейшей анимации, написать и отладить программу, выводящую на экран анимационное изображение научить анализировать, выделять главное, существенное при решении задачи, самостоятельно работать;
- воспитательная: выработать умение мыслить, научить логически мыслить; оценить степень работоспособности; развивать познавательные возможности, внимание; содействовать развитию профессиональных качеств;
- развивающая: развивать умения и навыки применять: теорию при решении задач, навыки самостоятельной работы с методическими указаниями к практическому занятию, осуществлять самоконтроль, язык терминов.
Графики функций.
2. Компьютерная графика.
Выводы: выполнение практической работы способствует формированию практических навыков по программированию различных объектов, связанных с компьютерной графикой и анимацией, при разработки прикладных приложений.
МЕТОДИЧЕСКИЕ УКАЗАНИЯ К ВЫПОЛНЕНИЮ:
Рисунок 1 - Окно программы с элементом управления
Построение графика (диаграммы) производится после вычисления таблицы значений функции y = f(x) на интервале [Xmin, Xmax] с заданным шагом. Полученная таблица передается в специальный массив Points объекта Series элемента управления Chart с помощью метода DataBindXY. Элемент управления Chart осуществляет всю работу по отображению графиков: строит и размечает оси, рисует координатную сетку, подписывает название осей и самого графика, отображает переданную таблицу в виде всевозможных графиков или диаграмм. В элементе управления Chart можно настроить толщину, стиль и цвет линий, параметры шрифта подписей, шаги разметки координатной сетки и многое другое. В процессе работы программы изменение параметров возможно через обращение к соответствующим свойствам элемента управления Chart. Так, например, свойство AxisX содержит значение максимального предела нижней оси графика, и при его изменении во время работы программы автоматически изменяется изображение графика.
Задание 1: составить программу, отображающую графики функций sin(x) и cos(x) на интервале [Xmin, Xmax]. Предусмотреть возможность изменения разметки координатных осей, а также шага построения таблицы.
Прежде всего, следует поместить на форму сам элемент управления Chart. Он располагается на панели элементов в разделе Данные.
Список графиков хранится в свойстве Series, который можно изменить, выбрав соответствующий пункт в окне свойств. Поскольку на одном поле требуется вывести два отдельных графика функций, нужно добавить еще один элемент. Оба элемента, и существующий и добавленный, нужно соответствующим образом настроить: изменить тип диаграммы ChartType на Spline. Здесь же можно изменить подписи к графикам с абстрактных Series1 и Series2 на sin(x) и cos(x) - за это отвечает свойство Legend. Наконец, с помощью свойства BorderWidth можно сделать линию графика потолще, а затем поменять цвет линии с помощью свойства Color.
Ниже приведен текст обработчика нажатия кнопки «Расчет!», который выполняет все требуемые настройки и расчеты и отображает графики функций:
Индивидуальное задание 1.Постройте график функции для своего варианта. Таблицу данных получить путем изменения параметра X с шагом dx. Добавьте второй график для произвольной функции.
Компьютерная графика
Рисунок 2 - Создание обработчика события Paint
Для рисования линий и фигур, отображения текста, вывода изображений и т. д. нужно использовать объект Graphics. Этот объект предоставляет поверхность рисования и используется для создания графических изображений. Ниже представлены два этапа работы с графикой.
• Создание или получение объекта Graphics.
• Использование объекта Graphics для рисования.
Существует несколько способов создания объектов Graphics. Одним из самых используемых является получение ссылки на объект Graphics через объект PaintEventArgs при обработке события Paint формы или элемента управления:
Методы и свойства класса Graphics.
Имена большого количества методов, определенных в классе Graphics, начинаются с префикса Draw* и Fill*. Первые из них предназначены для рисования текста, линий и не закрашенных фигур (таких, например, как прямоугольные рамки), а вторые - для рисования закрашенных геометрических фигур. Ниже рассматривается применение наиболее часто используемых методов, более полную информацию можно найти в документации по Visual Studio.
Метод DrawLine рисует линию, соединяющую две точки с заданными координатами. У метода есть несколько перегруженных версий:
Первый параметр задает инструмент для рисования линии - перо. Перья создаются как объекты класса Pen, например:
Здесь создается черное перо толщиной 2 пиксела. При создании пера можно выбрать его цвет, толщину и тип линии, а также другие атрибуты.
Остальные параметры перегруженных методов DrawLine задают координаты соединяемых точек. Эти координаты могут быть заданы как объекты класса Point и PointF, а также в виде целых чисел и чисел с плавающей десятичной точкой.
В классах Point и PointF определены свойства X и Y, задающие, соответственно, координаты точки по горизонтальной и вертикальной оси. При этом в классе Point эти свойства имеют целочисленные значения, а в классе PointF - значения с плавающей десятичной точкой.
Третий и четвертый варианты метода DrawLine позволяют задавать координаты соединяемых точек в виде двух пар чисел. Первая пара определяет координаты первой точки по горизонтальной и вертикальной оси, а вторая - координаты второй точки по этим же осям. Разница между третьим и четвертым методом заключается в использовании координат различных типов (целочисленных int и с плавающей десятичной точкой float).
Чтобы испытать метод DrawLine в работе, создайте приложение DrawLineApp (аналогично тому, как Вы создавали предыдущее приложение в пункте 1 этой практической работе). В этом приложении создайте следующий обработчик события Paint:
Здесь мы вызываем метод DrawLine в цикле, рисуя 50 горизонтальных линий (рис. 3).
Рисунок 3 - Пример использования DrawLine
Вызвав один раз метод DrawLines, можно нарисовать сразу несколько прямых линий, соединенных между собой. Иными словами, метод DrawLines позволяет соединить между собой несколько точек. Координаты этих точек по горизонтальной и вертикальной осям передаются методу через массив класса Point или PointF:
Задание 2. Для демонстрации возможностей метода DrawLines создайте приложение. Код будет выглядеть следующим образом:
Результат работы программы приведен на рисунке 4.
Рисунок 4 - Пример использования массива точек
Для прорисовки прямоугольников можно использовать метод DrawRectangle:
В качестве первого параметра передается перо класса Pen. Остальные параметры задают расположение и размеры прямоугольника.
Для прорисовки многоугольников можно использовать следующий метод:
Метод DrawEllipse рисует эллипс, вписанный в прямоугольную область, расположение и размеры которой передаются ему в качестве параметров. При помощи метода DrawArc программа может нарисовать сегмент эллипса. Сегмент задается при помощи координат прямоугольной области, в которую вписан эллипс, а также двух углов, отсчитываемых в направлении против часовой стрелки. Первый угол Angle1 задает расположение одного конца сегмента, а второй Angle2 - расположение другого конца сегмента (рис. 5).
Рисунок 5 - Углы и прямоугольник, задающие сегмент эллипса
В классе Graphics определен ряд методов, предназначенных для рисования закрашенных фигур. Имена некоторых из этих методов, имеющих префикс Fill*:
• FillRectangle (рисование закрашенного прямоугольника),
• FillRectangles (рисование множества закрашенных многоугольников),
• FillPolygon (рисование закрашенного многоугольника),
• FillEllipse (рисование закрашенного эллипса),
• FillPie (рисование закрашенного сегмента эллипса),
• FillClosedCurve (рисование закрашенного сплайна),
• FillRegion (рисование закрашенной области типа Region).
Есть два отличия методов с префиксом Fill* от одноименных методов с префиксом Draw*. Прежде всего, методы с префиксом Fill* рисуют закрашенные фигуры, а методы с префиксом Draw* - не закрашенные. Кроме этого, в качестве первого параметра методам с префиксом Fill* передается не перо класса Pen, а кисть класса SolidBrush. Ниже приведем пример, выводящий закрашенный прямоугольник:
Индивидуальное задание 2.Изучите с помощью справки MSDN методы и свойства классов Graphics, Color, Pen и SolidBrush. Создайте собственное приложение - выводящий на форму рисунок, состоящий из различных объектов (линий, многоугольников, эллипсов, прямоугольников и пр.), не закрашенных и закрашенных полностью. Используйте разные цвета и стили линий (сплошные, штриховые, штрих-пунктирные).
Анимация
Класс для работы с таймером Timer формирует в приложении повторяющиеся события. События повторяются с периодичностью, указанной в миллисекундах в свойстве Interval. Установка свойства Enabled в значение true запускает таймер. Каждый тик таймера порождает событие Tick, обработчик которого обычно и создают в приложении. В этом обработчике могут изменяться какие-либо величины и вызываться принудительная перерисовка окна. Для создания анимации весь код, рисующий что-либо на форме, должен находиться в обработчике события Paint.
Для создания простой анимации достаточно использовать таймер, при тике которого будут изменяться параметры изображения (например, координаты концов отрезка) и вызываться обработчик события Paint для рисования по новым параметрам. При таком подходе не надо заботиться об удалении старого изображения, ведь оно создается в окне заново.
Задание 3. В качестве примера рассмотрим код анимации секундной стрелки часов:
Движение по траектории.
Движение по траектории реализуется аналогично выше рассмотренному примеру. Для реализации движения по прямой нужно увеличивать переменные, являющиеся узловыми точками, на определенные константы: в приведенном выше примере это переменные x2 и y2. Для задания более сложной траектории можно использовать различные параметрические кривые.
В случае движения на плоскости обычно изменению подвергается один параметр. Рассмотрим пример реализации движения окружности по декартову листу (рис. 6).
Рисунок 6 - Декартов лист
Декартов лист – это плоская кривая третьего порядка, удовлетворяющая уравнению в прямоугольной системе x 3 + y 3 = 3∙a∙x∙y. Параметр 3∙a определяется как диагональ квадрата, сторона которого равна наибольшей хорде петли.
При переходе к параметрическому виду получаем:
где t = tg φ.
Описание ряда интересных кривых для создания траектории движения можно найти в Википедии в статье Циклоидальная кривая.
Задание 4. Программная реализация выглядит следующим образом:
Индивидуальное задание 3.Выполните задание согласно варианту:
1. Создайте программу, показывающую пульсирующее сердце.
2. Создайте приложение, отображающее вращающийся винт самолета.
3. Разработайте программу анимации двигающегося человечка.
4. Создайте программу, показывающую движение окружности по синусоиде.
5. Создайте приложение, отображающее движение окружности по спирали.
6. Разработайте программу анимации падения снежинки.
7. Создайте программу, показывающую скачущий мячик.
8. Создайте приложение, отображающее движение окружности вдоль границы окна. Учтите возможность изменения размеров окна.
9. Разработайте программу анимации летающего бумеранга.
10. Создайте программу, показывающую падение нескольких звезд одновременно.
11. Создайте приложение, отображающее хаотичное движение звезды в окне.
12. Разработайте программу анимации взлета ракеты. Старт осуществляется по нажатию специальной «красной» кнопки.
13. Создайте программу, показывающую движение окружности вдоль многоугольника. Число вершин вводится пользователем до анимации.
14. Создайте приложение, отображающее броуновское движение молекулы в окне.
15. Разработайте программу анимации движения планет в Солнечной системе.
16. Создайте программу, показывающую движение квадратика по траектории, состоящей из 100 точек, хранящихся в специальном массиве.
17. Создайте приложение, имитирующие механические часы.
18. Разработайте программу анимации падения нескольких листков с дерева. Движение не должно быть линейным.
19. Создайте программу, показывающую движение окружности по спирали с плавно изменяющейся скоростью.
20. Создайте приложение, отображающее движение автомобиля с вращающимися колесами.
Вопросы для самоконтроля:
1. Графики функций.
2. Компьютерная графика.
Список литературы и ссылки на Интернет-ресурсы, содержащие информацию по теме:
Доброго времени суток, уважаемый хабражитель! Сегодня я покажу Вам безграничные возможности CSS и научу при их помощи создать красивое пульсирующее сердце.
ШАГ 1: Пишем HTML документ
Приступим к работе. Начнём с написания HTML-кода. Для создания нашего сердца нужен всего лишь один пустой блочный элемент, которому мы дадим класс heart.
Это всё, что нам понадобится сейчас.
ШАГ 2: Как нарисовать сердце?
По схеме приведённой на рисунке ниже мы будем рисовать наше сердце. Подробнее алгоритм прорисовки описан в следующих шагах.
ШАГ 3: Начинаем рисовать
Зададим нашему блоку размер 100х100px, красну рамку толщиной в 1 пиксель и уберём рамку сверху и слева. Для псевдо-элементов .heart:before и .heart:after мы зададим размеры 70х100px, такую же красную рамку в 1 пиксель, уберём рамку справа, а также заокруглим левый верхний и левый нижний углы радиусом 50px.
ШАГ 4: Появление сердца
- Повернуть псевдо-элемент .heart:after на 90 o используя свойство transform: rotate(90deg);
- Сместить псевдо-єлементы .heart:before и .heart:after так чтобы наш блочный элемент принял форму сердца;
- Повернуть блочный элемент на 45 o .
То что у нас получилось выглядит так:
ШАГ 5: Делаем фон
Чтобы наше сердце стало красивее мы рыскрасим его с помощью градиентов. Так как официально CSS3 не утверждён и ни один браузер его полностью не поддерживает, то градиенты я прописал отдельно для нескольких браузеров.
Градиент для тела самого блока:
Градиенты подобраны лично мною методом научного тыка ;)
Браузеры, которые по каким то непонятным причинам не понимают CSS3-градиенты, будут видеть просто красное сердечко.
ШАГ 6: Заставим наше сердце биться
Теперь попытаемся заставить наше сердечко биться. В этом нам поможет чудесное свойство CSS3 — animation. В нём записывается название так называемого кейфрейма (в нём описано как изменяются стили элемента во время анимации), длительность анимации, количество повторений и т.п.
Чтобы указать браузеру что он должен анимировать наш элемент в классе .heart напишем:
Теперь напишем наш кейфрейм для анимации. В нём мы напишем что элемент во время анимации должен увеличиваться в 1,1 раза, а потом возвращаться к исхожному размеру. Не забываем о том, что элемент мы повернули на 45 o .
ШАГ 7: Вопросы кроссбраузерности
- -webkit- для браузеров на движке Webkit (Chrome, Safari);
- -moz- для браузеров на движке Gecko (Firefox, SeaMonkey);
- -o- для браузеров на движке Presto (Opera, Nintendo DS Browser);
Обратите внимание, что при написании кейфрейма для браузеров на движке Gecko, кавычки в имени кейфрейма ставить не нужно.
Результат
Результат как по мне потрясающий: красиво, изящно, просто. Демо вы можете посмотреть тут.
Корректно будет работать в Mozilla Firefox 4.0+, Safari 4, Google Chrome 3.0+. В Opera начиная с версии 12 будут видны лишь градиенты.
P.S.: Мне кажется, что данное сердечко будет отличным подарком девушке-айтишнице на День влюблённых. Как вы считаете?
Обычно для отображения точечных рисунков, рисунков из метафайлов, значков, рисунков из файлов в формате BMP, JPEG, GIF или PNG используется объект PictureBox, т.е. элемент управления PictureBox действует как контейнер для картинок. Можно выбрать изображение для вывода, присвоив значение свойству Image. Свойство Image может быть установлено в окне свойств или в коде программы, указывая на рисунок, который следует отображать.
Элемент управления PictureBox содержит и другие полезные свойства, в том числе свойство AutoSize, определяющее, будет ли изображение растянуто в элементе PictureBox, и SizeMode, которое может использоваться для растягивания, центрирования или увеличения изображения в элементе управления PictureBox.
Перед добавлением рисунка к элементу управления PictureBox в проект обычно добавляется файл рисунка в качестве ресурса 3 . После добавления ресурса к проекту можно повторно использовать его. Например, может потребоваться отображение одного и того же изображения в нескольких местах.
Необходимо отметить, что поле Image само является классом для работы с изображениями, у которого есть свои методы. Например, метод FromFile используется для загрузки изображения из файла. Кроме класса Image существует класс Bitmap, который расширяет возможности класса Image за счет дополнительных методов для загрузки, сохранения и использования растровых изображений. Так метод Save класса Bitmap позволяет сохранять изображения в разных форматах, а методы GetPixel и SetPixel позволяют получить доступ к отдельным пикселям рисунка.
12.2. Элементы управления OpenFileDialog и SaveFileDialog
Элемент управления OpenFileDialog является стандартным диалоговым окном. Он аналогичен диалоговому окну «Открыть файл» операционной системы Windows. Элемент управления OpenFileDialog позволяет пользователям просматривать папки личного компьютера или любого компьютера в сети, а также выбирать файлы, которые требуется открыть.
Для вызова диалогового окна для выбора файла можно использовать метод ShowDialog () который возвращает значение DialogResult . OK при корректном выборе. Диалоговое окно возвращает путь и имя файла, который был выбран пользователем в специальном свойстве FileName.
12.3. Простой графический редактор
Создайте приложение, реализующее простой графический редактор. Функциями этого редактора должны быть: открытие рисунка, рисование поверх него простой кистью, сохранение рисунка в другой файл. Для этого создайте форму и разместите на ней элементы управления Button и PictureBox (рис 12.1).
Рис. 12.1. Форма для графического редактора
В этом случае не понадобится из панели элементов размещать на форме элементы диалоговых окон OpenFileDialog и SaveFileDialog. Эти элементы будут порождены динамически в ходе выполнения программы с помощью конструктора. Например, так:
OpenFileDialog dialog = new OpenFileDialog();
Далее они будут вызываться с помощью метода ShowDialog () .
Для кнопок «Открыть» и «Сохранить» создайте свои обработчики события. Также создайте обработчик события Load для формы. Для элемента управления pictureBox 1 создайте обработчики события MouseDown, MouseMove. Код приложения будет выглядеть следующим образом:
// Глобальные переменные
Обычно для отображения точечных рисунков, рисунков из метафайлов, значков, рисунков из файлов в формате BMP, JPEG, GIF или PNG используется объект PictureBox, т.е. элемент управления PictureBox действует как контейнер для картинок. Можно выбрать изображение для вывода, присвоив значение свойству Image. Свойство Image может быть установлено в окне свойств или в коде программы, указывая на рисунок, который следует отображать.
Элемент управления PictureBox содержит и другие полезные свойства, в том числе свойство AutoSize, определяющее, будет ли изображение растянуто в элементе PictureBox, и SizeMode, которое может использоваться для растягивания, центрирования или увеличения изображения в элементе управления PictureBox.
Перед добавлением рисунка к элементу управления PictureBox в проект обычно добавляется файл рисунка в качестве ресурса 3 . После добавления ресурса к проекту можно повторно использовать его. Например, может потребоваться отображение одного и того же изображения в нескольких местах.
Необходимо отметить, что поле Image само является классом для работы с изображениями, у которого есть свои методы. Например, метод FromFile используется для загрузки изображения из файла. Кроме класса Image существует класс Bitmap, который расширяет возможности класса Image за счет дополнительных методов для загрузки, сохранения и использования растровых изображений. Так метод Save класса Bitmap позволяет сохранять изображения в разных форматах, а методы GetPixel и SetPixel позволяют получить доступ к отдельным пикселям рисунка.
12.2. Элементы управления OpenFileDialog и SaveFileDialog
Элемент управления OpenFileDialog является стандартным диалоговым окном. Он аналогичен диалоговому окну «Открыть файл» операционной системы Windows. Элемент управления OpenFileDialog позволяет пользователям просматривать папки личного компьютера или любого компьютера в сети, а также выбирать файлы, которые требуется открыть.
Для вызова диалогового окна для выбора файла можно использовать метод ShowDialog () который возвращает значение DialogResult . OK при корректном выборе. Диалоговое окно возвращает путь и имя файла, который был выбран пользователем в специальном свойстве FileName.
12.3. Простой графический редактор
Создайте приложение, реализующее простой графический редактор. Функциями этого редактора должны быть: открытие рисунка, рисование поверх него простой кистью, сохранение рисунка в другой файл. Для этого создайте форму и разместите на ней элементы управления Button и PictureBox (рис 12.1).
Рис. 12.1. Форма для графического редактора
В этом случае не понадобится из панели элементов размещать на форме элементы диалоговых окон OpenFileDialog и SaveFileDialog. Эти элементы будут порождены динамически в ходе выполнения программы с помощью конструктора. Например, так:
OpenFileDialog dialog = new OpenFileDialog();
Далее они будут вызываться с помощью метода ShowDialog () .
Для кнопок «Открыть» и «Сохранить» создайте свои обработчики события. Также создайте обработчик события Load для формы. Для элемента управления pictureBox 1 создайте обработчики события MouseDown, MouseMove. Код приложения будет выглядеть следующим образом:
// Глобальные переменные
private Point PreviousPoint , point ;
private Bitmap bmp;
private Pen blackPen;
private Graphics g ;
// Действия при загрузке формы
private void Form1_Load( object sender, EventArgs e)
blackPen = new Pen ( Color . Black , 4);
>
// Действия при нажатии кнопки загрузки изображения
private void button1_Click( object sender, EventArgs e)
// Описываем объект класса OpenFileDialog
OpenFileDialog dialog = new OpenFileDialog ();
// Задаем расширения файлов
dialog.Filter = "Image files (*.BMP, *.JPG, " +
// Вызываем диалог и проверяем выбран ли файл
if (dialog.ShowDialog() == DialogResult .OK)
// Загружаем изображение из выбранного файла
Image image = Image .FromFile(dialog.FileName);
int width = image.Width;
int height = image.Height;
// Создаем и загружаем изображение в формате bmp
bmp = new Bitmap (image, width, height);
// Записываем изображение в pictureBox 1
pictureBox 1. Image = bmp ;
// Подготавливаем объект Graphics для рисования
g = Graphics . FromImage ( pictureBox 1. Image );
>
// Действия при нажатии мышки в pictureBox 1
private void pictureBox1_MouseDown( object sender,
// Записываем в предыдущую точку текущие координаты
private void pictureBox1_MouseMove( object sender,
// Проверяем нажата ли левая кнопка мыши
if (e.Button == MouseButtons .Left)
// Запоминаем текущее положение курсора мыши
// Соеденяем линией предыдущую точку с текущей
g.DrawLine(blackPen, PreviousPoint, point);
// Текущее положение курсора - в PreviousPoint
// Принудительно вызываем перерисовку
pictureBox 1. Invalidate ();
>
// Действия при нажатии кнопки сохранения файла
private void button2_Click( object sender, EventArgs e)
// Описываем и порождаем объект savedialog
SaveFileDialog savedialog = new SaveFileDialog ();
// Задаем свойства для savedialog
savedialog . Title = "Сохранить картинку как . " ;
" PNG File (*. png )|*. png " ;
if (savedialog.ShowDialog() == DialogResult .OK)
string fileName = savedialog.FileName;
// Убираем из имени расширение файла
string strFilExtn = fileName.Remove(0,
// Сохраняем файл в нужном формате
System.Drawing.Imaging. ImageFormat .Bmp);
System.Drawing.Imaging. ImageFormat .Jpeg);
System.Drawing.Imaging. ImageFormat .Gif);
System.Drawing.Imaging. ImageFormat .Tiff);
System.Drawing.Imaging. ImageFormat .Png);
>
Далее добавим в проект кнопку для перевода изображения в градации серого цвета:
// Действия при нажатии кнопки перевода в градации серого
private void button3_Click( object sender, EventArgs e)
// Циклы для перебора всех пикселей на изображении
for ( int i = 0; i
for ( int j = 0; j
// Извлекаем в R значение красного цвета
int R = bmp.GetPixel(i, j).R;
// Извлекаем в G значение зеленого цвета
int G = bmp.GetPixel(i, j).G;
int B = bmp.GetPixel(i, j).B;
// Высчитываем среднее арифметическое
int Gray = ( R = G + B ) / 3;
// Переводим число в значение цвета.
// 255 – показывает степень прозрачности.
// Остальные значения одинаковы
Color p = Color .FromArgb(255, Gray, Gray,
// Записываем цвет в текущую точку
bmp.SetPixel(i, j, p);
// Вызываем функцию перерисовки окна
>
Данный код демонстрирует возможность обращения к отдельным пикселям. Цвет каждого пикселя хранится в модели RGB и состоит из трех составляющих: красного, зеленого и синего цвета, называемых каналами. Значение каждого канала может варьироваться в диапазоне от 0 до 255.
Для рисования линий и фигур, отображения текста, вывода изо-бражений и т. д. нужно использовать объект Graphics. Этот объект пре-доставляет поверхность рисования и используется для создания графи-ческих изображений. Ниже представлены два этапа работы с графикой.
2 Создание или получение объекта Graphics.
3 Использование объекта Graphics для рисования.
Существует несколько способов создания объектов Graphics. Од-ним из самых используемых является получение ссылки на объект Graphics через объект PaintEventArgs при обработке события Paint формы или элемента управления:
private void Form1_Paint(object sender, PaintEventArgs e)
Graphics g = e.Graphics;
// Далее вставляется код рисования
Методы и свойства класса Graphics
Имена большого количества методов, определенных в классе Graphics, начинаются с префикса Draw* и Fill*. Первые из них предна-значены для рисования текста, линий и незакрашенных фигур (таких, например, как прямоугольные рамки), а вторые – для рисования закра-шенных геометрических фигур. Ниже рассматривается применение наиболее часто используемых методов, более полную информацию можно найти в документации по Visual Studio.
Метод DrawLine рисует линию, соединяющую две точки с задан-ными координатами. У метода есть несколько перегруженных версий:
public void DrawLine(Pen, Point, Point); public void DrawLine(Pen, PointF, PointF); public void DrawLine(Pen, int, int, int, int);
public void DrawLine(Pen, float, float, float, float);
Первый параметр задает инструмент для рисования линии – перо.
Перья создаются как объекты класса Pen, например:
Pen p = new Pen(Brushes.Black, 2);
Здесь создается черное перо толщиной 2 пиксела. При создании пера можно выбрать его цвет, толщину и тип линии, а также другие ат-рибуты.
Остальные параметры перегруженных методов DrawLine задают координаты соединяемых точек. Эти координаты могут быть заданы как объекты класса Point и PointF, а также в виде целых чисел и чисел
2 плавающей десятичной точкой.
4) классах Point и PointF определены свойства X и Y, задающие, со-ответственно, координаты точки по горизонтальной и вертикальной оси. При этом в классе Point эти свойства имеют целочисленные значения, а в классе PointF – значения с плавающей десятичной точкой.
Третий и четвертый варианты метода DrawLine позволяют задавать координаты соединяемых точек в виде двух пар чисел. Первая пара опре-деляет координаты первой точки по горизонтальной и вертикальной оси,
2 вторая – координаты второй точки по этим же осям. Разница между треть-им и четвертым методом заключается в использовании координат различ-ных типов (целочисленных int и с плавающей десятичной точкой float).
Чтобы испытать метод DrawLine в работе, создайте приложение DrawLineApp (аналогично тому, как Вы создавали предыдущее приложе-ние). В этом приложении создайте следующий обработчик события Paint:
private void Form1_Paint(object sender, PaintEventArgs e)
Graphics g = e.Graphics;
g.DrawLine(new Pen(Brushes.Black, 2),
10, 4 * i + 20, 200, 4 * i + 20);
Здесь мы вызываем метод DrawLine в цикле, рисуя 50 горизонталь-ных линий (рис. 10.2).
Рис. 10.2. Пример использования DrawLine
Вызвав один раз метод DrawLines, можно нарисовать сразу не-сколько прямых линий, соединенных между собой. Иными словами, ме-тод DrawLines позволяет соединить между собой несколько точек. Ко-
ординаты этих точек по горизонтальной и вертикальной осям передают-ся методу через массив класса Point или PointF:
public void DrawLines(Pen, Point[]); public void DrawLines(Pen, PointF[];
Для демонстрации возможностей метода DrawLines создайте при-ложение. Код будет выглядеть следующим образом:
Point[] points = new Point[50];
Pen pen = new Pen(Color.Black, 2);
private void Form1_Paint(object sender, PaintEventArgs e)
Graphics g = e.Graphics;
private void Form1_Load(object sender, EventArgs e)
points[i] = new Point(xPos, 10 * i);
Результат работы программы приведен на рис. 10.3.
Для прорисовки прямоугольников можно использовать метод
DrawRectangle(Pen, int, int, int, int);
2 качестве первого параметра передается перо класса Pen. Осталь-ные параметры задают расположение и размеры прямоугольника.
Для прорисовки многоугольников можно использовать следующий метод:
Рис. 10.3. Пример использования массива точек
Метод DrawEllipse рисует эллипс, вписанный в прямоугольную область, расположение и размеры которой передаются ему в качестве параметров. При помощи метода DrawArc программа может нарисовать сегмент эллипса. Сегмент задается при помощи координат прямоуголь-ной области, в которую вписан эллипс, а также двух углов, отсчитывае-мых в направлении против часовой стрелки. Первый угол Angle1 задает расположение одного конца сегмента, а второй Angle2 – расположение другого конца сегмента (рис. 10.4).
Рис. 10.4. Углы и прямоугольник, задающие сегмент эллипса
9) классе Graphics определен ряд методов, предназначенных для рисования закрашенных фигур. Имена некоторых из этих методов, имеющих префикс Fill*:
2 FillRectangle (рисование закрашенного прямоугольника),
3 FillRectangles (рисование множества закрашенных многоуголь-ников),
4 FillPolygon (рисование закрашенного многоугольника),
5 FillEllipse (рисование закрашенного эллипса),
6 FillPie (рисование закрашенного сегмента эллипса),
7 FillClosedCurve (рисование закрашенного сплайна),
8 FillRegion (рисование закрашенной области типа Region).
Есть два отличия методов с префиксом Fill* от одноименных ме-
тодов с префиксом Draw*. Прежде всего, методы с префиксом Fill* ри-суют закрашенные фигуры, а методы с префиксом Draw* – незакрашен-ные. Кроме этого, в качестве первого параметра методам с префиксом Fill* передается не перо класса Pen, а кисть класса SolidBrush. Ниже приведем пример, выводящий закрашенный прямоугольник:
SolidBrush B = new SolidBrush(Color.DeepPink); g.FillRectangle(B, 0, 0, 100, 100);
Индивидуальное задание
Изучите с помощью справки MSDN 1 методы и свойства классов Graphics, Color, Pen и SolidBrush. Создайте собственное приложение – выводящий на форму рисунок, состоящий из различных объектов (ли-ний, многоугольников, эллипсов, прямоугольников и пр.), не закрашен-ных и закрашенных полностью. Используйте разные цвета и стили ли-ний (сплошные, штриховые, штрих-пунктирные).
ЛАБОРАТОРНАЯ РАБОТА № 11.
АНИМАЦИЯ
Цель лабораторной работы: изучить возможностиVisual Studioпо созданию простейшей анимации. Написать и отладить программу, выводящую на экран анимационное изображение.
Работа с таймером
Класс для работы с таймером Timer формирует в приложении по-вторяющиеся события. События повторяются с периодичностью, ука-занной в миллисекундах в свойстве Interval. Установка свойства Enabled в значение true запускает таймер. Каждый тик таймера порож-дает событие Tick, обработчик которого обычно и создают в приложе-нии. В этом обработчике могут изменяться какие-либо величины и вы-зываться принудительная перерисовка окна. Для создания анимации весь код, рисующий что-либо на форме, должен находиться в обработ-чике события Paint.
Создание анимации
Для создания простой анимации достаточно использовать таймер, при тике которого будут изменяться параметры изображения (например, координаты концов отрезка) и вызываться обработчик события Paint для рисования по новым параметрам. При таком подходе не надо заботиться об удалении старого изображения, ведь оно создается в окне заново.
12) качестве примера рассмотрим код анимации секундной стрелки
11) Глобальные переменные private int x1, y1, x2, y2, r; private double a;
private Pen pen = new Pen(Color.DarkRed, 2);
12) Перерисовка формы
private void Form1_Paint(object sender, PaintEventArgs e)
Graphics g = e.Graphics;
14) Рисуем секундную стрелку g.DrawLine(pen, x1, y1, x2, y2);
16) Действия при загрузке формы
private void Form1_Load(object sender, EventArgs e)
r = 150; // Радиус стрелки
a = 0; // Угол поворота стрелки
15) Определяем центр формы – начало стрелки
x1 = ClientSize.Width / 2;
y1 = ClientSize.Height / 2;
16) Конец стрелки
x2 = x1 + (int)(r * Math.Cos(a));
y2 = y1 ‐ (int)(r * Math.Sin(a));
17) Действия при очередном «тике» таймера
private void timer1_Tick(object sender, EventArgs e)
a ‐= 0.1; // Уменьшаем угол на 0,1 радиану
и Новые координаты конца стрелки
x2 = x1 + (int)(r * Math.Cos(a)); y2 = y1 ‐ (int)(r * Math.Sin(a));
и Принудительный вызов события Paint Invalidate();
Движение по траектории
Движение по траектории реализуется аналогично вышерассмот-ренному примеру. Для реализации движения по прямой нужно увеличи-вать переменные, являющиеся узловыми точками, на определенные константы: в приведенном выше примере это переменные x2 и y2. Для задания более сложной траектории можно использовать различные па-раметрические кривые.
4. случае движения на плоскости обычно изменению подвергает-ся один параметр. Рассмотрим пример реализации движения окруж-ности по декартову листу. Декартов лист – это плоская кривая третьего порядка, удовлетворяющая уравнению в прямоугольной сис-теме x 3 + y 3 = 3·a·x·y. Параметр 3·a определяется как диагональ квадрата, сторона которого равна наибольшей хорде петли.
При переходе к параметрическому виду получаем:
где t = tg φ.
Рис. 11.1. Декартов лист
Описание ряда интересных кривых для создания траектории дви-жения можно найти в Википедии в статье Циклоидальная кривая 2 .
Программная реализация выглядит следующим образом:
private int x1, y1, x2, y2;
private double a, t, fi;
private Pen pen = new Pen(Color.DarkRed, 2); private void Form1_Load(object sender, EventArgs e)
x1 = ClientSize.Width / 2;
y1 = ClientSize.Height / 2;
x2 = x1 + (int)((3 * a * t) / (1 + t * t * t));
y2 = y1 ‐ (int)((3 * a * t * t) / (1 + t * t * t));
private void Form1_Paint(object sender, PaintEventArgs e)
Graphics g = e.Graphics; g.DrawEllipse(pen, x2, y2, 20, 20);
private void timer1_Tick(object sender, EventArgs e)
x2 = x1 + (int)((3 * a * t) / (1 + t * t * t));
y2 = y1 ‐ (int)((3 * a * t * t) / (1 + t * t * t)); Invalidate();
Индивидуальное задание
Создайте программу, показывающую пульсирующее сердце.
Создайте приложение, отображающее вращающийся винт са-
Разработайте программу анимации двигающегося человечка.
Создайте программу, показывающую движение окружности по синусоиде.
Создайте приложение, отображающее движение окружности по спирали.
Разработайте программу анимации падения снежинки.
Создайте программу, показывающую скачущий мячик.
Создайте приложение, отображающее движение окружности вдоль границы окна. Учтите возможность изменения размеров окна.
Разработайте программу анимации летающего бумеранга.
Создайте программу, показывающую падение нескольких звезд одновременно.
Создайте приложение, отображающее хаотичное движение звезды в окне.
Разработайте программу анимации взлета ракеты. Старт осу-ществляется по нажатию специальной «красной» кнопки.
Создайте программу, показывающую движение окружности вдоль многоугольника. Число вершин вводится пользователем до анимации.
Создайте приложение, отображающее броуновское движение молекулы в окне.
Разработайте программу анимации движения планет в Солнеч-ной системе.
Создайте программу, показывающую движение квадратика по траектории, состоящей из 100 точек, хранящихся в специальном массиве.
Создайте приложение, имитирующие механические часы.
Разработайте программу анимации падения нескольких лист-ков с дерева. Движение не должно быть линейным.
Создайте программу, показывающую движение окружности по спирали с плавно изменяющейся скоростью.
Создайте приложение, отображающее движение автомобиля
у вращающимися колесами.
ЛАБОРАТОРНАЯ РАБОТА № 12.
ОБРАБОТКА ИЗОБРАЖЕНИЙ
Цель лабораторной работы: изучить возможностиVisual Studioпо открытию и сохранению файлов. Написать и отладить программу для обработки изображений.
© 2014-2022 — Студопедия.Нет — Информационный студенческий ресурс. Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав (0.055)
Читайте также: