storinka.click » Інформатика » Візуалізація елементів табличної величини з використанням графічних примітивів
Інформація про новину
  • Переглядів: 3588
  • Дата: 6-02-2018, 14:40
6-02-2018, 14:40

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

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


1. Де і з якою метою використовують діаграми?

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

3. Як можна використати властивість форми Canvas для малювання графічних примітивів?

ВІЗУАЛІЗАЦІЯ ЕЛЕМЕНТІВ ТАБЛИЧНОЇ ВЕЛИЧИНИ

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

Розглянемо, як можна графічно подати (візуалізувати) елементи табличної величини, використовуючи компонент Фігура, який ви вже знаєте. Наприклад, як можна зобразити значення елементів табличної величини висотами відповідних прямокутників і таким чином отримати зображення, аналогічне стовпчастій діаграмі.

Розглянемо табличну величину з 5 елементів. Розмістимо на формі 5 компонентів Фігура та встановимо для кожного з них значення

stRectangle властивості Shape. Під час виконання обробника події Click для кнопки буде прочитано цілі числа з багаторядкового текстового поля, з них утворено табличну величину з 5 елементів і значення цих елементів буде присвоєно висотам відповідних прямокутників. Результат виконання цієї процедури наведено на малюнку 6.5.

Можна розглянути табличну величину b з 5 елементів типу TShape, значеннями яких будуть компоненти Фігура, що розташовані на формі. Значення цим елементам надамо командами присвоювання:

імена цих компонентів. Тоді замість п’яти команд присвоювання висотам відповідних прямокутників значень елементів табличної величини а можна записати одну команду циклу. Відповідна процедура виглядатиме так:

Якщо введені в багаторядкове текстове поле числа великі, то й відповідно великими будуть і висоти відповідних прямокутників. Тоді деякі прямокутники можуть не вміщатися у вікні (мал. 6.6).


Загрузка...

У такому разі, якщо можна, потрібно збільшити розміри вікна так, щоб усі прямокутники повністю були видимі.

Якщо ж розміри вікна за якихось причин під час виконання проекту змінити не можна, то потрібно виконати масштабування висот прямокутників.

Наприклад, можна визначити найбільше значення в табличній величині та встановити, що висота прямокутника, яка відповідає цьому елементу табличної величини, буде фіксованою, наприклад 100. А далі висоти всіх прямокутників помножити на коефіцієнт масштабування, який дорівнюватиме відношенню вибраної максимальної висоти прямокутника на максимальне значення в табличній величині а • (100/max).

Наводимо текст процедури з використанням коефіцієнта масштабування:

Звертаємо вашу увагу: оскільки висота прямокутника може бути тільки цілим числом, а в результаті операції ділення може бути дробове число, у команді d(a[i]*100/max)

з використанням функції round (англ. round — круглий).

На малюнку 6.7 наведено результат виконання процедури з масштабу-ванням для тих самих чисел, що й попереднє виконання без масштабування.

У такий самий спосіб можна масштабувати висоти прямокутників, якщо значення елементів табличної величини а малі, то й малими будуть висоти відповідних прямокутників.


Візуалізувати значення елементів числової табличної величини можна також з використанням властивості Canvas форми. Наведемо приклад відповідної процедури та вікно її виконання (мал. 6.8):

Для того щоб візуалізація була більш схожа на традиційний вигляд діаграми, для ординат лівої нижньої та правої верхньої вершин прямокутників використано числа Forml.Height і Form1.Height-a[i]. Змінна l використана для змінення абсцис лівої нижньої та правої верхньої вершин прямокутників. Її початкове значення взято 5 (можна було б узяти й інше значення), ширина прямокутника взята 20 (тому абсциси лівої нижньої та правої верхньої вершин прямокутників дорівнюють відповідно l і l + 20), відстань між прямокутниками взята 5 (тому в циклі значення І збільшується на 25).

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

