Народна Освіта » Інформатика » Відображення графічних об’єктів засобами мови програмування

НАРОДНА ОСВІТА

Відображення графічних об’єктів засобами мови програмування

1.    Які графічні примітиви можна створювати у графічному редакторі та текстовому процесорі?

2.    Які властивості графічних примітивів ви знаєте?

3.    Які спільні властивості напису, кнопки і форми ви знаєте?

ЗАСОБИ ДЛЯ МАЛЮВАННЯ В OBJECT PASCAL

Графічні об’єкти у проектах, розроблених у Lazarus, можна створювати та відображати різними способами. Одним з них є малювання графічних примітивів за їх координатами на координатній площині.

Частина такої координатної площини розміщена, наприклад, на формі. Початок координат збігається з верхнім лівим кутом форми. Вісь Ox спрямована вправо, вісь Oy - униз. Частина координатної площини, що відображається на формі, має розміри ширини і висоти форми. На малюнку 6.32 червоним кольором позначено точку з координатами (100, 200).

Для малювання на формі використовується її властивість Canvas (англ. canvas - полотно, канва).

Кожна точка (піксель) на формі має свої координати та колір. Координати можуть бути задані лише цілими числами. Колір можна задати константою типу TColor. Приклади констант і відповідних їм кольорів наведено в таблиці 6.1.

Таблиця 6.1

Константи для кольорів у Lazarus

Константа

Колір

Константа

Колір

clBlack

Чорний

clSilve

Сріблястий

clWhite

Білий

clGray

Сірий

clRed

Червоний

clGreen

Зелений

clBlue

Синій

clNavy

Темно-синій

clLime

Салатовий

clOlive

Оливковий

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

Сапуав.Рїхе1в[х, у] := еІНей;

Для створення графічних примітивів можна використовувати команди, які наведено в таблиці 6.2.

Таблиця 6.2

Команди для малювання графічних примітивів на координатній

площині форми

Команда

Пояснення

Canvas.MoveTo (x, y)

Вибір на формі точки малювання ліній

(x, y), з якої буде розпочинатися

Команда

Пояснення

Canvas.LineTo (х, у)

Малювання відрізка від останньої точки, у якій відбувалось малювання, до точки (х, у). Використання послідовно кількох таких команд приведе до малювання відрізка або ламаної

Canvas.Rectangle (х1, у1, х2, у2)

Малювання прямокутника, у якого протилежні вершини розміщені в точках (х1, у1) та (х2, у2), а сторони паралельні осям координат

Canvas.Ellipse (х1, у1, х2, у2)

Малювання еліпса, вписаного у прямокутник, у якого протилежні вершини розміщені в точках (х1, у1) та (х2, у2), а сторони паралельні осям координат. Прямокутник при цьому не відображається

Canvas.Pie (х1, у1, х2, у2, х3, у3, х4, у4)

Малювання замкненої фігури - сектора еліпса. Точки (х1, у1) та (х2, у2) задають прямокутник, у який вписано еліпс. Початкова точка дуги визначається перетином еліпса з прямою, що проходить через його центр і точку (х3, у3). Кінцева точка дуги визначається перетином еліпса з прямою, що проходить через його центр і точку (х4, у4). Дуга малюється проти годинникової стрілки від початкової до кінцевої точки (мал. 6.33).

У наведеному на малюнку 6.33 прикладі еліпс вписаний у прямокутник, що має протилежні вершини в точках A (100, 100) та C (500, 300). Сектор еліпса утворений відрізками, що сполучають центр прямокутника (точку T (300, 200)) з точками M (300, 100) та N (400, 100), та дугою еліпса, що починається в точці M (300, 100), а закінчується при перетині еліпса з відрізком TN.

Для кожного примітива можна задати значення властивостей його контуру та внутрішньої області. Значення властивостей контуру та внутріш-

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

Таблиця 6.3

Властивості форми для встановлення значень властивостей контуру та внутрішньої області графічних примітивів

Властивість

Призначення та приклади значень

Значення за замовчуванням

Canvas.Pen.Color

Колір лінії контуру

Чорний

Canvas.Pen.Width

Товщина ліній контуру

1 піксель

Canvas.Pen.Style

Стиль лінії контуру, наприклад, рзБоІід - суцільна лінія, рзБазк - штрихова лінія, рзЮоі - пунктирна лінія та ін.

Суцільна

Canvas.Brush.Color

Колір заливки внутрішньої області

Білий

Canvas.Brush.Style

Стиль заливки внутрішньої області, наприклад, ЬзБоІій - суцільна заливка, ЬзСгозз - заливка у вигляді сітки з горизонтальними та вертикальними лініями, ЬзЮіадСгозз - заливка у вигляді сітки з діагональними лініями та ін.

