Графика и анимация в Visual Basic 6. 0. Лекция 5
Принципы генерации графических изображений l l l 2 Изображение на экране дисплея складывается из множества отдельных точек, которые называются пикселями (pixel - образуется аббревиатурой английских слов picture elements - элементы картинки). Изображение на экране является образом видеопамяти - специальный блок памяти, с которым работает видеоконтроллер. Количество точек на экране и информация по каждой из точек определяют режим работы дисплея и требуемый объем видеопамяти. В монохромных дисплеях 1 пиксель требует 1 бита видеопамяти (бит содержит 1 - соответствующая ему точка экрана светится, бит содержит 0 - не светится). В цветных дисплеях каждый пиксель кодируется несколькими битами, определяющими цвет. В зависимости от видеоконтроллера на один пиксель требуется от 4 до 32 бит, определяющих возможность передачи оттенков цветов (например, 256 или более цветов), и объем видеопамяти достигает 4 Мб. Любой цвет создается смешением красного, зеленого и синего цветов различной интенсивности.
Цвет в VB l l l 3 Для задания цвета графических объектов в Visual Basic используется специальная функция RGB, название которой образовано по первым буквам английских слов Red (красный), Green (зеленый) и Blue (голубой). Функция использует три целочисленных параметра (аргумента), которые могут принимать значения от 0 до 255. Первый параметр определяет интенсивность красного цвета, второй - интенсивность зеленого, третий - интенсивность голубого. При значении параметра 0 - соответствующий цвет полностью отсутствует, 255 - максимальная интенсивность. Например, RGB(0, 255, 0) - определяют зеленый цвет, RGB(255, 255) – белый цвет. Функция RGB позволяет задать 16 миллионов цветов.
Использование графики в VB 3 основных способа использования графики: l Загрузка готовых изображений. l Использование элементов управления Line и Shape (рисование на этапе проектирования формы). l Использование специальных графических методов формы и некоторых элементов управления (Picture. Box). 4
Загрузка готовых изображений Придать объекту картинку можно, установив его свойство Picture. – – В режиме проектирования – вручную, В режиме работы – использование функции Load. Picture. Пример: Form 1. Picture = Load. Picture(“C: TempSS. bmp”) Удалить картинку: В режиме проектирования – стереть значение свойства Picture, – В режиме работы – используем оператор Form 1. Picture = Load. Picture(“”) – VB поддерживает графические файлы следующих типов: . bmp, . Dib, . Ico, . Cur, . Wmf, . Emf, . Gif, . Jpg, . Jpeg 5
Использование элементов управления Line и Shape Элемент управления Line – это линия, имеющая по умолчанию толщину 1. Для изменения вида линии используется свойство Border. Style. l l l 0 – невидимая, 1 – сплошная, 2 – штриховая, 3 – пунктирная, 4 – штрихпунктирная и т. д. Толщина линий задается в свойстве Boder. Width. 6
Использование элементов управления Line и Shape Для создания рамок различной формы используется элемент управления Shape (контейнер для объединяемых элементов управления). Форма рамки задается в свойстве Shape: 0 – прямоугольник 1 - квадрат 2 – эллипс 3 – круг 4 – прямоугольник с закругленными углами 5 – квадрат с закругленными углами 7
Использование специальных графических методов l Для создания изображений используются графические методы: – – – l l 8 Line (рисование линий и прямоугольников), Circle (рисование окружностей, дуг, секторов и эллипсов) Pset (рисование отдельных точек). Для удаления нарисованного изображения используется метод. Cls Перечисленные методы имеются у элемента «Форма» и элемента управления «Picture Box»
Область рисования изображений Изображение рисуется, как правило, на форме или на специализированном элементе управления Picture. Box. Для формы вызов методов рисования допускается непосредственно, без указания имени формы: Form 1. line (1, -3)-(3, -6) то же самое, что line (1, -3)-(3, -6) При выводе изображения на элемент Picture Box необходимо явно указать его имя Picture 1. line (1, -3)-(3, -6) 9
Система координат области рисования l l 10 Для задания единиц измерения координат и размеров объектов на форме используется свойство Scale. Mode (сантиметры, дюймы и т. д. ). При значении Scale. Mode равном 0 можно задать собственную систему единиц.
Система координат области рисования По умолчанию начало координат (0, 0) находится в верхнем левом углу формы, значение по X увеличивается вправо, значение по Y - вниз. Для задания стандартной системы координат с точкой (0, 0) в середине экрана используются специальные свойства, определяющие масштаб объекта: l Scale. Left и Scale. Top – определяют координаты верхнего левого угла объекта. l Scale. Width и Scale. Height – единицы измерения ширины и высоты области рисования. 0, 0 x Y 11
Система координат области рисования Свойству Scale. Top присваивается некоторое положительное значение, а свойству Scale. Height отрицательное значение, которые определяют диапазон значений шкалы Y. Например, Scale. Top = 50, Scale. Height = -100, шкала Y имеет диапазон от -50 до +50. Аналогично свойству Scale. Left присваивается некоторое отрицательное значение, а свойству Scale. Width положительное значение, которые определяют диапазон значений шкалы X. Например, Scale. Left = -20, Scale. Width = 40, шкала X имеет диапазон от -20 до +20. Заданная таким образом система координат приводится на рисунке. 12
Система координат SCALE()-() l l Для задания системы координат, в программе так же может применяться оператор объект. Scale(x 1, y 1)-(x 2, y 2). Параметрами являются координаты верхнего левого угла формы в создаваемой системе координат (x 1, y 1) и координаты правого нижнего угла формы (x 2, y 2) соответственно. То есть, для создания системы координат, приведенной на рисунке, необходимо использовать метод Form 1. Scale(-20, 50)-(20, -50) 13
![Метод рисования Line Синтаксис: object. Line [(x 1, y 1) ] - (x 2,](https://present5.com/presentation/4454775_37455541/image-14.jpg "Метод рисования Line Синтаксис: object. Line [(x 1, y 1) ] - (x 2,")
Метод рисования Line Синтаксис: object. Line [(x 1, y 1) ] - (x 2, y 2), [color], [B][F] (x 1, y 1) - координаты начальной точки (x 2, y 2) - координаты конечной точки Color – код цвета рисования B – параметр, указывающий необходимость рисования прямоугольника. Прямоугольник » натягивается» на отрезок идущий из правого верхнего в левый нижний угол. F – параметр, указывающий необходимость закрашивания Пример: Line (-10, 0)-(10, 0) 'ось X Line (0, -10)-(0, 10) 'ось Y Line (-8. 5, 9. 2)-(9. 01, -2. 1) 'прямая линия Line (-5, 2)-(2, 1), , B 'не закрашен. прямоугольник Line (-8. 5, 3. 5)-(-5. 5, -4), , BF 'закрашен. прямоугольник 14
Метод установки координат текущей точки l l l l 15 Текущей точкой называется точка, где располагается воображаемое перо после рисования фигуры. Первоначально перо располагается в начале координат. Для перемещения текущей точки в точку с заданным координатами без рисования линии используются свойства Picture 1. Current. X Picture 1. Current. Y Для рисования отрезка начиная с текущей точки до точки с координатами (x 1; y 1) метод line будет иметь вид: Picture 1. Line - (x 1, y 1)
Метод рисования Circle l l l l 16 Синтаксис: объект. Circle (X, Y) , Radius, [Color, Start, End, Aspect] Метод Circle предназначен для рисования окружностей, эллипсов, секторов и дуг. В методе Circle в скобках задаются координаты Х и У центра. После скобок задается радиус. Используя дополнительные параметры можно рисовать дуги, сектора и эллипсы. Start, End – позиции начала и конца дуги в радианах. Aspect – «коэффициент эллиптичности» . Пример: Circle (1, 2), 5 'окружность Circle (1, 2), 5 , rgb(255, 0), 0, 2 ‘сектор
Метод рисования точки Pset Синтаксис: объект. Pset(X, Y, Color) Метод Pset предназначен для рисования точек. Свойство Draw. Width определяет толщину рисования точек или линий. Пример: Pset (1, 2), rgb(0, 0, 0) 17
Определение базового цвета рисования l Для задания основного цвета рисования фигур используется свойство Fore. Color поля рисования. l Form 1. Fore. Color = &H 80000012& l Picturebox 1. Fore. Color = RGB(0, 0, 0) &H 80000012& - код цвета 18
Определение цвета фона и цвета заливки фигуры Для задания цвета фона используется свойство Back. Color поля рисования. Form 1. Back. Color = RGB(128, 128) Picturebox 1. Back. Color = RGB(128, 128) Для задания цвета заливки используется свойство Fill. Color поля рисования. Form 1. Fill. Color Picturebox 1. Fill. Color 19
Определение толщины линий и рисунка закраски Для задания толщины линии используется свойство Draw. Width поля рисования. Form 1. Draw. Width =1 Picturebox 1. Draw. Width =3 Для задания рисунка используется свойство Fill. Style поля рисования. Form 1. Fill. Style Picturebox 1. Fill. Style 20
Пример использования графических методов Private Sub Form_Paint() Scale (-10, 10)-(10, -10) 'установка масштаба Line (-10, 0)-(10, 0) 'ось X Line (0, -10)-(0, 10) 'ось Y Line (-8. 5, 9. 2)-(9. 01, -2. 1) 'прямая линия Line (-5, 2)-(2, 1), , B 'не закрашен. прямоугольник Line (-8. 5, 3. 5)-(-5. 5, -4), , BF 'закрашен. прямоугольник Circle (1, 2), 5 'окружность Draw. Width = 10 'изменение ширины линии или размера точки PSet (7, 6. 5) 'точка End Sub 21
Построение графиков функций l l 22 График функции на заданном отрезке изменения аргумента может быть построен приближенно путем замены настоящего графика функции ломаной линией приблизительно соответствующей графику функции. Ломаная линия соединяет ряд точек (X; Y) причем координаты, точек рассчитываются путем изменения с заданным шагом значений аргумента функции (ось Х) и вычисления соответствующих им значений функции Y = F (X).
Построение графиков функций l l 23 Рисование отрезков ломаной линии в программе возможно либо непосредственно на форме, где расположены элементы управления, или внутри элемента управления Picture. Box. Предварительно, перед рисованием графика необходимо задать систему координат для элемента Picture. Box. Система координат нужна для указания расположения точек и линий графика внутри области построения Picture. Box. Система координат должна быть такой, что бы внутри элемента управления Picture. Box целиком поместился график функции и оси координат.
Построение графиков функций l Ymax l Ymin А В l 24 Размеры оси Х ( оси значений аргумента функции ) известны из условия задачи: требуется построить график функции на определенном отрезке аргумента от А до В. X [a, b] Размеры вертикальной оси системы координат определяются максимумом функции и заранее неизвестны, их необходимо вычислить в программе перед построением графика. Y [min, max]
Размеры области построения l l 25 Максимальное значение координаты вертикальной оси Y должно быть равно максимальному значению функции, которое она принимает на отрезке построения графика (обозначим его max. Fx), минимальное значение оси Y должно быть равно min. Fx Максимальное значение на оси X должно быть равно максимальному значению аргумента (правый край области построения B) , минимальное минимальному значению аргумента ( левый край области построения A).
Алгоритм определения максимума(минимума) функции l 26 «метод последовательного перебора» .
Алгоритм определения максимума(минимума) функции Начало Если шаг приращения аргумента не укладывается целое число раз на отрезке [a, b] то точка b останется не проверенной (шаг задавать кратным). Выбрать координаты начальной точки (max. X; max. Fx) max. Fx=F(max. X) X=a Y=F(X) Да Y>max. Fx=Y X=X+step; Y=F(X) Нет X>b Да 27 Конец
Метод перебора. Пример программного кода Dim x As double, max. F As double, min. F As double max. F= f(-10) min. F = max. F For x= -10 to 10 Step 0. 01 If max. F< f(x) Then max. F=f(x) Else min. F=f(x) End If Next ……………………………. . Function f(x As double) As double. . . f=. . . End Function 28
Масштабирование графика функции, Рисование осей координат необходимо для визуальной оценки расположения графика по отношению к осям координат. Оси координат вычерчиваем, утолщено и другим цветом для отличия от линий графика. 'устанавливаем толщину линии 6 Picture 1. Draw. Width = 6 ' толщина точки равна 6 ' рисуем ось X Picture 1. Line (a, 0)-(b, 0), RGB(0, 255, 0) ' рисуем ось Y Picture 1. Line (0, min. Fx)-(n, max. Fx), RGB(0, 255, 0) Для задания цвета линии используем функцию RGB. Интенсивность красной составляющей цвета 0, интенсивность зеленой 255 (т. е. максимум), интенсивность синей – 0. Получаем ярко зеленый цвет. 29
Рисование ломаной линии графика l 1. 2. 3. 4. 5. 30 Для рисования ломаной линии изображающей график функции необходимо выбрать толщину линии и установить начальную точку, с которой будет выполняться рисование. Координаты начальной точки будут (a, f(a)), т. к. график функции строится с начала отрезка 'Устанавливаем толщину линии и ‘координаты начала рисования ломаной линии Picture 1. Draw. Width = 1 ' толщина точки равна 1 Picture 1. Current. X = a ' задание координат пера Picture 1. Current. Y = F(a) ' задание координат пера
Рисование ломаной линии графика Вычисление координат точек ломаной линии соединяемых отрезками производится последовательно в цикле. Для рисования отрезков используется метод Line без указания координат начальной точки. В этом случае линия будет продолжаться с места, где было закончено предыдущее рисование. Соединяемые точки выделяются на графике утолщениями. Для рисования точек графика используется метод Pset. ' рисование ломаной линии графика 1. For x = a To b 2. Picture 1. Draw. Width = 1 ' толщина точки 3. Picture 1. Line -(x, F(x)) ' рисование графика 4. Picture 1. Draw. Width = 5 ' толщина точки 5. ' рисование точек построения графика 6. Picture 1. PSet (x, F(x)) 7. Next x 31
Анимация l l 32 Основным принципом создания мультипликации или анимации является быстрая перерисовка слабо отличающихся изображений, так что бы человеческий глаз воспринимал их как непрерывное движение фигуры. Если в последовательные моменты времени изменять координаты графических объектов на экране, то объекты будут “перемещаться” по экрану
Элемент управления Timer l l l l 33 В VB существует элемент управления «Таймер» , который обрабатывает данные системных часов. Его можно использовать для выполнения определенных действий через заданные промежутки времени. Например, для изменения координат графических объектов через регулярные промежутки времени Свойство Interval таймера задает периодичность возникновения последовательности событий. Значение свойства Interval задается в миллисекундах (мс) и может принимать значения от 0 до 65535 и теоретически способно заставить систему генерировать события со скоростью от 1000 в секунду до 1 в минуту. Интервал, равный 0 (по умолчанию), отключает таймер. Необходимо учитывать, что технически для компьютера имеется порог чувствительности разрешения таймера (порядка 18 событий в секунду или 56 мс). Событие Timer объекта-таймера наступает через каждый, установленный в свойстве Interval промежуток времени. В процедуре обработки данного события необходимо определить действия, выполняемые с заданной частотой.
Движение окружности 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 34 Option Explicit Dim I As Integer, Dx as single, Dy as single Private Sub Form_Load() I=1 Dx = 5 'смещение по оси Х Dy = 5 'смещение по оси Y Scale (0, 100)-(100, 0) 'оси координат (0, 0)-в нижнем левом углу End Sub Private Sub Timer 1_Timer() Beep 'подача звукового сигнала Circle (5 + Dx * I, 5 + Dy * I), 5 'окружность I = I + 1 'переход к к рисованию следующей окружности End Sub