Задача. Багаторядкове текстове поле містить 8 цілих чисел. Створити обробник події Click для кнопки, виконання якого зафарбує в зелений колір фігури, для яких відповідні значення додатні, у червоний колір — фігури, для яких відповідні значення від’ємні, і в жовтий колір — фігури, для яких відповідні значення дорівнюють нулю.

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

2. Розмістіть на формі (мал. 6.9):

• багаторядкове текстове поле заввишки 150;

• кнопку з текстом Зобразити;

• 8 компонентів Фігура та встановіть для кожного з них значення stTriangle властивості Shape і значення 80 властивості Height.

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

4. Створіть обробник події Click для кнопки. Уведіть такий текст процедури:

5. Збережіть оновлену версію проекту.

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

7. Уведіть у багаторядкове текстове поле числа: 2; 5; -11; 56; -6; 0; 3; 0. Виберіть кнопку Зобразити. Проаналізуйте отриманий результат (мал. 6.10).

8. Видаліть числа з багаторядкового текстового поля та введіть свій набір цілих чисел. Виберіть кнопку Зобразити. Проаналізуйте отриманий результат.

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

10. Установіть для кожного з компонентів Фігура значення stCircle властивості Shape і значення 60 властивостей Height і Width.

11. Збережіть оновлену версію проекту.

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

13. Уведіть свій набір цілих чисел у багаторядкове текстове поле. Виберіть кнопку Зобразити. Проаналізуйте отриманий результат.

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

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


Загрузка...

Процедура для формування двох табличних величин з 5 елементів: a — із цілих чисел, b — з компонентів Фігура та зображення чисел фігурами відповідних висот:

Фрагмент процедури масштабування висот фігур для зручної візуалі-зації великих чисел:

Приклад команди для фарбування фігури в червоний колір: b[i].Brush.Color := clred;

Фрагмент процедури для візуалізації чисел з використанням властивості Canvas:

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

1*. Для чого використовують візуалізацію? Наведіть приклади.

2°. Використовуючи які об’єкти, можна візуалізувати дані табличної величини?

3°. Якими командами можна сформувати масив із 6 компонентів Фігура?

4°. Як у рядку var описати табличну величину з 10 компонентів Фігура?

5*. Якими командами можна поставити у відповідність числам з табличної величини фігури з відповідними висотами?

6*. Якими командами можна поставити у відповідність числам з табличної величини фігури з відповідними кольорами?

7*. Як виконати масштабування фігур у випадку великих чисел?

8*. Як виконати масштабування фігур у випадку малих чисел?

9*. Як візуалізувати числа, використовуючи властивість Canvas?

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

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

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

3*. Створіть проект, у якому потрібно сформувати табличну величину з 8 різних дійсних чисел, що знаходяться в рядках багаторядкового текстового поля, і зафарбувати в зелений колір фігуру, що відповідає найменшому елементу табличної величини, а в сірий — усі інші фігури. Збережіть проект у папці з іменем Завдання 6.3.3, створеній у вашій папці.

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

5*. Створіть проект, у якому потрібно сформувати табличну величину із 6 малих дійсних чисел, що знаходяться в рядках багаторядкового текстового поля, та зобразити кожне число трикутником відповідної висоти, передбачивши масштабування. Збережіть проект у папці з іменем Завдання 6.3.5, створеній у вашій папці.

6*. Створіть проект, у якому потрібно сформувати табличну величину з 10 дійсних чисел, що знаходяться в рядках багаторядкового текстового поля, та зобразити кожне число трикутником відповідної висоти, передбачивши масштабування для випадків наявності великих і малих чисел. Збережіть проект у папці з іменем Завдання 6.3.6, створеній у вашій папці.

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

8*. Багаторядкове текстове поле містить 6 цілих чисел. Створіть обробник події Click для кнопки, виконання якого зафарбує в синій колір прямокутники, для яких відповідні значення більші за 100, а в зелений колір — прямокутники, для яких відповідні значення більші за 200. Збережіть проект у папці з іменем Завдання 6.3.8, створеній у вашій папці.

 

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