2. Приклади використання графічного інструментарію
Розглянемо фрагменти програм, що ілюструють використання інструментів (шрифту, пера і пензля) графічного пристрою DC (Device Context) і основних методів класу TCanvas.
2.1. Приклад 1
Створення зображень вази з квітами і книги засобами графічного інструментарію середовища Delphi.
Для написання програми в першу чергу створимо новий проект (File => New Application). Розташуємо на формі дві кнопки BitBtn1 і BitBtn2. Для них змінимо заголовки (властивість Caption) відповідно на Квіти і Книга. Також на формі розташуємо два компоненти Image1 і Image2 із закладки Additional, які призначені для розміщення на формі одного з трьох підтримуваних Delphi типів зображень: растрової картинки, піктограми або метафайлу. Для компонента Image1 в інспекторі об'єктів установимо значення властивостей Height і Width, які дорівнюють відповідно 320 і 260. У властивості Canvas міститься канва, за допомогою якої програма може створити або відредагувати растрове зображення. Щоб одержати зображення вази з квітами (рис. 2.1), напишемо наступний оброблювач події OnCliсk для кнопки BitBtn1:
procedure TForm1.BitBtn1Click(Sender: TObject);
Var i,j:integer; //оголошення змінних цілого типу Integer
begin
With Image1 do begin
{створення фону за допомогою різнокольорових точок}
for i:=0 to Width do // на ширину Image1
for j:=0 to Height do // на висоту Image1
Canvas.Pixels[2*i,2*j]:=random(clred+clwhite);
{малювання вази}
With Canvas do begin
Brush.Color:=clTeal; //колір пензля – синьо-зелений
Ellipse(80,260,180,300); //еліпс - підніжка вази
Polygon([Point(120,280),Point(130,200),Point(140,280)]); //багатокутник - ніжка вази
chord(80,20,180,220,80,120,180,120); //чаша вази (метод chord)
{нанесення діагональної сітки на елементи вази}
Brush.Color:=clWhite; //колір пензля – білий
Brush.Style:=bsDiagCross; //стиль пензля – діагональна сітка
// заливання поточними параметрами пензля елементів вази
FloodFill(100,280, Pixels[100,280],fsSurface);
FloodFill(100,140, Pixels[100,140],fsSurface);
FloodFill(130,260, Pixels[130,260],fsSurface);
{малювання стебел}
Pen.Width:=3; //товщина пера – 3 пікселя
Pen.Color:=clGreen; //колір пера – зелений
Arc(120,60,-80,180,120,120,20,60); //стебла - дуги еліпсів
Arc(140,60,340,180,240,60,140,120);
MoveTo(100,120); // переміщення пера без промальовування в // точку з заданими координатами
LineTo(80,40); // пряма лінія
MoveTo(130,20);
LineTo(130,120);
MoveTo(180,20);
LineTo(160,120);
{малювання квітів}
Font.Color:=clRed; //колір шрифту – червоний
Font.Size:=80; //розмір шрифту
TextOut(-3,10,'*'); //вивід тексту
TextOut(50,-15,'*');
TextOut(103,-30,'*');
TextOut(152,-30,'*');
TextOut(210,10,'*');
TextOut(210,10,'*');
end;
end;
end;
Слід зауважити, що властивість Canvas може бути застосовна не тільки до компонента класу ТImage, але і до інших компонентів, що мають канву. Переконатися в цьому можна, замінивши в тексті процедури TForm1.BitBtn1Click усі ідентифікатори Image1 на Form1. Тоді картинка буде зображуватися безпосередньо на канві форми. Якщо аналогічним чином у тексті даної процедури замінити Image1 на DrawGrid1, попередньо розташувавши компонент класу ТDrawGrid із закладки Additional на формі, одержимо ту ж картинку, але вже на канві зазначеного компонента.
Для отримання зображення книги (рис. 2.1) напишемо такий оброблювач події OnCliсk для кнопки BitBtn2:
procedure TForm1.BitBtn2Click(Sender: TObject);
begin
{малювання задньої частини обкладинки книги}
Image2.Canvas.pen.Color:=clBlack; //колір пера – чорний
Image2.Canvas.pen.Width:=1; // товщина пера – 1 піксель
Image2.Canvas.Brush.Color:=clSilver; //колір пензля – срібний
Image2.Canvas.Rectangle(45,35,155,205); //прямокутник – // задня частина обкладинки книги
{малювання верхньої та бічної сторін}
Image2.Canvas.Brush.Color:=clGray; //колір пензля – сірий
Image2.Canvas.Polygon([Point(25,60),Point(45,40),Point(150,40), Point(133,60)]); //багатокутник - верхня частина книги
Image2.Canvas.Polygon([Point(133,60),Point(150,40),Point(150,200),
Point(130,220)]); //багатокутник - бічна частина книги
{малювання лицьової обкладинки}
Image2.Canvas.Brush.Color:=clSilver; //колір пензля – срібний
Image2.Canvas.Rectangle(20,60,140,220); //прямокутник - // лицьова частина обкладинки
Image2.Canvas.RoundRect(20,60,140,220,80,80); //прямокутник // із закругленими кутами на лицьовій частині книги
Image2.Canvas.Brush.Color:=clGreen; // колір пензля – зелений
Image2.Canvas.FloodFill(60,120,Image2.Canvas.Pixels[60,120],
fsSurface);//фарбування прямокутника із закругленими кутами
{вивід напису}
Image2.Canvas.Font.Color:=clYellow; //колір шрифту – жовтий
//вивід елементів тексту
Image2.Canvas.TextOut(50,80,'М.Булгаков');
Image2.Canvas.TextOut(47,120,'М А С Т Е Р');
Image2.Canvas.TextOut(75,140,'И');
Image2.Canvas.TextOut(33,160,'М А Р Г А Р И Т А');
Image2.Canvas.TextOut(27,190,' * * * * * * * * * * * * * *');
{зображення переплетення}
Image2.Canvas.Arc(20,35,60,85,45,35,20,63); //дуга переплетення
Image2.Canvas.Brush.Color:=clSilver; //колір пензля – срібний
Image2.Canvas.FloodFill(30,40,Image2.Canvas.Pixels[30,40], fsSurface); // заливання переплетення
end;
end.
Після введення програмного коду, запустимо програму натисканням клавіші F9 на клавіатурі або відповідної піктографічної кнопки меню. Кликнемо на кнопках Квіти і Книга й отримаємо екранну форму, зображену на рис. 2.1.
Рис. 2.1. Результат відтворення зображення на канві об'єкта Тimage