Добавление графики и эффектов анимации

Использование события Paint формы

Если вы протестируете показанный выше метод DrawLine в программе, то заметите, что созданная линия сохраняется в форме только до тех пор, пока ее что-нибудь не закроет. Если в какой-то момент в форме появится диалоговое окно, которое закроет собой эту линию, то при его исчезновении линия больше не будет видна. Линия также исчезнет, если вы минимизируете окно формы, а затем снова его развернете. Чтобы устранить эту проблему, вы должны поместить ваш графический код в процедуру события Paint формы так, что каждый раз, при обновлении формы, графика также перерисовывалась.

В следующем упражнение вы с помощью процедуры события Paint формы создадите три фигуры. Нарисованные вами фигуры будут сохраняться в форме даже тогда, когда форма будет перекрываться другим окном или минимизироваться.

Построение фигур линии, прямоугольника и эллипса

Запустите Visual Studio и создайте в папке c:\vbnet03sbs\Гл.16 новый проект с именем My Draw Shapes.

Измените размер формы так, чтобы она стала выше и шире, чем форма по умолчанию. Вам понадобится место для создания графических фигур. Однако вы не будете использовать никаких элементов управления Области элементов. Вы создадите фигуры, поместив в процедуру события Form1_Paint формы код программы.

Установите свойство Text формы Form1 на значение Рисование фигур.

Чтобы отобразить Редактор кода, щелкните в Обозревателе решений на кнопке View Code (Просмотреть код).

В раскрывающемся списке Class Name (Имя класса) щелкните на Form1 Events. Form1 Events - это список событий вашего проекта, ассоциированных с объектом Form1.

В раскрывающемся списке Method Name (Имя метода) щелкните на событии Paint.

В Редакторе кода появится процедура события Form1_Paint. Это место, где вы должны ввести код программы, который должен исполняться при обновлении формы Visual Basic.

Введите следующий код программы:

'Готовим переменную GraphicsFun для графических вызовов
Dim GraphicsFun As System.Drawing.Graphics
GraphicsFun = Me.CreateGraphics

'Для рисования линии и эллипса используем перо красного цвета
Dim PenColor As New System.Drawing.Pen(System.Drawing.Color.Red)
GraphicsFun.DrawLine(PenColor, 20, 30, 100, 80)
GraphicsFun.DrawEllipse(PenColor, 10, 120, 200, 160)

'Для создания заполненного прямоугольника используем кисть зеленого цвета
Dim BrushColor As New SolidBrush(Color.Green)
GraphicsFun.FillRectangle(BrushColor, 150, 10, 250, 100)

Этот пример процедуры события рисует три графические фигуры - красную линию, красный эллипс и заполненный зеленым цветом прямоугольник. Чтобы программирование графики стало доступно, процедура объявляет в коде переменную с именем GraphicsFun и использует метод CreateGraphics для активизации (или присвоения значения) этой переменной. Переменная PenColor типа System.Drawing.Pen используется для установки цвета рисования линии и эллипса, а переменная BrushColor типа SolidBrush используется для установки цвета заливки прямоугольника. Эти примеры являются только самой верхушкой айсберга графической библиотеки - существует множество различных фигур, цветов и их вариантов, которые можно использовать с помощью методов класса System.Drawing.Graphics.

Чтобы запустить программу, щелкните на кнопке Start (Начать).

Примечание. Готовая программа Draw Shapes расположена в папке c:\vbnet03sbs\Гл.16\draw shapes.

Visual Basic загрузит форму и выполнит событие Paint этой формы. Ваша форма будет выглядеть примерно так.

Минимизируйте форму, а затем снова восстановите ее размер. Событие Paint формы снова выполнится, и графические фигуры обновятся.

Чтобы завершить программу, щелкните на кнопке Закрыть.

Добавление анимации

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

