yurchikte@gmail.com
Реєстрація Вхід

Графіка у Lazarus. Основні поняття.

На цій сторінці можна познайомитись з основними принципами побудови зображень у середовищі Lazarus.

Монітор і його пікселі

Яким чином будується зображення на екрані монітора? Щоб зрозуміти це, достатньо подивитись на маленьке зображення папуги, а потім клікнувши по ньому, роздивитись збільшене.

Що ми побачимо? Наше зображення побудоване із маленьких квадратиків. Чим менші ці квадратики, тим чіткіше зображення ми можемо побачити. Саме ця схема побудови зображень закладена у сучасних моніторах. Увесь екран монітора - це велика кількість дрібних квадратиків(точок), що називаються пікселі. І кожен з цих пікселів може відображати якийсь колір.  Тобто можна розглядати наш монітор як таблицю де кожна клітинка зафарбована якимось кольором у той чи інший момент часу. Дивлячись на малюнок нижче я впевнений більшість бачить три чорні літери на сірому фоні. Але якщо клацнути по малюнку можна побачити дещо інше.


Як бачимо у реальному зображенні частина пікселів "світяться" чорним кольором, а решта пікселів світяться червоним, зеленим чи синім кольором. Проте ми не будемо зараз заглиблюватись у технології і відповідати на питання чому так, а для себе зробимо висновки:

  • Зображення на екрані монітора будується із пікселів;
  • Пікселі мають форму квадрата (насправді як видно з попереднього малюнку пікселі не завжди мають форму квадрата));
  • кожен піксель може може світитися якимось кольором;
  • кожен піксель має свої координати;
  • відлік координат починається з лівого верхнього кута екрану.
Дивлячись на попередній малюнок можна побачити, що літера L уявно являє собою два прямокутники, а літера C не така вже й кругла як здається. 

Інструменти Lazarus

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

Canvas

Отже пам’ятаючи, що зображення це таблиця з квадратиків, ми повинні мати таку у себе у програмі, щоб зафарбувати потрібний нам піксель. Такою таблицею є Canvas (полотно). Це не окремий об’єкт як то форма чи кнопка, це - властивість деяких об’єктів. І одним із таких об’єктів є звичайна форма Form1.
Для малювання Canvas має три властивості (інструменти):
  • Pen (олівець) - використовується для побудови ліній вибраним кольром;
  • Brush (пензель) - використовується для заповнення (заливки) деякої ділянки екрану вибраним кольором;
  • Font (шрифт) - дозволяє малювати текст вибраним кольором і шрифтом;
Розглянемо детально ці властивості.

Pen

Pen (олівець) вказує на товщину і колір ліній з яких ми будемо будувати наше зображення. А отже і властивості він має відповідні:
Width - товщина лінії у пікселях;
Приклад: Form1.Canvas.Pen.Width:=10; //товщина лінії яку ми збираємось малювати дорівнює 10 пікселям.
Color - колір ліній;
Приклад: Form1.Canvas.Pen.Color:=clBlue; //колір майбутньої лінії синій;
Style - стиль лінії  
psSolid - суцільна лінія;
psDash - штрих; 
psDot - пунктир;
psDashDot - штрихпунктир; 
psDashDodDot - Штрих і два пунктира;
psClear - невидима лінія.
Приклад: Form1.Canvas.Pen.Style:=psSolid; //будемо малювати суцільну лінію;
 
 

Brush

 
Brush (пензель) визначає колір і стиль заповнення замкнених фігур, а отже має ті ж самі дві властивості:
Color - колір заливки;
Style - стиль заливки
bsSolid - суцільне заповнення;
bsHorizontal - горизонтальні лінії; 
bsVertical - вертикальні лінії;
bsFDiagonal - діагональні лінії; 
bsCross - решітка;
bsDiagCross - діагональна решітка.

Font

Font (шрифт) дає можливість написати текст на Canvas використовуючи наступні властивості:
Color - колір тексту;
Name - назва шрифту;
Size - розмір шрифту в пунктах; 
Height - розмір шрифту в пікселях;
Style - стиль шрифту
fsBold - напівжирний;
fsItalic - курсив; 
fsUnderline - підкреслений
fsStrikeOut - закреслений; 
Приклад: Form1.Canvas.Font.Style:= [ fsBold, fsItalic];
 

Методи малювання

Для побудови зображень використовуються методи (процедури), що входять до класу TCanvas і дозволяють нам побудувати наступні примітиви:
Clear - очистити Canvas.

Приклад: Form1.Canvas.Clear;

MoveTo(X, Y: Integer); - переміщує курсор у вказані координати.

Приклад: Form1.Canvas.MoveTo(10, 10); - переміщує курсор введення в точку яка віддалена від лівого верхнього кута форми на 10 пікселів по Х (вліво) і 10 пікселів по Y (вниз)

LineTo(X, Y: Integer); - будує лінію із поточної точки в точку з коодинатами X, Y.
Line(X1, Y1,X2,Y2: Integer); - будує лінію із точки (x1,y1) у точку з коодинатами (x2,y2).


Rectangle(X1, Y1, X2,Y2 : Integer); - малює прямокутник у якого лівий верхній кут знаходиться в X1, Y1, а правий нижній кут має координати X2,Y2.

 

Ellipse(X1, Y1, X2, Y2:Integer); - малює еліпс вписаний в прямокутник з координатами X1, Y1, X2, Y2. (див. попередній метод).

Polygon(const Points:array of TPoint); - малює замкнутий контур (багатокутник) у якого вершини мають координати задані як Point(X,Y).

Приклад: Form1.Canvas.Polygon ([Point(10,10), Point(30,30),Point(20,40)]);
Слід зауважити, що остання вершина автоматично з’єднається з першою утворивши замкнену область
 

Завдання для самопідготовки

  1. Завантажте проект;
  2. Ознайомтесь з роботою використаних у ньому методів;
  3. Змініть коодинати для лінії,прямокутника, еліпса. так, щоб вони були розташовані строго посередині форми;
  4. Допишіть код для кнопки Ellipse так, щоб еліпс був зафарбований. (намалюйте коло і еліпс);
  5. Додайте кнопку і побудуйте замкнутий контур за зразком поданим вище.


 

ПОДІЛИТИСЯ У FACEBOOK