Лекция 6Графика

Кафедра Прикладной математики

М-703, тел. 362-79-62К.т.н., профессор Глаголев

Виктор Борисович,комн. Ж-405б, тел. 362-73-28

http://glagvik.narod2.ru/index.htm

1. Система координат

2. Растровая графика

3. Применение векторной графики с помощью графического ядра GDI+

4. Графические объекты: Graphics, Point, Rectangle, Pen, Font, Brush

5. Преобразование координат 6. Установка цвета 7. Анимация

ГрафикаВсе графические изображения

подразделяются на векторные и растровые.В векторных изображениях положение

каждой точки (пикселя), из которых они состоят, вычисляются аналитически на основе математического определения геометрической фигуры (например, прямой или эллипса).

Растровое изображение тоже состоит из точек. Но в нем координаты каждая точки задаются отдельно.

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

VB.NET позволяет рисовать на объектах Form и PictureBox (графическое поле).

Система координат

Каждая форма и каждое графическое поле PictureBox обладают своей системой координат.

X

Y

X=0Y=0

Форма или графическое поле

По умолчанию начало отсчета находится в левом верхнем углу формы. Ось Х направлена вправо, ось Y – вниз.

Система координат по умолчанию состоит из строк и столбцов графических элементов – пикселей. Пиксель – это минимально возможная по размерам точка, размеры которой зависят от установленной в операционной системе разрешающей способности экрана. Нумерация строк и столбцов пикселей начинается с 0. Точка с координатами (9, 4) означает пиксель, находящийся на пересечении столбца № 9 пикселей со строкой № 4 пикселей.

Пиксель (0, 0)

Пиксель (9, 4)

Растровая графика

Можно загрузить растровое изображение практически на любой управляющий элемент. Это проще всего сделать на этапе разработки (в состоянии проекта design). Для этого следует выделить этот объект и в окне свойств найти свойство Image. Затем в поле значения этого свойства нужно щелкнуть на кнопке с многоточием. В ответ откроется диалоговое окно Open, в котором следует выбрать файл, содержащий изображение.

Для установления соответствия между размерами изображения и размерами управляющего элемента следует воспользоваться свойством SizeMode последнего (если управляющий элемент имеет такое свойство). Это свойство может принимать значения, перечисленные на следующем слайде.

Normal – размер рисунка не изменяется;CenterImage – размещение рисунка по

центру управляющего элемента (имеет смысл, если рисунок меньше управляющего элемента);StretchImage – размер рисунка будет

подогнан под размер управляющего элемента;AutoSize – размер управляющего

элемента будет подогнан по размеру рисунка.

Можно также загрузить изображение на управляющий элемент не только на этапе разработки, но и на этапе выполнения. Следующая инструкция размещает на графическом поле pbxMoney рисунок, хранящийся в файле dollars.gif:

Можно также удалить изображение на управляющем элементе на этапе выполнения. Следующая инструкция удаляет рисунок с графического поля pbxMoney:

If Not (pbxMoney.Image Is Nothing) Then pbxMoney.Image.Dispose() pbxMoney.Image = NothingEnd If

Здесь метод Dispose освобождает ресурсы, отведенные под изображение.

Векторная графикаГрафическое ядро GDI+

Набор классов, предназначенных для вывода текста и изображений, составляет интерфейс для создания графики – GDI (Graphics Design Interface).

GDI+ – это его последняя версия.Классы GDI+ располагаются в модулях:

System.Drawing, System.Drawing.Drawing2D, System.Drawing.Imaging и System.Drawing.Text.

Необходимые для использования в проекте модули следует импортировать в проект, поместив в начале кода проекта предложение:

Imports System.Drawing, _ System.Drawing.Drawing2D, _System.Drawing.Imaging, _System.Drawing.Text

Векторной графикой можно пользоваться для рисования на форме, а также на элементе управления PictureBox (поле рисунка).

Перед началом рисования нужно создать поверхность, на которую будет выводиться изображение и инструмент рисования (перо или кисть).

Поверхностью для рисования является объект Graphics.

Выбрав соответствующий метод этого объекта, можно нарисовать нужную геометрическую фигуру.

Далее выбирается инструмент.Инструментом может быть объект Pen

(перо) или объект Brush (кисть).Перо предназначено для рисования линий

или контуров. Главными характеристиками объекта Pen являются цвет и толщина линии.

Кистью можно нарисовать заполненный контур.