Суцільна

Створюючи зображення, що складається з графічних примітивів, варто спочатку встановити значення властивостей контуру та внутрішньої області фігури, після чого відобразити саму фігуру. На малюнку 6.34 зображено результат виконання наступної процедури створення кольорового прямокутника: procedure Tform1.Button1Click(Sender: Tobject); begin

Canvas.Pen.Color := clGreen; // колір контуру зелений Canvas.Pen.Width := 3; // товщина контуру 3 пікселі Canvas.Brush.Color := clRed; // колір заливки червоний Canvas.Brush. Style := bsDiagCross; (* стиль заливки — сітка з діагональними лініями *)

 

Canvas.Rectangle (100, 100, 500, 300); (* прямокутник з протилежними вершинами в точках (100, 100) та (500, 300) і сторонами, паралельними осям координат *) end;

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

 

КОМПОНЕНТ ФІГУРА ДЛЯ СТВОРЕННЯ ГРАФІЧНИХ ПРИМІТИВІВ

Графічні примітиви в проектах Lazarus також можна створювати, використавши компонент Фігура.

Щоб розмістити Фігуру на формі, потрібно двічі клацнути на кнопці 4* TShape (англ. shape - форма, фігура) на вкладці Additional (англ. additional - додатковий) вікна середовища Lazarus.

Властивості Фігури Name, Enabled, Visible аналогічні до відповідних властивостей форми. Як і для форми, значення властивостей Фігури Top, Left, Height і Width можна змінити або на вкладці Властивості, або перетягуванням.

Компонент Фігура має властивості, що визначають колір і стиль контуру та внутрішньої області (табл. 6.4).

Властивості компонента Фігура

Таблиця 6.4

Властивість

Що визначає її значення

Pen.Color

Колір контуру

Pen.Width

Товщина контуру

Pen.Style

Стиль лінії контуру

Brush.Color

Колір заливки внутрішньої області

Brush.Style

Стиль заливки внутрішньої області

Значення цих властивостей можна встановлювати на вкладці Властивості у вікні Інспектор об’єктів або з використанням команди присвоювання. Ці значення можуть бути такими самими, як і для графічних примітивів.

Крім того, Фігура має властивість Shape, що визначає її форму. Ця властивість може набувати, наприклад, значень stRectangle - прямокутник, stCircle - коло, stSquare - квадрат, stDiamond - ромб, stTriangle - трикутник та ін. За замовчуванням значення цієї властивості визначає квадрат з контуром чорного кольору товщиною 1 п ік-сель і суцільною заливкою білого кольору.

На малюнку 6.35 наведено приклад зображення, створеного з використанням кількох об’єктів Фігура з різними значеннями властивостей.

ВІДОБРАЖЕННЯ ЗОБРАЖЕНЬ ІЗ ЗОВНІШНІХ ФАЙЛІВ

У проектах можна відображати зображення, що містяться в зовнішніх файлах. Для цього призначений компонент Область зображення. Для його розміщення на формі потрібно двічі клацнути на кнопці ^ TImage (англ. image - зображення) на вкладці Additional у вікні середовища Lazarus.

Властивості Області зображення Name, Enabled, Visible аналогічні до відповідних властивостей форми. Як і для форми, значення властивостей області зображення Top, Left, Height і Width можна змінити або на вкладці Властивості, або перетягуванням.

Відображення зображення, що міститься в зовнішньому файлі, визначається значеннями таких властивостей (табл. 6.5):

Таблиця 6.5

Властивості компонента Область зображення

Властивість

Пояснення

Picture

Вибір файлу з графічним зображенням для відображення в Області зображення

AutoSize

При значенні true компонент Область зображення набуває розмірів зображення, отриманого з файлу. При значенні false розміри компонента не залежать від розміру зображення, а визначаються значеннями відповідних властивостей

Stretch

При значенні true зображення, отримане з файлу, набуває розмірів Області зображення. При значенні false зображення зберігає свої розміри і не залежить від розмірів компонента

Proportional

При значенні true ширина та висота зображення, отриманого з файлу, будуть змінюватися пропорційно при розміщенні в Області зображення. При значенні false ширина та висота зображення можуть змінюватися не пропорційно

 

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

Графічні примітиви можна малювати за їх координатами на координатній площині, частина якої розміщена на формі. Для цього використовується її властивість Canvas.

Кожна точка на формі має свої координати та колір. Для кожного графічного примітива можна задати значення властивостей його контуру та внутрішньої області.

Графічні примітиви в проектах Lazarus можна створювати також, використавши компонент Фігура. Цей компонент має властивості, значення яких визначають колір і стиль контуру та внутрішньої області.

Можна відображати зображення, що містяться в зовнішніх файлах. Для цього призначений компонент Область зображення.

