§ 48. Розробка програм із графічними компонентами

Із попереднього параграфа ви дізналися, як у проекті завантажити зображення, що міститься в графічному файлі. Також у проекті можна відкривати і зберігати файли.

Робота з файлами зображень

Компоненти OpenPictureDiaIogі SavePictureDiaIog(вкладка

Dialogs на Палітрі компонентів) дозволяють під час роботи програми вибирати в діалоговому вікні графічний файл для його відкриття або вказувати назву файла для збереження зображення.

Діалогове вікно компонента OpenPictureDialog має область попереднього перегляду файлів. Значення властивості Filter встановлено для показу графічних файлів з розширеннями .bmp, .ico, .emf, .wmf. Для того щоб у фільтрі була можливість вибору файлів із розширенням .jpg, потрібно додати модуль JPEG до блоку uses.

Під час виконання проекту реалізація діалогу з користувачем для відкриття або збереження файла здійснюється за допомогою методу Execute. Метод спрацьовує в момент клацання кнопки Відкрити або Зберегти у вікні вибору файла. Якщо користувач клацне кнопку Відкрити (Зберегти), діалог завершиться, метод Execute поверне значення True і назва вибраного файла збережеться у властивості FileName компонента OpenPictureDialog (SavePictureDialog). Якщо ж користувач відмовиться від діалогу (клацне кнопку Скасувати або натисне клавішу Esc), то метод Execute поверне значення False.

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

Для відкриття файла в процедурі обробки події для відповідного компонента (наприклад, кнопки) записують оператор:

If OpenPictureDialogI .Execute Then

Imagel.Picture.LoadFromFile (OpenPictureDialogI.FileName);

Для збереження зображення у файлі в процедурі обробки події для відповідного компонента слід записати оператор:

If SavePictureDialogI .Execute Then

Image!.Picture.SaveToFile (SavePictureDialog! .FileName);

Головне меню (MainMenu)

Компонент MainMenu(вкладка Standard на Палітрі компонентів) призначений для додавання до програми головного меню. Редактор меню викликається подвійним клацанням компонента MainMenu.

У вікні Редактор меню автоматично створюється пункт меню верхнього рівня New Iteml. Для додавання пунктів меню і підменю зручно користуватися командами контекстного меню (рис. 48.1). Меню складається з окремих пунктів, значення властивості Caption кожного з яких потрібно задати у вікні Інспектор об'єктів.

Кожна команда меню — це об’єкт зі своїми властивостями і методами. Для того щоб меню виконувало свої функції, потрібно створити процедуру обробки події onclick для кожного пункту меню.

Питання для самоперевірки

1. Який компонент дозволяє відкривати графічний файл за допомогою діалогового вікна під час виконання проекту?

2. Який компонент дозволяє зберігати графічний об’єкт за допомогою діалогового вікна під час виконання проекту?

3. Поясніть призначення методу Execute.

4. Поясніть призначення компонента MainMenu.

5. Як додавати пункти до головного меню?

6. Як створити процедуру обробки події для пунктів меню?

Вправа 48

Скласти програму, в якій реалізовані основні функції графічного редактора.

1) Створіть новий проект. Змініть заголовок форми на «Графічний редактор». Розмістіть на формі компоненти згідно з рис. 1: Image; OpenPictureDialog; SavePictureDialog; MainMenu; ColorDialog; три компоненти BitBtn.

Пункти меню назвіть так, як показано на рис. 1-3.

2) Створіть процедуру обробки події OnCreate для форми. У програмному коді процедури запишіть оператори:

procedure TFormI.FormCreate (Sender: TObject); begin

I magel.Canvas.Brush.Color := clWhite;

I magel .Canvas.FillRect (ClientRect); end;

3) У редакторі меню створіть пункти меню Файл і Малюнок та відповідні пункти під-меню за зразком (рис. 2, 3).

4) Створіть процедури обробки подій для пунктів Відкрити і Зберегти меню Файл. procedure TForm1.Menuitem2Click (Sender: TObject); begin

if OpenPictureDialogI.Execute Then I magel.Picture.LoadFromFile

(OpenPictureDialogl.FileName);

end;

procedure TForm1.MenuItem3Click (Sender: TObject); begin

if SavePictureDialogI.Execute Then Imagel .Picture.SaveToFile (SavePictureDialogI.

FileName);

end;

5) Самостійно створіть процедури обробки подій для пункту Вихід меню Файл і пункту Очистити меню Малюнок.

6) Додайте на піктографічні кнопки BitBtnI, BitBtn2, BitBtn3 відповідні зображення — олівець, заливка, колірна палітра. Кнопки BitBtnI, BitBtn2 відповідають за вибір інструмента для малювання, кнопка BitBtn3 — за вибір кольору.

7) До блоку опису глобальних змінних додайте опис змінних, що відповідають за вибір інструментів для малювання:

var Forml: TFormI;

peni, brushl: Boolean; cl: TColor; flag: Boolean; // допоміжна змінна

8) Створіть процедури обробки подій для кнопок BitBtnl, BitBtn2. procedure TFormi .BitBtniClick (Sender: TObject);

begin

peni := True; brushi := False; end;

procedure TForm1.BitBtn2Click (Sender: TObject); begin