В этом разделе вы узнаете, как добавлять в ваши программы простую анимацию. Вы узнаете, как обновлять свойства Top и Left области вывода изображений, управлять скоростью анимации с помощью объекта таймера и обнаруживать границу окна вашей формы.

Перемещение объектов по форме

В Visual Basic 6 специальный метод с именем Move позволял перемещать объекты в системе координат. Метод Move больше не поддерживается элементами управления Visual Basic .NET; однако вместо него вы можете использовать следующие методы и свойства:

В следующем разделе обсуждается, как использовать для перемещения объектов свойства Left, Top и Location. Чтобы получить дополнительную информацию о методе SetBounds, найдите ключевое слово SetBounds в справочной системе Visual Basic.

Свойства Left и Top позволяют перемещать объект. Чтобы переместить объект в горизонтальном направлении, используйте свойство Left. Left имеет следующий синтаксис

объект.Left = по-горизонтали

где объект - это имя объекта формы, который вы хотите переместить, а по-горизонтали - это новая горизонтальная (по оси x) координата левого края объекта, измеренная в пикселях. Например, следующий оператор программы перемещает объект области вывода изображений в точку, расположенную в 300 пикселях справа от левого края окна:

PictureBox1.Left = 300

Чтобы переместить объект на относительное расстояние, вы должны добавлять или вычитать пиксели из текущего значения свойства Left. Например, чтобы переместить объект на 50 пикселей вправо, вы должны добавить к свойству Left значение 50, как показано здесь:

PictureBox1.Left = PictureBox1.Left + 50

Аналогично, вы можете изменить вертикальное положение объекта на форме, установив его свойство Top. Синтаксис свойства Top имеет вид

объект.Top = по-вертикали

где объект - это имя объекта формы, который нужно переместить, а по-вертикали - это новая вертикальная (по оси y) координата верхнего края объекта, измеренная в пикселях. Например, следующий оператор программы перемещает объект области вывода изображений в точку, расположенную в 150 пикселях ниже строки заголовка окна:

PictureBox1.Top = 150

Относительное перемещение вверх или вниз осуществляется с помощью добавления или вычитания пикселей из текущего значения свойства Top. Например, чтобы переместить объект на 30 пикселей вниз, нужно добавить к свойству Top значение 30, как показано здесь:

PictureBox1.Top = PictureBox1.Top + 30

Свойство Location

Чтобы переместить объект одновременно в вертикальном и горизонтальном направлении, довольно просто использовать комбинацию значений свойств Left и Top. Например, чтобы переместить объект области вывода изображений в координаты (300, 200), можно ввести следующий код программы:

PictureBox1.Left = 300
PictureBox1.Top = 200

Однако разработчики Visual Basic .NET не рекомендуют использовать два оператора программы для перемещения объекта, если вы планируете делать много перемещений объектов программы (например, если во время сложного анимационного эффекта вы планируете перемещать объекты сотни или тысячи раз). Вместо этого Microsoft рекомендует использовать свойство Location, имеющее синтаксис

объект .Location = New Point(по-горизонтали, по-вертикали)

где объект - это имя объекта, по-горизонтали - это горизонтальная координата по оси x, по-вертикали - это вертикальная координата по оси y, а Point - это структура, определяющая положение верхнего левого угла объекта в пикселях. Например, следующий оператор программы перемещает объект области вывода изображений в координаты (300, 200):

PictureBox1.Location = New Point(300, 200)

Чтобы с помощью свойства Location выполнить относительное перемещение, требуются свойства Location.X и Location.Y. Например, оператор программы

PictureBox1.Location = New Point(PictureBox1.Location.X - 50, _
PictureBox1.Location.Y - 40)

перемещает объект области вывода изображений формы на 50 пикселей влево и на 40 пикселей вверх. Хотя эта конструкция кажется несколько громоздкой, она является рекомендуемым способом перемещения объектов вашей формы во время выполнения программы.

Создание анимации с помощью объекта Timer

