Створення малюнків (графічних примітивів) в середовищі Delphi

Будь-яка картинка, креслення, схема можуть розглядатися як сукупність графічних примітивів: крапок, ліній, кіл, дуг і ін. Таким чином, для того, щоб на екрані з'явилася потрібна картинка, програма повинна забезпечити викреслювання (вивід) графічних примітивів, що становлять цю картинку.

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

Лінія

Викреслювання прямої лінії здійснює метод LinеТо, інструкція виклику якого в загальному вигляді виглядає таким чином:

Компонент.Canvas.LineTo(x,у)

Метод LinеТо викреслює пряму лінію від поточної позиції олівця в крапку з координатами, вказаними при виклику методу.

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

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

Ламана лінія

Метод Роlyline викреслює ламану лінію. Як параметр метод одержує масив типу TPoint. Кожний елемент масиву є записом у полях котрого містяться координати точки перегину ламаної. Метод Polyline викреслює ламану лінію, послідовно з’єднуючи прямими крапки, координати яких знаходяться в масиві: першу з другою, другу з третьою, третю з четвертою і т.д.

Коло і еліпс

Метод Ellipse викреслює еліпс або коло, залежно від значень параметрів. Інструкція виклику методу в загальному вигляді виглядає таким чином:

Об'єкт.Canvas.Ellipse(x1,y1, х2,у2)

де:

об'єкт — ім'я об'єкту (компоненту) на поверхні якого виконується викреслювання;

x1, y1, х2, у2 — координати прямокутника, усередині якого викреслюється еліпс або, якщо прямокутник є квадратом, коло.

Значення параметрів методу Ellipse визначають вид геометричної фігури

Колір, товщина і стиль лінії еліпса визначаються значеннями властивості Pen, а колір і стиль заливки області усередині еліпса — значеннями властивості Brush поверхні (canvas), на яку виконується висновок.

Дуга

Викреслювання дуги виконує метод Arc, інструкція виклику якого в загальному вигляді виглядає таким чином:

Об'єкт.Canvas.Arc(x1,y1,х2,у2,х3,у3,х4,у4)

де:

x1, y1, х2, у2 — параметри, що визначають еліпс (коло), частиною якого є викреслювана дуга;

х3, у3 — параметри, що визначають початкову точку дуги;

х4, у4 — параметри, що визначають кінцеву точку дуги.

Початкова (кінцева) крапка — це точка перетину межі еліпса і прямої, проведеної з центру еліпса в крапку з координатами х3 і у3 (х4, у4). Дуга викреслюється проти годинникової стрілки від початкової крапки до кінцевої (мал. нижче).

Колір, товщина і стиль лінії, якій викреслюється дуга, визначаються значеннями властивості Pen поверхні (canvas), на яку виконується вивід.

Значення параметрів методу Arc визначають дугу як частину еліпса (кола)

Прямокутник

Прямокутник викреслюється методом Rectangle, інструкція виклику якого в загальному вигляді виглядає таким чином:

Об'єкт.Canvas.Rectangle(x1, y1,x2, y2)

де:

об'єкт — ім'я об'єкту (компоненту), на поверхні якого виконується викреслювання;

x1, y1 і х2, у2 — координати лівого верхнього і правого нижнього кутів прямокутника.

Метод RoundRec теж викреслює прямокутник, але з округлими кутами. Інструкція виклику методу RoundRec виглядає так:

Объект.Canvas.RoundRec(x1,y1,х2, у2, х3, у3)

де:

x1, y1, х2, у2 -- параметри, що визначають положення кутів прямокутника, в який вписується прямокутник з округляючими кутами;

х3 і у3 — розмір еліпса, одна четверть якого використовується для викреслювання округлого кута.

Метод RoundRec викреслює прямокутник з округлими кутами

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

Є ще два методи, які викреслюють прямокутник, використовуючи як інструмент тільки кисть (Brush). Метод FillRect викреслює зафарбований прямокутник, а метод FrameRect — тільки контур. У кожного з цих методів лише один параметр — структура типу TRect. Поля структури TRect містять координати прямокутної області, вони можуть бути заповнені за допомогою функції Rect.

Нижче допомогою використання методів FillRect і FrameRect була наведена як приклад процедура, яка на поверхні форми викреслює прямокутник з червоною заливкою і прямокутник із зеленим контуром.