Главными характеристиками объекта Brush являются цвет и образец заполнения фигуры. Кисть может быть градиентной, меняющей цвет по мере своего движения.

Здесь на уровне формы объявлена переменная G типа Graphics и переменная P1 типа Pen. Эти две переменные действуют во всех процедурах формы.

Подпрограмма Button1_Click рисует горизонтальную прямую линию синего цвета толщиной 2 пикселя. Первая инструкция этой подпрограммы создает на текущей форме (об этом говорит слово Me) объект G (поверхность) для вывода изображения.

Если рядом с подпрограммой Button1_Click поместить подпрограмму Form1_Paint, то она нарисует прямую линию красного цвета толщиной 2 пикселя.

Событие Paint происходит , когда объект или его часть снова становится видимым после того , как он был перемещен, увеличен, заслонен другим окном или изменил размеры.

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

Чтобы этого не происходило, следует помешать графический код в подпрограмму события Paint формы.

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

Базовые методы класса Graphics содержаться в следующей таблице:

Фигура Метод Описание

Линия DrawLine Прямая линия, построенная по двум точкам

Прямоугольник DrawRectangle Прямоугольник с четырьмя точками

Дуга DrawArc Часть эллипса с двумя точками

Окружность или эллипс

DrawEllipse Округлая фигура, вписанная в прямоугольник

Фигура Метод Описание

Полигон, многоугольник

DrawPoligon Сложная фигура с произвольным числом вершин и сторон, хранящихся в массиве

Кривая DrawCurve Изогнутая линия, проходящая через произвольное количество точек, хранящихся в массиве

Кривые (сплайны) Безье

DrawBezier Кривая, построенная с помощью четырех точек

Существуют также методы, которые рисуют фигуры, заполненные каким либо цветом. Имена этих методов вместо префикса «Draw» имеют префикс «Fill», например FillEllipse.

Объект Graphics

Для создания объекта, связанного с конкретным элементом управления нужно вызвать метод CreateGraphics этого элемента управления.

Например, для рисования на элементе управления PictureBox1 (графическое поле) сначала следует объявить объектную переменную типа Graphics и инициализировать ее объектом, возвращаемым методом CreateGraphics элемента управления PictureBox1:

Dim G As GraphicsG = PictureBox1.CreateGraphics

Если же нужно рисовать на форме, необходимо создать объект Graphics с помощью метода CreateGraphics этой формы:

Dim G As GraphicsG = Me.CreateGraphics

У объекта Graphics имеется несколько базовых свойств.

Свойство PageUnin определяет единицу измерения, которая будет использоваться для выражения координат в объекте Graphics.

Объект Point (точка) Это точка на рабочей поверхности,

определяемая парой координат (x, y). Вот как создается новый объект:Dim P As PointP = New Point(65, 80)В качестве аргументов X и Y задаются

целочисленные значения.Этого же результата можно достичь иначе:Dim P As PointP.X = 65P.Y = 80

Объект Rectangle (прямоугольник) Это прямоугольник, который задается

координатами левого верхнего угла, шириной и высотой:Dim r As Rectangler = New Rectangle(X, Y, ширина,

высота)Конкретно это может выглядеть так:r = New Rectangle(80, 95, 200, 100)Если этот прямоугольник потребуется

нарисовать, то его нужно будет передать в качестве аргумента методу DrawRectangle или FillRectangle.

Объект Pen (перо) Это виртуальное перо, которым можно

рисовать линию или контур фигуры на поверхности Graphics. При создании объекта Pen задается цвет и толщина линии в пикселях.

Для создания нового объекта Pen можно воспользоваться встроенным семейством Pens. Это перо рисует линию толщиной один пиксель. Цвет можно задать. Выражение Pens.Rot можно использовать везде, где требуется объект Pen для рисования линии красным пером толщиной один пиксель.

Некоторые свойства объект Pen :Color. Устанавливает цвет линии.StartCap/EndCap. Определяет значок в

начале/конце отрезка линии. Может принимать значение из перечисления. DashCap. Определяет стиль окончания

штрихов и пунктиров. DashStyle. Определяет стиль линии

(сплошная, пунктирная, штриховая, штрих - пунктирная и т.д.).

Объект Brush (кисть) Это инструмент для заполнения цветом геометрических фигур. В чистом виде такого типа нет. Нельзя объявить переменную типа Brush. Вот какие типы можно использовать:Тип объекта Brush Чем заполняет

