§ 31. Графіка у vb

У цьому параграфі розглянемо створення графічних образів у се­редовищі VB. Цей процес у VB достатньо автоматизований. На жаль, у VBA аналогічні графічні побудови реалізувати складніше.

1. Рисування емблеми. Складемо код для виведення графічних зображень на форму.

Задача 1. У верхній лівій частині форми нарисувати квадрат зі стороною 120 пікселів синім кольором. Замалювати квадрат червоним кольором. У квадрат вписати жовте коло. Замалювати круг синім кольором. У крузі написати великими білими літерами назву ком­панії чи своє ім’я, наприклад, «Олімп» або Федір тощо (рис.2.7).

Рис. 2.7. Створення емблеми Рис 2.8. Графічний редактор

Сценарій проекту, інтерфейс і програмування. Задамо розміри форми 400 х 300 точок чи інші. Задамо і запам’ятаємо колір тла форми, нехай, бежевий — Beige. Внизу на формі розташуємо дві кнопки: «Намалювати» і «Витерти». Запрограмуємо їх так, щоб піс­ля натискання на першу кнопку емблема малювалась, а на другу — витиралась.

Рисунок є графічним об’єктом зі стандартного класу Graphics простору імен (бібліотеки) System.Drawing, що володіє методом рису­вання CreateGraphics(). Надамо об’єкту-рисунку деяку назву, наприк­лад, с. Об’єкт с буде задіяний у методах двох кнопок, тому його потрібно описати як глобальний у розділі Declarations перед кодами кнопок так:

Dim с As System.Drawing.Graphics = CreateGraphics()

Розгляньте код кнопки «Намалювати».

Dim f As Font = Forml.DefaultFont

Dim f1 As Font = New FontfArial", 20, FontStyle.Bold)

Dim p As New Pen(Color.Blue) 'Беремо синє перо

Dim b As New SolidBrush(Color.Red) 'і червоний пензель

Dim z As New System.Drawing.Rectangle

z.X = 30 : z.Y = ЗО 'Задаємо координати кута прямокутника

z.Width = 120 : z.Height = 120 'його ширину і висоту

p.Width = 12 'Задаємо товщину пера

p.Color = Color.Blue

c.DrawRectangle(p, z) 'Малюємо прямокутник

p.Color = Color.Green 'Міняємо колір пера

p.Width = 6 'і його ширину

c.DrawRectangle(p, z) 'Малюємо зелений прямокутник

c.FillRectangle(b, z) 'Замальовуємо прямокутник червоним

p.Color = Color.Yellow

c.DrawEllipse(p, z) 'Рисуємо жовте коло

Color = Color.Blue

FillEllipse(b, z) 'Замальовуємо круг синім

Color = Color.White 'Беремо білий пензель

DrawStringfOniMn", f1, b, 43, 74) 'і пишемо текст

Пояснимо усі команди.

Графічними елементами можуть бути стандартні фігури (точки, прямі, прямокутники, кола, еліпси, полігони тощо) і нестандартні (графічні тексти, криві лінії тощо).

Для роботи з графічними текстами оголошують об’єкт f з класу Font, що має стандартні атрибути шрифту (вони містяться у власти­вості DefaultFont форми).

Щоб створити нестандартний текст, конструюють інший об’єкт з класу Font за допомогою конструктора класу, тобто командою New. Конструктору передають параметри шрифту: назву шрифту, розмір у пунктах і стиль (Bold, Italic тощо). У коді цей об’єкт має назву f1, його створює команда Dim f1.

Геометричні фігури рисують за допомогою пера (об’єкта з класу Pen, який назвемо р). Перо спочатку конструюють (як нове перо де­якого кольору, наприклад, Blue), а потім використовують. Перо має такі властивості: ширина (Width) і колір (Color), значення яких мож­на змінювати.

Замальовують фігури за допомогою пензля (об’єкта з класу Solid- Brash, який назвемо Ь), що також характеризується товщиною і ко­льором. Пензель використовують, зокрема, для виведення (малюван­ня) текстів.

Опишемо стандартні графічні фігури у VB. Прямокутник зада­ють чотирма параметрами: двома координатами лівої верхньої вер­шини, шириною і висотою. Еліпс визначають як фігуру, вписану в прямокутник, тобто еліпс задають тими ж атрибутами, що і прямо­кутник. Коло визначають як фігуру, вписану у квадрат. Квадрат — це прямокутник з рівними сторонами. Точка — це квадрат зі сторо­ною, наприклад, 1 графічна точка. Отже, всі графічні фігури явно чи неявно прив’язані до прямокутника.

Прямокутник — це об’єкт з класу System.Drawing.Rectangle. У на­шому коді z — назва цього об’єкта. Його оголошуємо командою Dim z. Об’єкт прямокутник має такі властивості:

• z.X, z.Y — координати лівої верхньої вершини;

• z.Width, z.Height — ширина і висота об’єкта в точках.

