Базові графічні примітиви
Середовище програмування 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?
.png)