фигуруSolidBrush Одним цветомHatchBrush Шаблоном из штриховLinearGradientBrush Линейным градиентомPathGradientBrush ГрадиентомTextureBrush Растровым

изображением

Для сплошного заполнения фигуры заданным цветом нужно создать объект SolidBrush:

Dim b1 As SolidBrushb1 = New SolidBrush(Color.Green)

В аргументе SolidBrush с помощью объекта Color задается цвет кисти.

Чтобы заштриховать фигуру нужно создать другую кисть:

Dim b2 As HatchBrushb2 = New HatchBrush( _HatchStyle.DarkDownwardDiagonal, _ Color.Red, Color.Gray)

Первый аргумент HatchBrush задает тип штриховки из перечисления.Второй аргумент – цвет штриховки.Третий аргумент – цвет фона.

Ниже показан код подпрограммы Form1_Paint, которая рисует на форме прямоугольник, заполненный сплошным цветом Magenta:

Private Sub Form1_Paint(ByVal sender _As Object, ByVal e As _System.Windows.Forms.PaintEventArgs) _Handles MyBase.Paint Dim G As Graphics G = Me.CreateGraphics Dim B As New SolidBrush(Color.Magenta) G.FillRectangle(B, 50, 40, 100, 50)End Sub

Объект Font (шрифт)

Это шрифт, используемый при выводе строки с помощью метода DrawString. Например, чтобы определить шрифт нужно создать новый объект Font, выбрать тип шрифта, размер и стиль. Этот объект затем нужно передать в качестве аргумента методу DrawString.

Подпрограмма, код которой содержится ниже, напечатает на форме строку «Выводимая строка», а также нарисует прямую линию:

Аргументы метода DrawString следуют в следующем порядке: строка, шрифт, кисть, координаты X и Y верхнего левого угла поля выводимой строки.

Ниже показан код, который рисует на форме два эллипса. Эллипс задается прямоугольником, в который он вписан.Private Sub Form1_Paint(ByVal sender As Object, _ByVal e As System.Windows.Forms.PaintEventArgs) _Handles MyBase.Paint Dim G As Graphics G = Me.CreateGraphics Dim b As SolidBrush b = New SolidBrush(Color.Aqua)

G.FillEllipse(b, 10, 40, 100, 50) Dim p As New Pen(Color.Black, 3) G.DrawEllipse(p, 10, 40, 100, 50) G.DrawEllipse(Pens.Black, 120, 10, 50, 100)End Sub

Преобразование координатПо умолчанию единицей измерения

является пиксель. При работе с физическими графическими элементами оказывается удобнее, если единицей измерения является миллиметр или дюйм. Выбранные единицы измерения определяются значением свойства PageUnit объекта Graphics. Если задать этому свойству значение GraphicsUnit.Millimeter, то единицей измерения станет миллиметр.

В компьютерной графике используются три типа преобразования координат: масштабирование, перенос и поворот.

При масштабировании изменяется размер изображения, но не его форма.

При переносе изображение смещается на заданное расстояние по оси X и по оси Y.

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

Для выполнения преобразований координат предусмотрены три метода объекта Graphics: ScaleTransform, TranslateTransform, RotateTransform.

Метод ScaleTransform имеет два аргумента – это коэффициенты масштабирования по горизонтали и по вертикали:Graphics.ScaleTransform(Sx, Sy)Если коэффициент меньше единицы,

изображение сжимается, если же он больше единицы – то изображение растягивается.

Метод TranslateTransform тоже имеет два аргумента – смещение по горизонтали и по вертикали:Graphics.TranslateTransform(Tx, Ty)Значения аргументов Tx и Ty выражаются в

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

Метод RotateTransform имеет один аргумент – угол поворота изображения в градусах. Поворот выполняется по часовой стрелке (если значение аргумента положительно) вокруг начала координат:Graphics.RotateTransform(r)

Если после вывода изображения требуется вывести новое изображение с другим преобразованием, то следует сбросить заданное ранее преобразование, вызвав метод ResetTransform объекта Graphics.

Установка цвета

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

Любой цвет создается смешением трех базовых цветов различной интенсивности: красного, зеленого и синего.

Прозрачность R G B

Три байта задают интенсивность базовых цветов: Red (красный), Green (зеленый) и Blue (синий). Интенсивность каждого базового цвета может принимать значение от 0 до 255. При значении интенсивности 0 – соответствующий цвет полностью отсутствует, 255 – максимальная интенсивность.