Фокус с созданием анимации в программе состоит в помещении в процедуру события таймера одного или нескольких изменений свойства Location. При этом через определенные интервалы времени таймер будет заставлять один или несколько объектов перемещаться по экрану. В лекции 7 вы узнали о том, как использовать объект таймера для обновления раз в секунду простой утилиты часов так, что она отображала правильное время. Когда вы создаете анимацию, вы устанавливаете свойство Interval таймера на ускоренное обновление - 1/5 секунды (200 миллисекунд), 1/10 секунды (100 миллисекунд) или меньше. Точная скорость зависит от того, на сколько быстро с вашей точки зрения должна выполняться анимация.

Еще один фокус состоит в использовании свойств Top и Left и размера формы для определения краев этой формы. Использование в процедуре события этих значений позволит вам останавливать анимацию (отключать таймер), когда объект достигает границы формы. Используя свойство Top, свойство Left, свойства, содержащие размер формы, и структуру выбора If...Then или Select Case, вы можете заставить объект отскакивать от одного или нескольких краев формы.

Следующее упражнение демонстрирует, как вы можете с помощью свойства Location и объекта таймера анимировать область вывода изображений, содержащую значок солнца (Sun.ico). В этом упражнении для обнаружения верхнего края формы вы будете использовать свойство Top, а для обнаружения нижнего края - свойство Size.Height. Значок солнца будет перемещаться вверх-вниз между этими двумя границами каждый раз, когда вы щелкаете на кнопке.

Анимация значка Солнца на вашей форме

Щелкните на команде Close Solution (Закрыть решение) в меню File (Файл), а затем создайте в папке c:\vbnet03sbs\Гл.16 новый проект с именем My Moving Icon.

Используя элемент управления Button, нарисуйте в нижнем левом углу формы две кнопки.

Используя элемент управления PictureBox, нарисуйте в нижнем правом углу формы небольшой прямоугольный объект области вывода изображений. Это объект программы, который вы будете анимировать.

Сделайте двойной щелчок мышью на элементе управления Timer, находящемся на закладке Windows Forms окна Toolbox (Область элементов), чтобы добавить его в область компонент, находящуюся ниже формы. Таймер будет управлять скоростью анимации. Вспомните, что таймер сам по себе не отображается на форме, так что он показывается под формой в области компонент, предназначенной для невидимых объектов.

Установите для формы и объектов кнопки, области вывода изображений и таймера следующие свойства:

Объект	Свойство	Установка
Button1	Text	Переместить вверх
Button2	Text	Переместить вниз
PictureBox1	Image	c:\vbnet03sbs\Гл.16\sun.ico
	SizeMode	StretchImage
Timer1	Enabled	False
	Interval	75
Form1	Text	Простая анимация

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

Чтобы отредактировать процедуру события для кнопки Переместить вверх, сделайте на ней двойной щелчок мышью. В Редакторе кода появится процедура события Button1_Click.

Введите следующий код программы:

GoingUp = True
Timer1.Enabled = True

Эта простая процедура события устанавливает переменную GoingUp на значение True и включает объект таймера. Реальный код программы для перемещения объекта области вывода изображений и определения правильного направления находится в процедуре события Timer1_Tick.

Прокрутите программный код формы в самый верх и под тегом "Windows Form Designer generated code" ("Код, автоматически созданный конструктором форм Windows") введите следующее объявление переменной:

Dim GoingUp As Boolean		'GoingUp хранит текущее направление

Это объявление переменной делает переменную GoingUp видимой для всех процедур событий формы. Я использовал переменную типа Boolean потому, что у нас в этой программе есть только два возможных направления перемещения - вверх и вниз.

Снова отобразите форму, дважды щелкните мышью на кнопке Переместить вниз, а затем введите в процедуре события Button2_Click следующий код программы:

GoingUp = False
Timer1.Enabled = True

Эта процедура очень похожа на процедуру события Button1_Click, за исключением того, что она меняет направление на движение вниз.

