Народна Освіта » Інформатика » § 43. Базові графічні примітиви

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

§ 43. Базові графічні примітиви

Середовище програмування Lazarus має різноманітні засоби для роботи з комп’ютерною графікою.

Графічні примітиви

Ознайомлення з графічними можливостями середовища програмування Lazarus почнемо з графічних примітивів.

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

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

Компонент зображення (Image)

 

Для роботи з графікою призначений компонент Image{Зображення), який міститься на

вкладці Additional Палітри компонентів. Після розміщення на формі компонент Image набуває вигляду прямокутної пунктирної рамки (рис. 43.1).

Змінити місце розташування на формі (властивості Left, Top), розміри (властивості Width,

Height), колір фону (властивість Color) компонента Image можна у вікні Інспектор об'єктів або запрограмувавши зміну значень властивостей у ході виконання програми.

Встановити в процедурі завантаження форми OnCreate такі значення властивостей зображення Imagel, щоб відстань від нього до меж форми з усіх боків становила 20 пікселів (рис. 43.2).

Полотно для малювання

Компонент Image має властивість Canvas (Полотно). Малювання на полотні здійснюється, коли деяким його точкам надається колір. Властивостями полотна є Pen (Олівець), Brush (Пензель) і Font (Шрифт). Також полотно має властивість Pixels (Точки), яка надає можливість перефарбувати кожну точку полотна, тобто кожний піксель зображення. Координати конкретної точки вказують у квадратних дужках.

 

 

Вивести точку червоного кольору в задану точку екрана:

Imagel .Canvas.Pixels [20,50] : = clRed;

Полотно має систему координат XOY (рис. 43.3), верхня ліва точка якої має координати (0,0).

Зафарбувати полотно заданим кольором.

Imagel.Canvas.Brush.Color : = clGreen; // встановлюємо зелений колір Imagel .Canvas.FillRect (Imagel .ClientRect); // замальовуємо Завдяки цим командам полотно стає видимим на екрані у вигляді зеленого прямокутника.

Колір можна вказати за допомогою колірних констант, які зручно використовувати для роботи з основними кольорами.

Колірні константи

Значення

Опис

Значення

Опис

Значення

Опис

clBlack

Чорний

clGray

Темно-сірий

clRed

Червоний

clWhite

Білий

clLtGray

Світло-сірий

clTeal

Бірюзовий

clBlue

^ній

clMaroon

Малиновий

clPurple

Бузковий

clGreen

Зелений

clNavy

Темно-синій

clSilver

Сріблястий

clYellow

Жовтий

clOlive

Оливковий

clAqua

Блакитний

clFuchsia

Рожевий

clCream

Кремовий

clLime

Салатовий

Графічні методи

Полотно надає простір для створення графічних об’єктів.

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

Відрізок. Метод LineTo креслить відрізок від поточної позиції олівця до точки з координатами, вказаними під час виклику методу:

Imagel.Canvas.LineTo (250, 65);

Спочатку олівець розташований над точкою (0, 0). Встановити олівець в іншу позицію можна викликом методу MoveTo.

Намалювати відрізок чорного кольору від точки (20, 20) до точки (100, 20).

Imagel.Canvas.Brush.Color : = clBlack;

Imagel.Canvas.MoveTo (20, 20);

Imagel.Canvas.LineTo (100, 20);

Прямокутник. Метод Rectangle малює незаповнений прямокутник, протилежні кути якого збігаються з точками (x1, y1) і (x2, y2).

Сторони прямокутника паралельні сторонам екрана.

Image1.Canvas.Rectangle (x1, y1, x2, y2);

Намалювати квадрат із довжиною сторони 100 пікселів:

 

Image1.Canvas.Rectangle (20,30,120,130);

Еліпс. Метод Ellipse малює еліпс, вписаний в прямокутник, який задано координатами двох протилежних вершин x1, y1 і x2, y2 (рис. 43.4).

Image1.Canvas.Ellipse (x1, y1, x2, y2);

Намалювати коло діаметром 100 пікселів.

Image1.Canvas.Ellipse (20, 30, 120, 130);

Сектор. Метод Pie малює сектор еліпса.

Еліпс, вписаний у прямокутник, задано координатами (x1, y1, x2, y2) (рис. 43.5). Сектор обмежений прямими, що проходять через центр еліпса і точки (x3, y3) і (x4, y4). Дуга малюється від точки (x3, y3) до точки (x4, y4) проти ходу годинникової стрілки.

 

Imagel.CanvasPie (хі, уі, х2, у2, хЗ, уЗ, х4, у4)

Намалювати фігуру за зразком (рис. 43.6).

Imagel .Canvas.Rectangle (0,0,100,100); // квадрат I magel.Canvas.Pie (0,0,100,100,100,0,0,0); // сектор

Ламана лінія. Метод Polyline малює ламану лінію за точками її вершин, що задані у вигляді масиву3 (таблиці)3 Points:

Polyline (Points: array of Tpoint);

Намалювати ламану лінію за п’ятьма точками, заданими координатами (рис. 43.7).

Image1.Canvas.Polyline ([Point (10,10), Point (30,100), Point (50,10), Point (70,100), Point

(90,10)]);

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

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

1. Що таке графічні примітиви?

2. Для чого призначене полотно Canvas?

3. Які властивості має полотно Canvas?

4. Які графічні методи застосовують до властивості Canvas?

5. Як накреслити відрізок на полотні компонента Image?

6. Як намалювати прямокутник; еліпс; ламану лінію на полотні Canvas?

Вправа 43

Скласти програму для малювання графічних примітивів.

1) Створіть новий проект. Розмістіть на формі чотири командні кнопки, при клацанні яких буде виведено відповідний графічний примітив.

2) Побудуйте трикутник із вершинами в точках (100, 100), (200, 200), (100, 200).

 

3) Побудуйте прямокутник із вершинами (200, 10), (320, 10), (320, 120), (200, 120).

4) Побудуйте круг радіусом 50 пікселів, центр якого збігається з центром полотна Imagel.

5) Запустіть проект на виконання. Перевірте роботу програми. Збережіть проект у папці Вправа 43.

6) Додайте нову кнопку для малювання човника (див. рисунок).

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

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

 

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

 

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

Автор: admin от 7-10-2016, 22:45, Переглядів: 8742