Координати на формі відраховуються у точках від лівого верх­нього кута. Х-координата відраховується зліва-направо, а У-координата — зверху-донизу.

Прямокутник рисуватимемо у графічному об’єкті з назвою с. Для графічних об’єктів визначені такі методи:

• DrawLine(), DrawRectangle(), DrawEilipse() — рисування лінії, прямо­кутника, еліпса;

• FillRectangle(), FillEllipseQ тощо — замальовування прямокутника, еліпса тощо;

• DrawString() — виведення даного типу String у графічний об’єкт;

• Print — виведення на принтер;

• Clear чи Refresh — витирання з екрана;

• Dispose() — вилучення з пам’яті.

Метод DrawLine() має п’ять параметрів: перо р як об’єкт класу Pen і координати (Х1, Y1, Х2, Y2) двох точок на площині.

Інші методи мають по п’ять параметрів (назву пера (р) або пензля (b) і чотири параметри прямокутника) або два параметри (назву пе­ра або пензля і назву прямокутника (z) як об’єкта класу Rectangle).

Метод DrawString() має такі параметри: текстове дане, шрифт і назву пензля, координати виведення.

Перша команда c.DrawRectangle(p, z) рисує в об’єкті с прямокут­ник z синім кольором товщиною 12 точок. Змінюємо властивості пе­ра. Наступна така команда рисує прямокутник зеленим кольором товщиною 6 точок. Замальовуємо прямокутник пензлем червоного кольору. Вписуємо у прямокутник еліпс (у нашому випадку коло, бо прямокутник є квадратом) пером жовтого кольору товщиною 6 точок. Замальовуємо еліпс пензлем синього кольору. Пензлем біло­го кольору шириною 4 точки пишемо текст шрифтом f1. Координа­ти 43 і 74 експериментально підібрано так, щоб текст був посереди­ні об’єкта.

Розглянемо код кнопки «Витерти». Він складається з одної ко­манди c.Clear(Color.Beige). Витирання зображення відбувається шля­хом замальовування об’єкта кольором тла.

Завдання 1. Реалізуйте проект і поекспериментуйте зі значен­нями властивостей пера, пензля, шрифту.

Завдання 2. Створіть власну емблему.

2. Елемент керування PictureBox. Рисунок чи графічний текст можна виводити не безпосередньо на форму, а в елемент PictureBox, що є контейнером для інших об’єктів. Для цього вставте на форму елемент керування PictureBox1 і оголосіть об’єкт, наприклад, с1 з класу Graphics з прикріпленням його до елемента PictureBox1 так:

Dim c1 As Graphics = PictureBox1.CreateGraphics.

Властивості PictureBox можна використати для створення графіч­ного редактора чи графічних анімацій.

Завдання 3. У попередньому коді оголосіть об’єкт с1 і замініть у всіх командах коду назву об’єкта с на с1 — отримаєте емблему не безпосередньо на формі, а в контейнері PictureBox1.

3. Створення графічного редактора. Простий графічний редак­тор можна створити за допомогою трьох подій миші:

1. переміщення миші MouseMove;

2. натискання клавіші MouseDown;

3. відпускання клавіші миші MouseUp.

Задача 2. Створити графічний редактор, який дає змогу рисува­ти лінії під час переміщення натиснутої клавіші миші двома кольо­рами: синім, якщо натиснута ліва клавіша, і червоним, якщо натиснута права.

Інтерфейс. Розташуємо на формі елемент керування PictureBox1, який буде полем для рисування, і задамо властивість його межі BorderStyle як Fixed3D. Ліворуч внизу розташуємо два підписані текс­тові поля — «Ширина пера:», «Ширина ластику:», а внизу право­руч — дві кнопки «Очистити» і «Зберегти» (див. рис. 2.8).

Програмування. Для елемента PictureBox1 запрограмуємо подію MouseMove. Для цього перейдемо у вікно коду і виберемо зі списку об’єктів PictureBox1, а зі списку подій — MouseMove. Отримаємо заго­товку процедури PictureBox1_MouseMove, в яку введемо такий код:

Dim с As Graphics = PictureBox1.CreateGraphics

Dim p As New Pen(Color.Blue)

Dim x As Integer

Dim у As Integer

x = MousePosition.X - ActiveForm.Location.X - 5 - _

PictureBox1.Location.X

у = MousePosition.Y - ActiveForm.Location.Y - 30 - _

PictureBox1.Location.Y

p.Width = Val(TextBoxl.Text)

If MouseButtons = MouseButtons.Left Then

p.Color = Color.Blue

Else

p.Color = Color.Red

End If

If Draw Then c.DrawLine(p, x, y, x + 3, у + 3)

Опишемо код. Значення х та у експериментально визначають так, щоб кінець стрілки вказівника миші правильно задавав пози­цію рисування. Для цього треба брати до уваги взаємне розташу­вання на екрані вказівника миші, що має координати MousePosition.X та MousePosition.Y, елемента керування PictureBox і форми. Далі задає­мо ширину пера і колір. Колір вибираємо так: якщо натиснута ліва клавіша миші, то колір пера синій, якщо права, то — червоний.