procedure TForm1.Button1Click(Sender: TObject);

var

r1, r2: TRect; // координати кутів прямокутників

begin

// заповнення полів структури

// задамо координати кутів прямокутників

r1 := Rect(20,20,60,40);

r2 := Rect(10,10,40,50);

with fоrm1.Canvas do begin

Brush.Color := clRed;

FillRect(r1); // зафарбовуємо прямокутник

Brush.Color := clGreen;

FrameRect(r2}; // зафарбовуємо тільки межу прямокутника

end;

end;

Багатокутник

Метод Polygon викреслює багатокутник. Як параметр метод одержує масив типу TPoint. Кожний елемент масиву є записом, поля (х,у) якого містять координати однієї вершини багатокутника. Метод Polygon викреслює багатокутник, послідовно сполучаючи прямими лініями крапки, координати яких знаходяться в масиві: першу з другою, другу з третьою, третиною з четвертою і т.д. Потім з'єднуються остання і перша крапки. Остання крапка в масиві повинна бути такою ж як і перша, щоб багатокутник з’єднався.

Нижче була приведена процедура, яка, використовуючи метод Роlygon, викреслювати трикутник:

procedure TForm1.Button2Click(Sender: TObject);

var

роl: array[1..3] TPoint; // координати точок трикутника

begin

роl[1].x := 10;

pol[1].y := 50;

роl[2].x := 40;

роl[2].y := 10;

роl[3].х := 70;

роl[3].у := 50;

Form1.Canvas.Polygon(роl);

end;

Сектор

Метод Pie викреслює сектор еліпса або круга. Інструкція виклику методу в загальному вигляді виглядає таким чином:

Об'єкт. Canvas.Pie(x1,y1,x2,y2,х3,у3,х4,у4)

де:

x1, y1, х2, у2 — параметри, що визначають еліпс (коло), частиною якого є сектор;

х3, у3, х4, у4 — параметри, визначальні координати кінцевих точок прямих, є межами сектора.

Початкові точки прямих співпадають з центром еліпса (кола). Сектор вирізується проти годинникової стрілки від прямої, заданою крапкою з координатами (х3, у3), до прямої, заданою крапкою з координатами (х4, у4).

Значення параметрів методу Pie визначають сектор як частину еліпса (кола)

Точка

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

Form1.Canvas.Pixels[10,10]:=clRed

забарвлює точку поверхні форми в червоний колір.

Розмірність масиву pixels визначається розміром графічної поверхні. Розмір графічної поверхні форми (робочій області, яку також називають клієнтською) задається значеннями властивостей ClientWidth і ClientHeight, а розмір графічної поверхні компоненту Image — значеннями властивостей Width і Height. Лівій верхній точці робочої області форми відповідає елемент Pixels [0,0], а правої нижньої - Pixels[ClientWidth - 1, ClientHeight - 1]. Властивість Pixels можна використовувати для побудови графіків функцій.

Проект «Мій малюнок»

Задача. Створити проект «Мій малюнок» використавши команди для створення графічних примітивів, які ми розглянули вище.

1. Створіть форму на якій встановіть кнопку Button та компонент Іmage.
2. Запрограмуйте кнопку Button1 та напишіть такий код програми:

view source

print?

procedure TForm1.Button1Click(Sender: TObject);

begin

with Image1.Canvas do

begin

Pen. Color :=clsilver;Brush.Color:=clsilver;

Rectangle(130,120,250,240);

MoveTo(130,120);

LineTo (190,85);

LineTo(250,120);

Brush.Color:=clolive;

FloodFill(190,100,clsilver,fsBorder);

Brush.Color:=clyellow;

Rectangle(160,140,220,195);

Pen.Color:=clsilver;

Pen.Width:=2;

MoveTo(190,140);

LineTo(190,195);

MoveTo(160,160);

LineTo(220,160);

Brush.Color:=clgreen;Pen.Color:=clgreen;

Ellipse(290,80,330,200);

Brush.Color:=cllime;Pen.Color:=cllime;

Ellipse(320,120,370,190);

Brush.Color:=clolive;

FillRect(Rect(305,198,315,220));

FillRect(Rect(340,188,350,210));

Brush.Color:=clblue; Pen.Color:=clblue;

Chord(290,210,420,290,440,250,320,270) ;

end ;

end;

3. Після виконання проекту на форму виведеться малюнок