Снова отобразите форму, дважды щелкните мышью на объекте Timer1, а затем введите в процедуре события Timer1_Tick следующий код программы:

If GoingUp = True Then
	'перемещаем область вывода изображений вверх
	If PictureBox1.Top > 10 Then
		PictureBox1.Location = New Point _
		(PictureBox1.Location.X - 10, _
		PictureBox1.Location.Y - 10)
	End If
	Else
	'перемещаем область вывода изображений вниз
	If PictureBox1.Top < (Me.Size.Height - 75) Then
		PictureBox1.Location = New Point _
		(PictureBox1.Location.X + 10, _
		PictureBox1.Location.Y + 10)
	End If
End If

Как только таймер будет включен, эта структура выбора If...Then будет выполняться каждые 75 миллисекунд. Первая строка процедуры проверяет, установлена ли переменная GoingUp типа Boolean на значение True, указывающее, что значок перемещается вверх по форме. Если она установлена на True, процедура перемещает объект области вывода изображений на 10 пикселей ближе к левому краю и на 10 пикселей ближе к верхнему краю формы.

Если переменная GoingUp содержит значение False, структура выбора перемещает значок вниз. В этом случае объект области вывода изображений перемещается до тех пор, пока не будет достигнута граница формы. Высота формы может быть определена с помощью свойства Me.Size.Height. (Я вычитаю из высоты значение 75, так что значок не исчезает с формы за ее пределами.) Объект Me в этом примере представляет саму форму ( Form1 ).

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

Запуск программы Moving Icon

Чтобы запустить программу, щелкните на кнопке Start (Начать). Программа Moving Icon запустится на выполнение в среде разработки.

Примечание. Готовая программа Moving Icon лежит в папке c:\vbnet03sbs\Гл.16\moving icon.

Щелкните на кнопке Переместить вверх. Объект области вывода изображений переместится по диагонали вверх, как показано ниже.

Через некоторое время объект остановится около верхнего края формы.

Щелкните на кнопке Переместить вниз. Область вывода изображений переместится обратно вниз в нижний правый угол формы.

Снова щелкните несколько раз на обеих кнопках и обдумайте этот анимационный эффект. Заметьте, что вам не требуется ждать окончания анимационного эффекта пред тем, как нажать на следующую кнопку - процедура события Timer1_Tick использует переменную GoingUp для управления направлением перемещения немедленно, так что не имеет значения, когда область вывода изображений закончит движение в одном направлении. Подумайте об этом эффекте и представьте, как можно использовать аналогичную логику для создания игр на Visual Basic - увеличивать скорость анимации в соответствии с определенными условиями или "столкновениями" на экране, заставить анимированные объекты перемещаться в различных направлениях и т.п.

Когда закончите работать с программой, щелкните на кнопке Закрыть формы, чтобы остановить демонстрацию.

Расширение и сжатие объектов при выполнении программы

В дополнение к свойствам Top и Left, в Visual Basic есть свойства Height и Width для большинства объектов формы. Вы можете использовать эти свойства для того, чтобы расширять или сжимать объекты при выполнении программы.

Расширение области вывода изображений во время выполнения программы

В меню File (Файл) щелкните на команде Close Solution (Закрыть решение).

В папке c:\vbnet03sbs\Гл.16 создайте новый проект с именем My Zoom In.

Отобразите форму, щелкните в Области элементов на элементе управления PictureBox, а затем рядом с верхним левым углом формы нарисуйте небольшой объект области вывода изображений.

Установите для формы и области вывода изображений следующие свойства. Когда вы установите свойства для области вывода изображений, обратите внимание на текущие значения свойств Height и Width в свойстве Size. (Вы также можете установить их при разработке формы.)

Объект	Свойство	Установка
PictureBox1	Image	"c:\vbnet03sbs\Гл.16\earth.ico"
	SizeMode	StretchImage
Form1	Text	Приближение к Земле

