Тема: Відображення базових графічних примітивів засобами мови програмування
Урок 49 для 8 класу - Відображення базових графічних примітивів – лінія, прямокутник, сектор, ламана, еліпс, налаштування стилю та кольору примітивів засобами мови програмування. Відображення рисунків із зовнішніх файлів. from VsimPPT
Мета :
- навчальна: ознайомити учнів з тим, як у середовищі Lazarus додають графічні фігури та малюють лінію, сектор, ламану;
- розвиваюча: розвивати логічне мислення; формувати вміння діяти за інструкцією, планувати свою діяльність, аналізувати i робити висновки;
- виховна: виховувати інформаційну культуру учнів, уважність, акуратність, дисциплінованість
Обладнання: комп’ютери кабінету з виходом в мережу Інтернет, мультимедійний проектор, презентація уроку, (ФАЙЛИ-ЗАГОТОВКИ) до підручника "ІНФОРМАТИКА 8 КЛАС"
Відображення базових графічних примітивів – лінія, прямокутник, сектор, ламана, еліпс, налаштування стилю та кольору примітивів засобами мови програмування.
Повторюємо
1. Що таке комп’ютерна графіка?
2. Що таке растрове графічне зображення?
3. Що таке векторне графічне зображення?
4. Наведіть приклади графічних примітивів.
5. Наведіть приклади графічних редакторів.
6. Опишіть принцип побудови векторного зображення.
1. Що таке комп’ютерна графіка?
2. Що таке растрове графічне зображення?
3. Що таке векторне графічне зображення?
4. Наведіть приклади графічних примітивів.
5. Наведіть приклади графічних редакторів.
6. Опишіть принцип побудови векторного зображення.
Щоб розмістити Фігуру на формі, потрібно двічі клацнути на кнопці TShape (англ. shape - форма, фігура) на вкладці Additional (англ. additional - додатковий) вікна середовища Lazarus.
Властивості Фігури Name, Enabled, Visible аналогічні до відповідних властивостей форми.
Як і для форми, значення властивостей Фігури Тор, Left, Height і Width можна змінити або на вкладці Властивості, або перетягуванням.
Компонент Фігура має властивості, що визначають колір і стиль контуру та внутрішньої області.
Властивість Style може набувати значень із набору, вказаного в таблиці:
Значення цих властивостей можна встановлювати на вкладці Властивості у вікні Інспектор об'єктів або з використанням команди присвоювання. Ці значення можуть бути такими самими, як і для графічних примітивів.
Увага! Під час роботи з комп'ютером дотримуйтеся правил безпеки і санітарно-гігієнічних норм.Крім того, Фігура має властивість Shape, що визначає її форму. Ця властивість може набувати, наприклад:
За замовчуванням значення цієї властивості визначає квадрат з контуром чорного кольору товщиною 1 піксель і суцільною заливкою білого кольору.
Переміщення об’єктів мишею
Щоб перемістити об'єкт, треба:
- натиснути ліву кнопку миші на об'єкті (подія MouseDown);
- перемістити вказівник при натиснутій кнопці миші (подія MouseMove);
- відпустити кнопку миші (подія MouseUp).
Щоб запрограмувати переміщення по формі елемента Shape1, треба, використовуючи закладку Події у вікніІнспектор об'єктів, створити для цього компонента процедури обробки подій: OnMouseDown (натискання кнопки миші), OnMouseMove (рух миші), OnMouseUp (відпускання кнопки миші в області об'єкта).
Створивши процедури обробки подій OnMouseDown, OnMouseMove, OnMouseUp для компонентів Shape, можна розробити гру «Конструктор».
Розглянемо, як працюють процедури даного проекту. Якщо натиснути кнопку миші в момент, коли вказівник міститься в області компонента Shape, то в процедурі Shape1MouseDown змінним х1, у1 будуть присвоєні значення координат розміщення вказівника, а змінній flag — значення true. Значення змінної flag (прапорця) сигналізує, чи натиснута кнопка миші. Якщо не відпускати кнопку миші й перетягувати об'єкт, то в процедуріTForm1.Shape1MouseMove відбувається перерахунок координат компонента Shape відносно системи координат форми. Це створює ефект руху фігури за вказівником. Якщо кнопку миші відпустити, то виконається процедураTForm1.Shape1MouseUp, в якій flag набуває значення False, і перетягування завершиться.
У проектах можна відображати зображення, що містяться у зовнішніх файлах. Для цього призначений компонент Область зображення. Для його розміщення на формі потрібно двічі клацнути на кнопці TImage (англ. image - зображення) на вкладці Additional у вікні середовища Lazarus.
Властивості Області зображення Name, Enabled, Visible аналогічні до відповідних властивостей форми. Як і для форми, значення властивостей області зображення Top, Left, Height і Width можна змінити або на вкладціВластивості, або перетягуванням.
Компонент Image має такі основні властивості:
Для того щоб змінити значення властивості Picture, використовують алгоритм додавання зображення на форму:
1. Викликати вікно завантаження графічного зображення в рядку цієї властивості в Інспекторі об'єктів.
2. Натиснути кнопку Завантажити у вікні Діалог завантаження зображення. У вікні, що відкривається при цьому, обрати потрібний графічний файл і натиснути кнопку Відкрити. Далі у вікні перегляду буде відображено вміст цього файла.
3. Натиснути кнопку Гаразд і перейти до надання значень властивостям компонента.
Якщо розміри зображення більші від розмірів компонента, то властивості Stretch потрібно присвоїти значенняTrue. Розміри малюнка зміняться відповідно до реальних розмірів компонента Image.
Щоб вивести зображення в полі компонента Image під час роботи програми, потрібно до властивості Pictureзастосувати метод LoadFromFile, вказавши як параметр шлях до файла з малюнком.
Form1.Image1.Picture.LoadFromFile('c:\temp\bart.bmp')
Завантажує малюнок із файла bart.bmp і виводить його в полі компонента Image1.
Метод LoadFromFile дозволяє виводити зображення різних графічних форматів:
Але для завантаження jpg-файлів необхідно включити до розділу uses стандартний модуль JPEG:
uses JPEG
Якщо графічний файл міститься в поточному каталозі (у папці проекту), достатньо вказати лише його назву.
Очистити вміст елемента Image1 можна таким способом:
Діємо разом
- Вправа 1. У середовищі програмування Lazarus створіть проект, у якому, коли натискають мишку на зображенні круга, він зафарбовується в колір, обраний у групі перемикачів Колір, а коли натискають мишкою зображення квадрата, - зафарбовується обраним кольором та застосовується стиль заливки, який обирають у групі Заливка.
- Завантажте середовище Lazarus і створіть новий проект.
- Змініть значення властивостей об'єкта Form1, розмістіть на формі об'єкти, як на зразку, та надайте значень їх властивостям:
- Для додавання на форму фігур скористайтеся компонентом Shape:
- Для додавання на форму груп перемикачів скористайтеся компонентом RadioGroup і додайте відповідні значення у властивість Items:
- У вікні Інспектора об'єктів встановіть властивості для фігур: Shape1 (Круг) і Shape2 (Квадрат)
- Створіть процедуру опрацювання події натискання кнопкою миші на першій фігурі. Для цього оберіть у вікні Інспектора об'єктів компонент Shape1, на вкладці Події двічі натисніть у клітинці праворуч (...) від OnMouseDown і введіть команди у вікні редактора коду:
procedure TForm1.Shape1MouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer); begin if RadioGroup1.ItemIndex = 0 then Shape1.Brush.Color:=clRed else if RadioGroup1.ItemIndex = 1 then Shape1.Brush.Color:=clBlue else if RadioGroup1.ItemIndex = 2 then Shape1.Brush.Color:=clYellow else Shape1.Brush.Color:=clGreen; end; - Створіть аналогічно процедуру опрацювання події натискання кнопкою миші на другій фігурі. Використайте такий програмний код:
procedure TForm1.Shape2MouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer); begin if RadioGroup1.ItemIndex = 0 then Shape2.Brush.Color:=clRed else if RadioGroup1.ItemIndex = 1 then Shape2.Brush.Color:=clBlue else if RadioGroup1.ItemIndex = 2 then Shape2.Brush.Color:=clYellow else Shape2.Brush.Color:=clGreen; if RadioGroup2.ItemIndex = 0 then Shape2.Brush.Style:=bsHorizontal else if RadioGroup2.ItemIndex = 1 then Shape2.Brush.Style:=bsVertical else Shape2.Brush.Style:=bsSolid; end; - Проаналізуйте програмний код опрацювання подій для обох фігур. Запустіть проект на виконання. Перевірте, чи змінюють свої властивості геометричні фігури.
- Завершіть роботу з проектом і середовищем програмування.
- Вправа 2. У середовищі програмування Lazarus розробіть проект Лінії, у якому на формі будуть малюватися лінії за допомогою протягування мишею: початок лінії буде розташовано в позиції, в якій натиснули кнопку миші, а кінець – де відпустили кнопку миші.
- Завантажте середовище Lazarus і створіть новий проект.
- Створіть процедуру опрацювання події натиснули кнопкою миші. Для цього оберіть у вікні Інспектора об'єктів компонент Form1, на вкладці Події двічі натисніть у клітинці праворуч (...) від OnMouseDown і введіть команди у вікні редактора коду
procedure TForm1.FormMouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer); begin DownM := True; Form1.Canvas.MoveTo(X,Y); end; - У вікні редактора коду запишіть програмний код для оголошення змінної логічного типу DownM, яка передаватиме стан натиснення миші в кожну процедуру опрацювання події
Зверніть увагу, що ми записуємо її у програмний код до опису процедури опрацювання подій:DownM: Boolean;
- У програмний код (аналогічно, як у пункті 2) запишіть процедури опрацювання подій для форми OnMouseUp - відпущена кнопка миші і OnMouseMove - переміщення миші:
procedure TForm1.FormMouseUp(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer); begin DownM := False; end; procedure TForm1.FormMouseMove(Sender: TObject; Shift: TShiftState; X, Y: Integer); begin if DownM = True then begin Form1.Canvas.Pen.Color:=clFuchsia; Form1.Canvas.Pen.Width:=5; Form1.Canvas.Pen.Style:=psDot; Form1.Canvas.LineTo(X,Y) end end; - Проаналізуйте програмний код створених процедур, зверніть увагу на використання властивості Canvas - властивості компонента Form, який у свою чергу є об'єктом, що має свої методи і властивості.
- Запустіть проект на виконання. Спробуйте намалювати лініями своє ім'я.
- Завершіть роботу з проектом і середовищем програмування.
- Поміркуйте, як створити проект, у якому можна продемонструвати різні стилі заливки фігур. Реалізуйте цей проект у середовищі програмування Lazarus.
Виконуємо самостійно
- Завдання. Розробіть проект Прямокутник, у якому в текстові поля чи у список даних вводять пари координат чисел, натискають кнопкуПобудувати й отримують прямокутник, побудований за вказаними значеннями координат. Розкоментуйте рядок з кодом і проаналізуйте зміни у виконанні програми. Орієнтовний зразок інтерфейсуі програмний код, який можна використати у проекті:
procedure TForm1.Button1Click(Sender: TObject); var x1, x2, y1, y2: integer; begin x1:=StrToInt(Edit1.Text); y1:=StrToInt(Edit2.Text); x2:=StrToInt(Edit3.Text); y2:=StrToInt(Edit4.Text); Form1.Canvas.Brush.Color:=clYellow; Form1.Canvas.Rectangle(x1,y1,x2,y2); // Form1.Canvas.FillRect(x1,y1,x2,y2); end;
Домашнє завдання
- Опрацювати підручник: §27 с. 183-188
Практична робота №13
«Складання та виконання алгоритмів з графічним відображенням даних»
Увага! Під час роботи з комп’ютером дотримуйтеся правил безпеки та санітарно-гігієнічних норм.
Картинка https://drive.google.com/file/d/0B6bM...
1. Відкрийте вікно Lazarus.
2. Створіть проект, після запуску якого на виконання:
а) у верхній частині форми з графічних примітивів буде зображено сонце;
б) у нижній частині форми буде розміщено зображення з файлу Розділ 6\Пункт 6.8\практична 13.jpg;
в) з фігур буде створено зображення будинку.
3. Збережіть проект у папці з іменем Практична 13, створеній у вашій папці.
4. Запустіть проект на виконання.
5. Проаналізуйте отриманий результат.
6. Закрийте вікно виконання проекту.
7. Закрийте вікно середовища Lazarus.
Немає коментарів:
Дописати коментар