Глобальна логічна змінна Draw визначає початок і кінець проце­су рисування, який пов’язаний з подіями натискання MouseDown чи відпускання MouseUp клавіші миші. Поки Draw = True рисування ве­деться вздовж траєкторії переміщення вказівника миші маленьки­ми прямими довжиною декілька графічних точок.

Для об’єкта PictureBox1 запрограмуємо подію MouseDown так:

Draw = True.

Для об’єкта PictureBox1 запрограмуємо подію MouseUp так:

Draw = False.

Змінну Draw треба описати перед усіма процедурами як глобаль­ну: Dim Draw As Boolean.

Розглянемо, як відбувається рисування. Операційна система майже миттєво реагує на зміну положення миші. Процедура PictureBox1_MouseMove виконується, отримуючи від системи нові значення координат миші та відстежуючи значення змінної Draw. Перо нари­сує або не нарисує одну лінію. Оскільки проміжки часу між фіксуванням подій дуже короткі, то у разі нешвидкого переміщення ми­ші складається ілюзія, що перо рисує неперервно. Але це не так. Якщо провести мишею швидко, то розривність процесу малювання стане очевидною. Дослідіть це явище.

Запрограмуємо кнопку Buttonl «Очистити» так (зі зміною тла по­ля малювання на світло-сірий):

PictureBox1.BackColor = System.Drawing.Color.LightGray

PictureBox1.Refresh()

Завдання 1. Виконайте проект. Введіть у перше текстове поле значення товщини пера (5) і почніть малювати. Намалюйте двоко­лірну фігуру, міняючи під час малювання товщину пера. Чому, на вашу думку, товщина і вигляд лінії залежать від швидкості перемі­щення миші?

Завдання 2*. Змініть код, щоб малюнок утворювався не з пря­мих, а з кіл малого радіусу, що створюють ілюзію точок.

4. Властивості елемента керування PictureBox. Створення аніма­ції. Елемент керування PictureBox можна використати як контейнер для готової картинки, яку поміщають в елемент з графічного файлу. Важливими є такі значення властивості SizeMode цього елемента:

• Normal — можна вручну змінювати розміри елемента;

• Stretchlmage — автоматично розтягує чи стискує картинку до заданих користувачем розмірів елемента;

• AutoSize — робить розміри елемента такі, як і картинки;

• Centrelmage — розташовує картинку посередині елемента.

Картинку вставляють з файлу за допомогою властивості Image.

Під час роботи з картинками значення властивості BorderStyle за­дають як None чи FixedSingle.

Елементи керування PictureBox (чи інші) можна використати для створення анімації. Наприклад, у наступному коді запрограмовано переміщення об’єкта PictureBox1 з картинкою зліва направо з певною швидкістю. Швидкість переміщення залежить від тривалості паузи, яку можна створити штучним способом, наприклад, за допомогою циклу For d = 1 То 1000000 : Next d:

Dim x As Integer

Dim d As Integer

For x = 40 To 200

PictureBox1.Left = x

For d = 1 To 1000000 : Next d

Next x

Рух у горизонтальному напрямку забезпечує зміна значення властивості Left об’єкта PictureBox1.

Рух у вертикальному напрямку регулюється значенням власти­вості PictureBox1.Тор.

Завдання 1. Створіть анімаційний ефект руху деякого зобра­ження чи елемента керування на формі.

Вправи

1. Нарисуйте власну емблему, комбінуючи стандартні геометричні фігу­ри, тексти і кольори.

2. Модифікуйте графічний редактор, підібравши однаковий колір тла PictureBox1 і колір рисування правою клавішею, щоб права клавіша функціонувала як гумка заданої у TextBox2.Text ширини.

3. Лінія у нашому графічному редакторі утворюється як сукупність штрихів. Створіть лінію, точки якої моделюватимуться квадратами зі стороною 1.

4. Реалізуйте такий проект: клацання мишею на формі веде до малю­вання кола в точці, куди показував курсор, і забезпечує виведення координат курсору на екран.

5*. Реалізуйте проект. На екрані (на формі) досить швидко пролітає та­рілка або декілька тарілок або на мить з’являються мішені у вигляд: тарілок (кругів). Потрібно їх збити клацанням мишею на них. У раз: влучення лічильник влучень збільшується на одиницю чи настають певні події (з’являються повідомлення, перефарбовується тло форми, звучать фанфари тощо).

6*. Модифікуйте графічний редактор, щоб значення кольорів можна буле передавати з форми у код. Візьміть до уваги, що дане типу String не конвертується в системне значення кольору на зразок Color.Red тощо.

7*. Ознайомтеся самостійно в довідниках чи в мережі з темою «Діало­ги» і за допомогою діалогів збережіть рисунок у файлі, запрограму­вавши кнопку «Зберегти».