Урок 7. Рисование. Построение графика функции.
На этом занятии займемся рисованием.
На форме или графическом поле (PictureBox) можно рисовать различные графические примитивы с использование графических методов.
Элемент PictureBox предназначен для отображения рисунков и других графических объектов. Этот элемент управления также является элементом контейнером, поэтому его можно использовать для объединения других элементов. События элемента PictureBox обычно не обрабатываются, хотя при необходимости это можно сделать.
Положение PictureBox в форме задается свойством Align, которое определяет будет ли PictureBox закрепляться у одного из краев формы или сохранит положение, заданное разработчиком. Если элемент управления закрепляется у одного из краев формы, то его размер (ширина или высота) всегда устанавливается в соответствии с размером формы.
Свойство AutoSize определяет, будут ли автоматически изменяться размеры элемента управления для отображения рисунков различного размера.
Самое важное свойство PictureBox — Picture, которое содержит отображаемый графический объект. Это может быть растровое изображение (*.ВМР), пиктограмма (*.IСО), метафайл (*.WMF) или расширенный метафайл (*.EMF), а также GIF и JPEG-файлы.
При выполнении приложения для изменения свойства используется функция LoadPicture: Picture1.Picture = LoadPicture("C:\РИСУНКИ\РИСУНОК.BMP")
Сохранить изображение можно при помощи функции SavePicture: SavePicture Picture1.Picture, "РИСУНОК.BMP"
Методы PictureBox позволяют нарисовать точку, линию и окружность, а также вывести текст. Вот некоторые методы и свойства:
объект.Scale (x1, y1) - (x2, y2) |
Позволяет задать систему координат и масштаб для формы или графического поля |
объект.ScaleHeight [= значение] объект.ScaleWidth [= значение] |
Позволяют установить или прочитать внутренний размер объекта в установленных ScaleMode единицах. |
объект.ScaleMode [= значение] |
Если единица измерения твип кажется вам непривычной, то с помощью свойства ScaleMode можно установить и другую. Константы vbCentimeters, vbMillimeZters или vbPixels позволяют использовать знакомые вам единицы измерения. |
объект.Line[Step][(x1,1)]-[Step](x2,y2),[color],[B][F] |
Рисует отрезок прямой с заданными координатами точек начала и конца или прямоугольник с заданными координатами левого верхнего и правого нижнего углов. Если указано ключевое слово Step, то первая точка отсчитывается относительно текущей позиции вывода (свойства CurrentX, CurrentY), а вторая – относительно первой точки. Параметр color устанавливает цвет линии, можно применять RGB-функцию. Прямоугольник рисуется, если указано “B”, при указании “F” прямоугольник заливается цветом линии. |
объект.PSet [Step] (x, y), [color] |
Выводит на экран точку с заданными координатами заданного цвета. |
объект.Circle[Step](x,y),radius,[color,start,end,aspect] |
Метод рисует окружность, эллипс или дугу окружности или эллипса. Параметры start, end используются при рисовании дуг, устанавливают углы начала и конца рисования дуг, задаются в радианах. По умолчанию рисуется полная окружность или эллипс. Параметр aspect устанавливает степень сжатия эллипса: при значении 1 (по умолчанию) рисуется окружность. |
объект.Cls |
Метод очищает объект от нарисованного во время выполнения программы. |
объект.CurrentX [= x] объект.CurrentY [= y] |
Свойства CurrentX, CurrentY устанавливают или возвращают графические координаты текущего графического вывода. |
объект.Print [список_Выражений] |
Выражения, заданные аргументом список_Выражений, печатаются в объекте, начиная с позиции, указанной значениями свойств CurrentX и CurrentY. Список_Выражений содержит числовые или символьные выражения . При использовании нескольких выражений они разделяются пробелом, точкой с запятой (;), или запятой. Пробел или точка с запятой указывают, что следующее выражение следует выводить непосредственно за предыдущим. |
Создайте новый проект. Поместите на форму компонент графическом поле (PictureBox).
Объект |
Свойство |
Значение |
Форма |
имя |
frmGrafic |
Caption |
График |
|
Графическом поле (PictureBox) |
имя |
picGrafic |
Appearance |
0 - плоская |
|
AutoRedraw |
true |
|
Кнопка |
имя |
cmdPaint |
Caption |
Построить график |
По-умолчанию отсчет в системе координат ведется сверху вниз (Y) и слева направо (X). В качестве единицы измерения твип (twip). Твип — это экранно-независимая единица измерения, равная 1/20 точки принтера и гарантирующая независимость отображения элементов приложения от разрешения дисплея.
Иногда (например, в нашем случае) бывает не удобно использовать такую систему координат. Для того задать удобную систему координат и масштаб для формы или графического поля используется метод Scale.
Dim XMin, YMin, YMax, XMax As Integer Private Sub cmdPaint_Click() XMin = -10 YMin = -10 YMax = 10 XMax = 10 picGrafic.Scale (XMin, YMax)-(XMax, YMin) End Sub
Теперь нарисуем координатную сетку, оси координат, подписи к осям.
Private Sub cmdPaint_Click() XMin = -10 YMin = -10 YMax = 10 XMax = 10 picGrafic.Scale (XMin, YMax)-(XMax, YMin) picGrafic.Line (0, YMin)-(0, YMax), RGB(150, 150, 150) 'координатная сетка For x = XMin To XMax picGrafic.Line (x, YMax)-(x, YMin), RGB(240, 240, 240) Next x For y = YMin To YMax picGrafic.Line (XMin, y)-(XMax, y), RGB(240, 240, 240) Next y 'оси координат picGrafic.Line (0, YMin)-(0, YMax), RGB(150, 150, 150) picGrafic.Line (XMin, 0)-(XMax, 0), RGB(150, 150, 150) 'подпись осей picGrafic.ForeColor = RGB(150, 150, 150) For x = XMin To XMax picGrafic.CurrentX = x picGrafic.CurrentY = 0 picGrafic.Print x Next x For y = YMin To YMax picGrafic.CurrentX = 0 picGrafic.CurrentY = y picGrafic.Print y Next y picGrafic.ForeColor = RGB(100, 0, 0) picGrafic.CurrentX = XMax - picGrafic.TextWidth("X") picGrafic.CurrentY = 0 - picGrafic.TextHeight("X") picGrafic.Print "X" picGrafic.CurrentX = 0 - picGrafic.TextWidth("Y") picGrafic.CurrentY = YMax picGrafic.Print "Y" End Sub
Если сейчас протестировать программу, то мы увидим:
Теперь займемся построением графика. Для удобства изменения и обработки возможных ошибок вынесем расчет значения функции в отдельную функцию. Пусть, например, y=x2.
Private Function f(x) f = x * x End Function
Теперь перебирая все значения X высчитываем значение функции и строим её график:
Private Sub cmdPaint_Click() XMin = -10 YMin = -10 YMax = 10 XMax = 10 picGrafic.Scale (XMin, YMax)-(XMax, YMin) picGrafic.Line (0, YMin)-(0, YMax), RGB(150, 150, 150) 'координатная сетка For x = XMin To XMax picGrafic.Line (x, YMax)-(x, YMin), RGB(240, 240, 240) Next x For y = YMin To YMax picGrafic.Line (XMin, y)-(XMax, y), RGB(240, 240, 240) Next y 'оси координат picGrafic.Line (0, YMin)-(0, YMax), RGB(150, 150, 150) picGrafic.Line (XMin, 0)-(XMax, 0), RGB(150, 150, 150) 'подпись осей picGrafic.ForeColor = RGB(150, 150, 150) For x = XMin To XMax picGrafic.CurrentX = x picGrafic.CurrentY = 0 picGrafic.Print x Next x For y = YMin To YMax picGrafic.CurrentX = 0 picGrafic.CurrentY = y picGrafic.Print y Next y picGrafic.ForeColor = RGB(100, 0, 0) picGrafic.CurrentX = XMax - picGrafic.TextWidth("X") picGrafic.CurrentY = 0 - picGrafic.TextHeight("X") picGrafic.Print "X" picGrafic.CurrentX = 0 - picGrafic.TextWidth("Y") picGrafic.CurrentY = YMax picGrafic.Print "Y" For x = XMin To XMax Step 0.01 picGrafic.PSet (x, f(x)), RGB(0, 0, 200) Next x End Sub
Запускаем и строим график:
Добавим гибкость программе. Пусть пользователь сможет задавать масштаб системы координат.
Добавьте на форму рамку (Frame), 4 надписи (Label), 4 текстовых поля (TextBox), кнопку, и задайте им следующие свойства:
Объект |
Свойство |
Значение |
Frame |
Caption |
Масштаб |
Надпись 1 |
Caption |
Минимальное значение X: |
Надпись 2 |
Caption |
Минимальное значение Y: |
Надпись 3 |
Caption |
Максимальное значение X: |
Надпись 4 |
Caption |
Максимальное значение Y: |
Текстовое поле 1 |
имя |
txtMinX |
text |
"" (пустая строка) |
|
Текстовое поле 2 |
имя |
txtMinY |
text |
"" (пустая строка) |
|
Текстовое поле 3 |
имя |
txtMaxX |
text |
"" (пустая строка) |
|
Текстовое поле 4 |
имя |
txtMaxY |
text |
"" (пустая строка) |
|
Кнопка |
имя |
cmdNewScale |
Caption |
Применить |
Теперь немного исправим уже имеющийся код. Задание масштаба перенесем в отдельную процедуру. Так же добавим небольшой код для задания первоначальных значений txtMinX, txtMinY, txtMaxX, txtMaxY
Dim XMin, YMin, YMax, XMax As Integer Private Function f(x) f = x * x End Function Private Sub cmdPaint_Click() For x = XMin To XMax Step 0.01 picGrafic.PSet (x, f(x)), RGB(0, 0, 200) Next x End Sub Private Sub Form_Load() XMin = -10 YMin = -10 YMax = 10 XMax = 10 txtMinX = XMin txtMinY = YMin txtMaxX = XMax txtMaxY = YMax SetScale End Sub Private Sub SetScale() picGrafic.Scale (XMin, YMax)-(XMax, YMin) picGrafic.Line (0, YMin)-(0, YMax), RGB(150, 150, 150) 'координатная сетка For x = XMin To XMax picGrafic.Line (x, YMax)-(x, YMin), RGB(240, 240, 240) Next x For y = YMin To YMax picGrafic.Line (XMin, y)-(XMax, y), RGB(240, 240, 240) Next y 'оси координат picGrafic.Line (0, YMin)-(0, YMax), RGB(150, 150, 150) picGrafic.Line (XMin, 0)-(XMax, 0), RGB(150, 150, 150) 'подпись осей picGrafic.ForeColor = RGB(150, 150, 150) For x = XMin To XMax picGrafic.CurrentX = x picGrafic.CurrentY = 0 picGrafic.Print x Next x For y = YMin To YMax picGrafic.CurrentX = 0 picGrafic.CurrentY = y picGrafic.Print y Next y picGrafic.ForeColor = RGB(100, 0, 0) picGrafic.CurrentX = XMax - picGrafic.TextWidth("X") picGrafic.CurrentY = 0 - picGrafic.TextHeight("X") picGrafic.Print "X" picGrafic.CurrentX = 0 - picGrafic.TextWidth("Y") picGrafic.CurrentY = YMax picGrafic.Print "Y" End Sub
Создадим код обработки нажатия кнопки "Применить".
Private Sub cmdNewScale_Click() XMin = txtMinX YMin = txtMinY XMax = txtMaxX YMax = txtMaxY picGrafic.Cls SetScale End Sub
Готово! Теперь пользователь может изменять масштаб для получения наиболее красивого графика.
Если Вам не нравиться прерывистый вид графика, то Вы можете сделать небольшие изменения в коде программы. График рисовать будем не точками, а линиями.
Private Sub cmdPaint_Click() picGrafic.CurrentX = XMin picGrafic.CurrentY = f(XMin) For x = XMin To XMax Step 0.01 picGrafic.Line -(x, f(x)), RGB(0, 0, 200) Next x End Sub
Для того чтобы построить график функции измените функцию f(). Вот несколько результатов нашей работы:
Применение программы для графического решения уравнений.
Построение графиков можно использовать для приближенного решения уравнений. Пусть необходимо решить уравнение: x3-2x-3=0. Зададим программе построить график этой функции.
По графику определяем приближенное решение: x≈1.9.