pen1 := False; brush1 := True; end;

9) Створіть процедуру обробки подій для кнопки BitBtn3, що реалізує вибір кольорів за допомогою компонента ColorDialog.

10) Запрограмуйте можливість малювання за допомогою миші (рис. 4). При клацанні кнопки миші в області компонента Image1 у процедурі Image1MouseDown перевіряється, який інструмент обрано. Якщо обрано інструмент Олівець (pen1 = True), то змінній flag надається значення True, малювання лінії починається з поточної координати (x, y) вказівника. Якщо обрано інструмент Заливка (brush1 = True), то відбувається заливка від точки (x, у) вибраним кольором (FillStyle = fsSurface).

Якщо не відпускати кнопку миші і пересувати вказівник по поверхні Image1, то у процедурі TForm1.Image1MouseMove відбувається малювання лінії за поточними координатами вказівника миші. Якщо кнопку миші відпустити, то виконається процедура TForm1.Image1MouseUp, в якій flag набуде значення False, і малювання лінії завершиться.

procedure TForm1.Image1MouseDown (Sender: TObject; Button: TIMouseButton; Shift: TShiftState; x, y: Integer); begin

If pen1 Then

begin

Image1.Canvas.Pen.Color := cl; flag := True;

Image1.Canvas.MoveTo (x, y); end;

If brush1 Then

begin

Image1.Canvas.Brush.Color := cl;

Image1.Canvas.FloodFill (x, y, Image1.Canvas.Pixels [x, y], fsSurface); end; end;

procedure TForm1.Image1MouseMove (Sender: TObject; Shift: TShiftState; x, у: Integer);

begin

If flag Then Image1.Canvas.LineTo(x, y); end;

procedure TForml.ImageIMouseUp (Sender:

TObject; Button: TMouseButton; Shift:

TShiftState; x, y: Integer);

begin

flag := False; end;

11) Перевірте роботу програми. Збережіть проект у папці Вправа 48. Створений графічний редактор дозволяє відкривати графічні файли, створювати і редагувати зображення, зберігати їх.

Комп’ютерне тестування

Виконайте тестове завдання 48 з автоматичною перевіркою на сайті interactive.ranok.com.ua.

Практична робота 16

Створення програми з графічними компонентами

Завдання: скласти програму для перегляду малюнків.

Обладнання: ПК із встановленим середовищем програмування Lazarus.

Хід роботи

Під час роботи з комп’ютером дотримуйтеся правил безпеки.

1. Знайдіть чотири малюнки з петриківським розписом і в графічному редакторі встановіть їхні розміри 80 х 80 пікселів. Створіть папку Практична робота 16 і збережіть у ній опрацьовані графічні файли.

1. Розміщення елементів керування на формі

2. Створіть новий проект і збережіть його у папці Практична робота 16.

3. Змініть заголовок форми на «Елементи петриківського розпису». Додайте на форму чотири компоненти BitBtn (рис. 1), розміри яких дорівнюють розмірам підготовлених зображень. Для цього задайте для властивостей Width і Height значення 80 пікселів. Очистіть вміст поля властивості Caption у вікні Інспектор об'єктів. На кожну з кнопок установіть зображення різних малюнків (властивість Glyph).

4. Додайте на форму компонент Panel (Панель) із вкладки

Standard Палітри компонентів.

Панель використовують як контейнер для інших компонентів. Властивості BevelOuter (Зовнішня рамка) і BevelInner (Внутрішня рамка) відповідають за стиль оформлення зовнішньої і внутрішньої рамок панелі відповідно. Виберіть для цих властивостей значення bvLowered (Рамка утоплена). Властивості BorderWidth (Ширина рамки) надайте значення 2.

5. Розмістіть компонент Image на компоненті Panel. Властиво

сті Stretch компонента Image надайте значення True. Властивості Align надайте значення alClient для того, щоб компонент Image займав увесь доступний простір компонента Panel.

6. Додайте на форму кнопки Збільшити малюнок і Зменшити малюнок.

7. Додайте на форму п’ятий компонент BitBtn. Властивість Kind

кнопки змініть на «Close».

II. Створення програмного коду

8. Запрограмуйте для кожної кнопки

з малюнком відкриття в області компонента Image відповідного файла (рис. 2).

Замість назви Малюнокі-bmp напишіть назву того файла, зображення з якого ви помістили на цю кнопку:

Imagel.Picture.LoadFromFile ('МалюнокІ.Ьітір');

9. Створіть процедуру обробки події

onclick для кнопки Збільшити малюнок.

У програмному коді створеної процедури запишіть оператори: Panell.Height := Panell.Height + 5;

Panell.Width := Panell.Width + 5;

Аналогічно запрограмуйте зменшення розмірів об’єкта Panell на 5 пікселів.

10. Додайте на форму компонент Label. Додайте до процедур оброб

ки подій для кнопок BitBtnI-BitBtn4 оператори виведення назви файла.

III. Тестування програми

11. Перевірте роботу програми.

12. Збережіть проект. Завершіть роботу за комп’ютером.

Зробіть висновок: як додавати зображення на форму; як використовувати піктографічні кнопки для розробки наочного інтерфейсу.

Це матеріал з підручника Інформатика 8 клас Бондаренко