Дайте відповіді на запитання

1*. Як розміщена на формі координатна площина?

2°. Яка властивість форми використовується для малювання графічних примітивів?

3*. Які команди використовуються для малювання графічних примітивів - лінія, ламана, прямокутник, еліпс, сектор?

4*. Як змінити контур і внутрішню область графічних примітивів?

5°. Який компонент використовується для створення графічних примітивів? Як його встановити на формі?

6*. Значення яких властивостей Фігури визначають вигляд її контуру та внутрішньої області?

7*. Значення якої властивості Фігури визначають її форму? Яких значень вона може набувати?

8°. Який компонент використовується для відображення на формах графічних зображень, що містяться в зовнішніх файлах? Як його встановити на формі?

9*. Як вибрати файл для відображення в Області зображення?

 

Виконайте завдання

1°. Створіть проект, при виконанні якого після вибору кнопки буде намальовано на формі прямокутник за зразком, що наведено на малюнку. Збережіть проект у папці з іменем Завдання 6.8.1, створеній у вашій папці.

2*. Створіть проект, після запуску якого на

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

а)    відрізок від точки (10, 10) до точки (200, 100) червоного кольору, тип лінії - штрих-пунктир, товщина лінії - 5;

б) ламана із чотирьох відрізків синього кольору, стиль лінії - крапками, товщина - 3;

в)    прямокутник з протилежними вершинами в точках (50, 50) та (250, 150), лінії контуру - червоні суцільні товщиною 1, заливка сріблястого кольору, стиль заливки - горизонтальні лінії;

г)    еліпс, вписаний у прямокутник з вершинами в точках (100, 20) та (200, 300), лінії контуру - жовті пунктирні товщиною 2, заливка салатового кольору, стиль заливки - вертикальні лінії;

ґ) сектор еліпса, вписаного у прямокутник з вершинами (50, 50) та (150, 150), початкова точка дуги (150, 100), кінцева - (100, 150), лінії контуру - білі суцільні товщиною 4, заливка оливкового кольору, стиль заливки - нахилені лінії.

 

Збережіть проект у папці з іменем Завдання 6.8.2, створеній у вашій папці.

3*. Створіть проект, при виконанні якого буде побудовано зображення з фігур відповідно до зразка на малюнку. Збережіть проект у папці з іменем Завдання 6.8.3, створеній у вашій папці.

4*. Створіть проект, при виконанні якого з фігур буде побудовано зображення:

а) вантажівки;

б) робота;

в)    комп’ютера;

г)    ракети.

Стиль і колір фігур виберіть самостійно. Збережіть проект у папці з іменем Завдання 6.8.4, створеній у вашій папці.

5°. Створіть проект, при виконанні якого на формі відображатиметься зображення, що міститься у файлі, наприклад Розділ 6\Пункт 6.8\ завдання 6.8.5)р§. Збережіть проект у папці з іменем Завдання

6.8.5, створеній у вашій папці.

6*. Створіть проект, при виконанні якого на формі як фон буде розміщено зображення з файлу, наприклад Розділ 6\Пункт 6.8\завдан-ня 6.8.6.^. Поверх нього з фігур буде створено зображення автомобіля. Збережіть проект у папці з іменем Завдання 6.8.6, створеній у вашій папці.

7*. Розмістіть на формі кнопку, фігуру, три прапорці та поле з розкривним списком. Створіть проект, у якому при виборі кнопки залежно від вибраного значення у списку фігура змінюватиме форму, набуваючи значення квадрат, коло або трикутник, а залежно від вибраних прапорців контур матиме товщину 1 або 4, колір заливки буде жовтим або зеленим, стиль заливки - суцільний або діагональні лінії. Збережіть проект у папці з іменем Завдання 6.8.7, створеній у вашій папці.

ПРАКТИЧНА РОБОТА № 13

«Складання та виконання алгоритмів з графічним відображенням

даних»

Увага! Під час роботи з комп’ютером дотримуйтеся правил безпеки та санітарно-гігієнічних норм.

1.    Відкрийте вікно Lazarus.

2.    Створіть проект, після запуску якого на виконання:

а) у верхній частині форми з графічних примітивів буде зображено сонце;

б)    у нижній частині форми буде розміщено зображення з файлу Розділ 6\Пункт 6.8\практична 13.jpg;

в)    з фігур буде створено зображення будинку.

3. Збережіть проект у папці з іменем Практична 13, створеній у вашій папці.

4.    Запустіть проект на виконання.

5.    Проаналізуйте отриманий результат.

6.    Закрийте вікно виконання проекту.

7.    Закрийте вікно середовища Lazarus.

 

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

 

Категорія: Інформатика

Автор: admin от 16-10-2016, 16:10, Переглядів: 17276