Сделайте двойной щелчок мышью на объекте PictureBox1 формы. В Редакторе кода появится процедура события PictureBox1_Click.

Введите в процедуре события PictureBox1_Click следующий код программы:

PictureBox1.Height = PictureBox1.Height + 15
PictureBox1.Width = PictureBox1.Width + 15

Каждый раз, когда пользователь щелкает мышью на области вывода изображений, эти две строки увеличивают высоту и ширину значка Земли на 15 пикселей. Если вы проявите воображение, то наблюдая этот эффект вы можете представить, что вы подлетаете к Земле на космическом корабле.

Чтобы запустить программу, щелкните на кнопке Start (Начать).

Примечание. Готовая программа Zoom In лежит в папке c:\vbnet03sbs\Гл.16\zoom in.

В форме появляется значок с изображением Земли, показанный ниже.

Щелкните несколько раз на значке Земли, чтобы увеличить изображение. После 10 или 11 щелчков ваш экран должен выглядеть примерно так. 1

Когда вы приблизитесь достаточно, чтобы перейти на стационарную орбиту, щелкните на кнопке Закрыть для выхода из программы. Программа остановится, и вернется среда программирования.

Следующий шаг: изменение прозрачности формы

Интересуетесь одним из последних специальных эффектов? С помощью GDI+ вы можете сделать вещи, которые были сложными или невозможными в предыдущих версиях Visual Basic. Например, вы можете сделать форму практически прозрачной и видеть сквозь нее. Давайте предположим, что вы разрабатываете программу для показа фотографий, которая содержит отдельную форму, на которой расположены различные опции для манипулирования фотографиями. Вы можете сделать эту форму опций частично прозрачной, чтобы пользователь мог видеть всю область фотографии, при этом имея доступ к опциям.

В следующем упражнении показано, как изменять прозрачность формы. Это делается с помощью изменения значение свойства Opacity (Непрозрачность).

Установка свойства Opacity

В меню File (Файл) щелкните на команде Close Solution (Закрыть решение).

В папке c:\vbnet03sbs\Гл.16 создайте новый проект с именем My Transparent Form.

Отобразите форму, щелкните в Области элементов на элементе управления Button, а затем нарисуйте в форме две кнопки.

Установите для формы и двух ее кнопок следующие свойства:

Объект	Свойство	Установка
Button1	Text	Установить непрозрачность
Button2	Text	Восстановить
Form1	Text	Прозрачная форма

Сделайте двойной щелчок мышью на кнопке Установить непрозрачность формы.

Введите в процедуре события Button1_Click следующий код программы:

Me.Opacity = 0.75

Непрозрачность задается в процентах, так что ее диапазон имеет границы от 0 до 1. Эта строка устанавливает Opacity формы Form1 (Me) на 75 %.

Снова отобразите форму, сделайте двойной щелчок мышью на кнопке Восстановить, а затем введите в процедуре события Button2_Click следующий код программы:

Me.Opacity = 1

Эта строка восстанавливает непрозрачность на значение 100 процентов.

Чтобы запустить программу, щелкните на кнопке Start (Начать).

Примечание. Готовая программа Transparent Form лежит в папке c:\vbnet03sbs\Гл.16\transparent form.

Щелкните на кнопке Установить непрозрачность. Обратите внимание, что сквозь форму, показанную ниже, можно видеть.

Щелкните на кнопке Восстановить. Эффект прозрачности исчезнет.

Когда вы закончите тестировать эффект прозрачности, щелкните на кнопке Закрыть, чтобы выйти из программы. Программа остановится, и вернется среда программирования.

Краткая справка по лекции 16

Dim GraphicsFun As System.Drawing.Graphics
GraphicsFun = Me.CreateGraphics
Dim PenColor As New System.Drawing.Pen _
(System.Drawing.Color.Red)
GraphicsFun.DrawEllipse(PenColor, 10, _
120, 200, 160)

PictureBox1.Location = New Point(300, 200)