Четвертый байт задает степень прозрачности цвета от 0 (абсолютно прозрачный цвет) до 255 (абсолютно непрозрачный цвет).

В полной палитре всех возможных цветов их 16 миллионов.

Для определения цвета объект Color располагает методом FromARGB, который может принимать либо три аргумента для задания интенсивности базовых цветов, либо четыре аргумента, первый из которых задает степень прозрачности, а остальные три – интенсивность базовых цветов:Color.FromArgb(Red, Green, Blue)

Пример

Dim C1, C2 As Color C1 = Color.FromArgb(255, 255, 0) C2 = Color.FromArgb(192, 255, 255, 0)

Здесь объявлены две переменные типа Color. Переменная C1 задает непрозрачный чистый желтый цвет. Переменная C2 задает желтый цвет, прозрачный на 25 процентов. Полупрозрачные цвета позволяют получать на изображении «водяные знаки», а также создавать эффект объемного текста.

Добавление анимации Анимация – это создание эффекта движения

объектов, изменение их вида, размера или цвета.

Для перемещения объекта по форме или по объекту PictureBox в новое положение можно воспользоваться свойством Location (а также свойствами Left и Top):объект.Location = New Point(X, Y)где объект – это имя перемещаемого

объекта, X и Y – координаты левого верхнего угла нового положения перемещаемого объекта.

Например, инструкция:Button1.Location = New Point(0,

0)переместит кнопку Button1 в левый

верхний угол формы независимо от того, где она на форме находилась до выполнения этой инструкции. Это разовое перемещение.

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

Для этой цели можно применить управляющий элемент таймер, который предназначен для генерации c заданным интервалом события Tick.

Нам потребуются свойства таймера:Enabled – включен (True) / выключен (False).

По умолчанию значение этого свойства равно False (выключен).Interval – интервал генерации событий Tick в

миллисекундах.Рассмотрим в качестве примера решение задачи

движения надписи от одного края формы до другого ее края и обратно. Поместим на форме надпись Label1 и таймер Timer1. На следующем слайде показана надпись, помещенная на форме.

Label1x z

Label1.Width

Form1.Width

Очевидны следующие равенства:x = Label1.Xz = Form1.Width – x – Label1.WidthНаправление движения надписи необходимо изменять на противоположное при выполнении следующих условий:x <= 0 при движении надписи налево, z <=0 при движении надписи направо.

На следующих двух слайдах показан код, который решает поставленную задачу. После запуска проекта надпись начинает двигаться от левого края формы до правого края и обратно. Знак переменной d определяет направление движения направо (при d > 0) или налево (при d < 0).

Переменная d задает в пикселях величину перемещения надписи по оси x при каждом наступлении события Tick.

В подпрограмме Form1_Load задаются значения нужных свойств таймера и надписи:Событие Tick будет происходить через каждые 20 мсек., что соответствует частоте 50 гц.Таймер включен.На надписи выведен текст «Проверка движения». Границы надписи не будут видны (BorderStyle.None).

Подпрограмма Timer1_Tick при каждом наступлении события Tick проверяет необходимость изменения направления движения надписи и при необходимости изменяет знак переменной d. Затем выполняется перемещение надписи по оси x на величину d.

Следующий пример показывает, как для привлечения внимания можно изменять текст, цвет фона, и размер объекта.В этом примере форма содержит кнопку Button1, а также таймер Timer1. Эта кнопка имеет белый фон и на ней шрифтом черного света написано слово «Стоп». Это ее нормальное состояние.

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

В состоянии тревоги фон кнопки имеет красный цвет, ее высота вдвое увеличена и на ней написан текст: «Срочно стоп!».

При следующем щелчке на форме, ее состояние восстанавливается.

Код проекта включает в свой состав объявление на уровне формы переменной b, а также три подпрограммы.

Подпрограмма Form1_Load при загрузке формы задает свойству Interval таймера значение 1000 мсек. Событие Tick таймера будет происходить через одну секунду.

Подпрограмма Form1_Click при щелчке на форме включает таймер, если он выключен, или выключает его, если он включен.

Подпрограмма Timer1_Tick при наступлении события Tick изменяет состояние кнопки Button1 с нормального на тревожное (если переменная b равна True) или обратно – с тревожного на нормальное, а также изменяет значение переменной b.