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

1. Лекция 6Графика 1. Система координат 2. Растровая графика 3. Применение векторной графики с помощью графического ядра GDI+ 4. Графические объекты: Graphics, Point, Rectangle, Pen, Font, Brush 5. Преобразование координат 6. Установка цвета 7. Анимация Кафедра Прикладной математики М-703, тел. 362-79-62 К.т.н., профессор Глаголев Виктор Борисович, комн. Ж-405б, тел. 362-73-28 http://glagvik.narod2.ru/index.htm

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

3. Существенное различие между векторной и растровой графикой состоит в том, что векторная графика не привязана к разрешению экрана. При любом разрешении векторное изображение будет иметь один и тот же размер, заданный в его определении. Растровое же изображение при любом разрешении экрана будет содержать одно и то же количество пикселей. Следовательно, чем выше разрешение экрана, тем меньший размер будет иметь растровое изображение. VB.NET позволяет рисовать на объектах Form и PictureBox (графическое поле).

4. X=0 Y=0 X Форма или графическое поле Y Система координат Каждая форма и каждое графическое поле PictureBox обладают своей системой координат.

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

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

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

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

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

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

11. Можно также удалить изображение на управляющем элементе на этапе выполнения. Следующая инструкция удаляет рисунок с графического поля pbxMoney: IfNot (pbxMoney.ImageIsNothing) Then pbxMoney.Image.Dispose() pbxMoney.Image = Nothing End If Здесь метод Disposeосвобождает ресурсы, отведенные под изображение.

12. Векторная графикаГрафическое ядро GDI+ Набор классов, предназначенных для вывода текста и изображений, составляет интерфейс для создания графики – GDI (Graphics Design Interface). GDI+ – это его последняя версия. Классы GDI+ располагаются в модулях: System.Drawing, System.Drawing.Drawing2D, System.Drawing.Imaging и System.Drawing.Text.

13. Необходимые для использования в проекте модули следует импортировать в проект, поместив в начале кода проекта предложение: ImportsSystem.Drawing, _ System.Drawing.Drawing2D, _ System.Drawing.Imaging, _ System.Drawing.Text

14. Векторной графикой можно пользоваться для рисования на форме, а также на элементе управления PictureBox (поле рисунка). Перед началом рисования нужно создать поверхность, на которую будет выводиться изображение и инструмент рисования (перо или кисть). Поверхностью для рисования является объект Graphics. Выбрав соответствующий метод этого объекта, можно нарисовать нужную геометрическую фигуру.

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

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

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

18. Если рядом с подпрограммой Button1_Click поместить подпрограмму Form1_Paint, то она нарисуетпрямую линию красного цвета толщиной 2 пикселя. Событие Paintпроисходит, когда объект или его часть снова становится видимым после того , как он был перемещен, увеличен, заслонен другим окном или изменил размеры.

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

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

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

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

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

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

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

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

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

31. Объект Rectangle (прямоугольник) Это прямоугольник, который задается координатами левого верхнего угла, шириной и высотой: Dim r As Rectangle r = New Rectangle(X, Y, ширина, высота) Конкретно это может выглядеть так: r = New Rectangle(80, 95, 200, 100) Если этот прямоугольник потребуется нарисовать, то его нужно будет передать в качестве аргумента методу DrawRectangleили FillRectangle.

32. Объект Pen (перо) Это виртуальное перо, которым можно рисовать линию или контур фигуры на поверхности Graphics. При создании объекта Penзадается цвет и толщина линии в пикселях. Для создания нового объекта Penможно воспользоваться встроенным семейством Pens. Это перо рисует линию толщиной один пиксель. Цвет можно задать. Выражение Pens.Rotможно использовать везде, где требуется объект Pen для рисования линии красным пером толщиной один пиксель.

33. Некоторые свойства объект Pen : Color. Устанавливает цвет линии. StartCap/EndCap. Определяет значок в начале/конце отрезка линии. Можетприниматьзначениеизперечисления. DashCap. Определяет стиль окончания штрихов и пунктиров. DashStyle. Определяет стиль линии (сплошная, пунктирная, штриховая, штрих - пунктирная и т.д.).

34. Объект Brush (кисть) Это инструмент для заполнения цветом геометрических фигур. В чистом виде такого типа нет. Нельзя объявить переменную типа Brush. Вот какие типы можно использовать: Тип объекта Brush Чем заполняет фигуру SolidBrush Одним цветом HatchBrush Шаблоном из штрихов LinearGradientBrush Линейным градиентом PathGradientBrush Градиентом TextureBrush Растровым изображением

35. Для сплошного заполнения фигуры заданным цветом нужно создать объект SolidBrush: Dim b1 AsSolidBrush b1 = New SolidBrush(Color.Green) В аргументе SolidBrush с помощью объекта Color задается цвет кисти.

36. Чтобы заштриховать фигуру нужно создать другую кисть: Dim b2 As HatchBrush b2 = New HatchBrush( _ HatchStyle.DarkDownwardDiagonal, _ Color.Red, Color.Gray) Первый аргумент HatchBrush задает тип штриховки из перечисления. Второй аргумент – цвет штриховки. Третий аргумент – цвет фона.

37. Ниже показан код подпрограммы Form1_Paint, которая рисует на форме прямоугольник, заполненный сплошным цветом Magenta: PrivateSub Form1_Paint(ByValsender _ AsObject,ByVal eAs _ System.Windows.Forms.PaintEventArgs) _ HandlesMyBase.Paint DimG As Graphics G = Me.CreateGraphics DimB AsNewSolidBrush(Color.Magenta) G.FillRectangle(B, 50, 40, 100, 50) End Sub

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

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

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

43. Ниже показан код, который рисует на форме два эллипса. Эллипс задается прямоугольником, в который он вписан. Private Sub Form1_Paint(ByVal sender As Object, _ ByValeAsSystem.Windows.Forms.PaintEventArgs) _ HandlesMyBase.Paint Dim G As Graphics G = Me.CreateGraphics Dim b AsSolidBrush b = NewSolidBrush(Color.Aqua)

44. G.FillEllipse(b, 10, 40, 100, 50) Dim p AsNew Pen(Color.Black, 3) G.DrawEllipse(p, 10, 40, 100, 50) G.DrawEllipse(Pens.Black, 120, 10, 50, 100) EndSub

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

47. В компьютерной графике используются три типа преобразования координат: масштабирование, перенос и поворот. При масштабировании изменяется размер изображения, но не его форма. При переносе изображение смещается на заданное расстояние по оси Xи по оси Y. При повороте изображение поворачивается по часовой стрелке относительно начала координат на заданный угол, выраженный в градусах.

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

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

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