Головна › ПЗ › Компонент відображення графічної інформації в Delphi. Презентація на тему "Відображення графічної інформації в Delphi". Список компонентів відображення графічної інформації

Компонент відображення графічної інформації в Delphi. Презентація на тему "Відображення графічної інформації в Delphi". Список компонентів відображення графічної інформації

ЛАБОРАТОРНА РОБОТА

ТЕМА: « Графіка уDelphi- Побудова найпростіших
геометричних фігур»

Короткі відомості з теорії

Delphi надає розробнику три способи відображення графіки:

побудова графіків під час роботи програми

використання заздалегідь створених графічних зображень

створення зображень за допомогою графічних компонентів

Для побудови графіків створено спеціальні класи, що надають інструменти та методи для малювання: інструменти описані у трьох класах – Tfont, Tpen, Tbrush; Область малювання та методи надає клас Tcanvas.

КласTfont– задає параметри шрифту, яким відображається текст на канві. Властивості класу описані у розділі «Основні властивості, доступні більшості компонентів».

КласTpen- Задає характеристики пера (олівця), за допомогою якого малюються лінії.

Властивостікласу Tpen:

Color:Tcolor – колір лінії (за замовчуванням – чорний)

Width:integer -товщина лінії в пікселах;

Style = (psSolid, psDash, psDot, psdashDot, psClear) – визначає стиль лінії (суцільна, штрихова, пунктирна, штрих-пунктирна, невидима)

КласTbrush– задає характеристики пензля, яким зафарбовуються поверхні зображення.

Властивостікласу Tbrush:

Color:Tcolor – колір пензля (за замовчуванням – білий)

Style- Орнамент пензля, може приймати значення:

BsSolid – суцільна розмальовка

BsClear – відсутність забарвлення

BsVertical – вертикальні лінії

BsBdiagonal – праві діагональні лінії

BsDiagCross – коса клітина

BsHorisontal – горизонтальні лінії

BsFdiagonal – ліві діагональні лінії

BsCross – клітина

КласTcanvas– визначає поверхню, на якій міститься зображення, що створюється, та інструменти, за допомогою яких створюється зображення: шрифт, олівець, пензель.

В якості робочої області (канви, «полотна») використовується вся клієнтська область форми (без заголовка, головного меню і ліній скролінгу форми), але можна всередині форми відводити менші робочі області за допомогою компонентів PaintBoxабо Image. Початок координати канви – верхній лівий кут робочої області, ширина робочої області визначається властивістю ClientWidth, висота - властивістю ClientHeight.

Властивостікласу Tcanvas:

Canvas:Tcanvas - визначає область малювання

Brush:Tbrush – пензель для забарвлення замкнутих фігур

Font:Tfont – шрифт для відображення тексту на канві

Pen:Tpen – олівець (перо) для малювання

PenPos:Tpoint – поточне положення невидимого курсору на канві

Зауваження : тип Tpoint – визначається так:

Type Tpoint = record

Pixels: Tcolor - задає кольори пікселів канви, Х,У - координати пікселя. Властивість Pixels зручно використовувати для побудови графіків за допомогою точок вибраного кольору.

Основні методи класу TCanvas

procedure MoveTo(x, y:integer); - Переміщає перо без малювання лінії в точку з координатами (х, у).

Procedure LineTo(x, y:integer); - Малює лінію від поточної точки до точки з координатами (х, у).

приклад : намалюємо діагональну лінію синього кольору на формі з верхнього лівого кута форми до правого нижнього кута.

Pen.color:= clblue;

MoveTo(0,0); LineTo(ClientWidth, ClientHeight);

procedure Rectangle(x1, y1, x2, y2: integer); - Малює прямокутник: х1,у1 - координати верхнього лівого кута; х2, у2 - координати правого нижнього кута.

приклад : намалюємо закращений у жовтий колір квадрат зі стороною 60 пікселів у середині форми.

var Xc,Yc: integer; //

Xc:=ClientWidth div 2;

Xy:=ClientHeight div 2;

Canvas.Brush.color:=clyellow;

Canvas.rectangle(xc-30,Yc-30,xc+30,Yc+30);

procedure Ellipse(x1, y1, x2, y2: integer); - малює еліпс, вписаний у прямокутник із зазначеними координатами.

приклад : намалюємо еліпс, вписаний у компонент PaintBox

PaintBox1.Canvas.Pen.Width:=4; //ширина лінії = 4 пікселі

PaintBox1.Canvas.Ellipse(0,0, PaintBox1. ClientWidth, PaintBox1. ClientHeight);

procedure Polygon(); - малює замкнутий багатокутник, заданий масивом координат.

приклад : намалюємо зафарбований ромб, що сполучає середини сторін форми.

Var Xc,Yc:integer; // координати центру клієнтської області форми

Xc:=ClientWidth div 2;

Xy:=ClientHeight div 2;

Canvas.Brush.Color:=Rgb(275,140,70); // помаранчевий колір зафарбування

Canvas.Polygon();

end;

Procedure Arc(x1, y1, x2, y2, x3, y3, x4, y4: integer); - Відображає дугу еліпса, обмеженого прямокутником (х1, у1, х2, у2). Дуга відображається з точки з координатами (х3, у3) до точки з координатами (х4, у4) протигодинникова стрілка.

приклад : намалюємо дугу еліпса, що з'єднує середину верхньої сторони компонента
PaintBox з серединою його правої сторони.

Procedure Tform1.Button1Click(Sender:Tobject);

Var X3, y3, x4, y4: Integer;

З PaintBox1 do

Canvas.Pen.Color:= clWhite;

Canvas.Pen.Width: = 3;

Canvas.rectangle(0, 0, PaintBox1.ClientWidth, PaintBox1.ClientHeight);

X3: = ClientWidth div 2;

X4: = ClientWidth;

Y4: = ClientHeight div 2;

Canvas.Pen.Color:= clMaroon;

Canvas.ARC(0, 0, PaintBox1.ClientWidth, PaintBox1.ClientHeight, x3, y3, x4, y4);

End;

procedure Chord(x1, y1, x2, y2, x3, y3, x4, y4: integer); - Малює хорду - пряму, що з'єднує 2 точки еліпса: точку з координатами (х3, у3) з точкою (х4, у4).

приклад : поставте у прикладі, наведеному для методу ARC, методу Chord та отримайте такий результат.

procedure Pie(x1, y1, x2, y2, x3, y3, x4, y4: integer); - Малює сегмент еліпса, що з'єднує центр еліпса з координатами (х3, у3) і (х4, у4).

приклад : представити у прикладі, наведеному для методу ARC, метод PIE та отримайте такий результат.

procedure TextOut(x,y:integer;Text:string); - виводить рядок, переданий у параметрі Text, прямокутник, верхній лівий кут якого заданий координатами х,у. Характеристики шрифту задаються інструментом Font.

приклад : напишемо назву побудованого графіка внизу форми

Canvas.Font.Height:=20 ; //висота символів 20 пікселів

Canvas.Font.Color:=clblue;

Canvas.TextOut(10, ClientHeight-24, 'графік функції SIN(X)');

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

Delphi пропонує низку готових компонентів, що дозволяють покращувати користувальницький інтерфейс. Ці компоненти розміщені на сторінці Additionalі Systemпалітри компонентів.

КомпонентImage(класTimage) – створено для відображення графічних зображень, які зберігаються у зовнішніх файлах з розширеннями:

Ico (іконка, піктограма);

Bmp (растрове зображення, бітова карта);

Wmf, .emf (метафайл);

Jpg, .jpeg (зображення, стиснуте за форматом JPEG).

Основні властивості :

Autosize:boolean – при значення true компонент підлаштовує свої розміри під розміри зображення, що завантажується; за промовчанням false.

Stretch:boolean – при значення true значення, що завантажується, займає всю область компонента; за промовчанням – false.

Canvas: Tcanvas - служить для малювання всередині компонента на етапі виконання програми.

Picture:Tpicture-визначає зображення, розміщене в компоненті.

Основні методикласу Tpicture:

Procedure LoadFromFile(Filename:string); - Завантажує в компонент зображення з файлу з ім'ям Filename.

Procedure SaveToFile(Filename:string); -Зберігає зображення з компонента у файл з ім'ям Filename.

КомпонентPaintBox - визначає прямокутну область малювання. Головна властивість - Canvas, доступні всі методи класу Tcanvas, самостійних властивостей немає.

приклад : намалюємо еліпс жовтого кольору, вписаний у компонент PaintBox1

Procedure Tform1Button1Click(sender:Tobject);

З PaintBox1.Canvas do

Brush.Color:=clyellow;

Ellipse(0,0,PaintBox1.ClientWidth, PaintBox1.ClientHeight);

end;

КомпонентBitBtn – растрова кнопка

Кнопка BitBtn, на відміну від стандартної, може окрім назви (Caption) містити зображення, яке задається властивістю. Glyph. Існує набір стандартних кнопок BitBtn, з визначеними властивостями (з певною картинкою, написом та призначенням) – тип стандартної кнопки вибирається через властивість Kind. Kind=(bkCustom, bkAbort,bkCancel, bkClose …)

Завдання №1

Створіть програму, яка містить на головній формі два компоненти Image і 4 кнопки ("Завантажити картинку", "Побудувати геометричну фігуру", "Змінити колір", "Вихід"), і дозволяє:

а) завантажувати в компонент Image1, вибране користувачем графічне зображення таким чином, щоб зображення займало всю область компонента Image.

б) під компонентом Image1 виводити напис «Це зображення з файлу.

(при будь-якому вимірі розмірів та положення компонентаImage1 напис повинен
перебувати строго під компонентом).

в) малювати всередині компонента Image2 геометричну фігуру: зафарбований сегмент еліпса, що з'єднує середину компонента Image із серединами нижньої та правої сторін компонента Image.

(за будь-якої зміни розмірів та положення компонентаImage2 фігура має будуватися правильно, тобто. згідно з завданням щодо компонентаImage2)

г) змінювати колір лінії фігури, що малюється в Image2, за бажанням користувача за допомогою компонента ColorDialog.

Завдання №2

Створіть програму, яка дозволяє розташувати в компоненті Image випадково кілька написів (наприклад, слово «Ура!»). Для реалізації використовуйте генератор випадкових чисел Randomize та функцію Random.

Розміри компонента Image, слово, що виводиться в Image і кількість слів – повинен вводити користувач.

Завдання №3

Створіть програму, яка дозволяє вибирати зі списку ListBox назву геометричної фігури та малювати вибрану фігуру в компоненті Image. Колір фігури вибирається із компонента RadioGroup.

Завдання №4

Розділіть компонент PaintBox1 на 4 рівні частини, зафарбуйте кожну частину різного кольору, наприклад: синій, жовтий, зелений, червоний.

Поруч із кожним кутом PaintBox1 напишіть координати даного кута (щодо початку координат форми, де знаходиться компонент PaintBox1).

Завдання №5

вибирати з компонента Radiogroup1 тип фігури, що малюється, з компонента Radiogroup2 - колір зафарбування і малювати в компоненті Image обрану фігуру.

Завдання №6

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

Розділіть компонент PaintBox1 на 2 рівні частини, всередині кожної частини намалювати еліпс, зафарбований у колір, вибраний користувачем ColorDialog.

Завдання №7

З віддайте додаток, що дозволяє:

вибирати зі списку ListBox назву геометричної фігури та малювати вибрану фігуру в компоненті Image. Фігура повинна бути зафарбована кольором, вибраним користувачем у компоненті ColorDialog, якщо у компоненті RadioGroup вибрано значення "Так".

Завдання №8

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

Розділіть компонент PaintBox1 на 4 рівні частини, всередині кожної частини намалюйте різну геометричну фігуру (еліпс, ромб, трикутник та прямокутник). Колір кожної фігури вибирає користувач у ColorGrid.

Завдання №9

вибирати зі списку ListBox назву геометричної
фігури (еліпс, ромб, прямокутник) та малювати
вибрану фігуру у компоненті Image. Розташування
фігури у компоненті Image (I чверть, II чверть,

III або IV чверть) і колір забарвлення фігури вибирається
із компонентів RadioGroup.

Завдання №10

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

Передбачити, що розмір сторони може бути текстом, може бути негативним числом і може перевищувати меншого розміру форми.

Розділіть компонент PaintBox1 на 4 рівні частини, всередині кожної частини намалюйте геометричну фігуру, обрану користувачем Combobox (еліпс, ромб, трикутник і прямокутник). Колір фігури вибирає користувач у ColorBox.

Завдання №11

Створіть програму, яка дозволяє:

вибирати з компонента Radiogroup положення малюваного

у компоненті Image прямокутного трикутника, задавати
колір забарвлення фігури або колір контуру в залежності від
увімкнення кнопок Checkbox. Вибір кольору робити через
компонент ColorGrid.

Завдання №12

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

Розділіть компонент PaintBox1 на 2 рівні частини, всередині однієї з частин намалюйте геометричну фігуру, обрану користувачем Combobox (еліпс, ромб, трикутник і прямокутник). Колір фігури вибирає користувач у ColorBox.

Наприклад, змінити колір форми можна так:

form1.Color:= ColorBox1.Colors;

Завдання №13

Створіть програму, яка дозволяє:

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

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

Завдання №14

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

Розділіть компонент PaintBox1 на дві рівні частини, всередині однієї частини намалюйте ромб, а всередині іншої частини намалюйте будь-який трикутник. Колір фігури вибирає користувач у ColorBox.

Наприклад, змінити колір форми можна так:

form1.Color:= ColorBox1.Colors;

Завдання №15

Створіть програму, яка дозволяє:

а) встановлювати розміри компонента Image по горизонталі та вертикалі однаковими та рівними числу, що вводиться користувачем з клавіатури;

(передбачити, що розмір сторони не може бути текстом, не може бути негативним числом і не може перевищувати меншого розміру форми)

б) ділити компонент Image на 4 рівні квадрати двома лініями синього кольору;

в) усередині кожного квадрата, що вийшов, малювати вписане в нього коло (колір кіл дозволити вибирати користувачеві через діалогове вікно вибору кольору).

Завдання №16

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

Розділіть компонент PaintBox1 на 9 рівних частин і зафарбуйте кожен прямокутник, що вийшов, у вигляді шахової дошки. Колір забарвлення вибирає користувач ColorBox.

Наприклад, змінити колір форми можна так:

form1.Color:= ColorBox1.Colors;

Завдання №17

На формі розташувати два компоненти Image та чотири кнопки: Колір лінії, Колір забарвлення, Ok та Вихід; та компонент Edit.

При натисканні на кнопку ОК в Image1 малюється квадрат зі стороною Х, а Image2 малюється прямокутний трикутник з рівними катетами, кожен з яких має довжину Х.

Вершина трикутника збігається з початком координат Image2. Одна з вершин квадрата збігається із початком координат Image1.

Кнопка ОК доступна лише тоді, коли вибрано колір лінії та колір забарвлення для малювання фігури.

Х – вибирає випадковим чином, за допомогою функції Randomі в компоненті Edit має відображатись значення величини Х.

Завдання №18

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

Розділіть компонент PaintBox1 на 4 рівні частини, всередині обраної користувачем частини, має будуватися зафарбоване коло, розмір якого встановлює користувач. Колір забарвлення користувач вибирає ColorBox.

Наприклад, змінити колір форми можна так:

form1.Color:= ColorBox1.Colors;

Для відображення графічної інформації в бібліотеці Delphi передбачені компоненти, список яких наведено в табл. 6.

Таблиця 6

Компоненти відображення графічної інформації

Компонент	Сторінка	Опис
Image (зображення)	Additional	Використовується для відображення графіки
PaintBox (вікно для малювання)	System	Використовується для створення на формі деякої галузі, в якій можна малювати
DrawGrid (таблиця малюнків)	Additional	Використовується для відображення у рядках та стовпцях нетекстових даних
Chart (діаграми та графіки)	Additional	Компонент належить до сімейства компонентів TeeChart, які використовуються для створення діаграм та графіків
Chartfx (діаграми та графіки)	ActiveX	Редактор діаграм та графіків
FIBook (сторінки Excel)	ActiveX	Компонент введення та обробки числової інформації
VtChart (діаграми)	ActiveX	Вікно побудови діаграм

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

Таблиці зображень – компоненти DrawGrid та StringGrid

Компонент DrawGridвикористовується для створення у додатку таблиці, яка може містити графічні зображення. Цей компонент подібний до компоненту StringGrid,оскільки останній є похідним від DrawGrid.Тому в DrawGridприсутні всі властивості, методи, події компонента StringGrid,крім які стосуються тексту, тобто. крім властивостей Cells, Cols, Rows, Objects.З цього погляду компонент StringGridмає істотно більші можливості, ніж DrawGrid,оскільки він може зберігати в осередках і зображення, і тексти. А якщо ви захочете внести текст до якихось осередків DrawGrid,то вам треба буде використовувати для цього методи виведення тексту на канву, що не дуже зручно.

Компоненти DrawGrid та StringGridмають канву Canvas,на якій можна розміщувати зображення.

Є метод Cell-Rect,який повертає область канви, відведену під задану комірку. Цей метод визначено як

function CellRect(ACol, ARow: Longint): TRect;

де ACol та ARow- Індекси стовпця і рядки, що починаються з 0, на перетині яких розташований осередок. Область, що повертається цією функцією, є областю канви, в якій можна малювати необхідне зображення. Наприклад, оператор

DrawGridl.Canvas.CopyRect(DrawGridl.CellRect(1,1),

BitMap.Canvas,Rect(0,0,BitMap.Height,BitMap.Width));

копіює методом CopyRectв комірку (1,1) таблиці DrawGridlзображення з компонента BitMap.Ця комірка є другою ліворуч і другою зверху в таблиці, оскільки індекси починаються з 0. Врахуйте, що якщо розміри комірки менше, ніж розмір зображення, що копіюється, то в комірці з'явиться тільки ліва верхня частина картинки.

Зображення на канві компонентів DrawGrid та StringGrid,як і на канві будь-якого компонента, схильне до стирання при перекритті вікна програми іншими вікнами або, наприклад, при згортанні програми.

Зручним способом занесення зображень у комірки DrawGridє використання оброблювача подій OnDrawCell.Ці події наступають кожної комірки таблиці в останній момент її перерисовки. Заголовок обробника має вигляд:

procedure TForml.DrawGridlDrawCell(Sender: TObject;

ACol, ARow: Integer; Rect: TRect; State: TGridDrawState)

Параметр Stateвказує стан комірки. Він є безліччю, яка може містити такі елементи: gdSelected- виділений осередок, gdFocused- осередок, що знаходиться у фокусі, gdFixed- осередок у фіксованій ділянці таблиці. Параметр Stateможна використовувати для різного характеру відображення осередків у різних станах.

Компонент Shape

Компонент Shapeтільки умовно може бути віднесений до засобів відображення графічної інформації, оскільки просто є різними геометричними фігурами, відповідним чином заштриховані. Основна властивість цього компонента - Shape(форма), яке може набувати значень:

StRectangle – прямокутник;

StSquare – квадрат;

StRoundRect - прямокутник із заокругленими кутами;

StRouhdSquare - квадрат із заокругленими кутами;

StEllipse – еліпс;

StCircle – коло.

Інша істотна властивість компонента - Brush(пензлик). Ця властивість є об'єктом типу TBrush,мають ряд підвластивостей, зокрема колір (Brush.Color)та стиль (Brush.Style)заливки фігури. Заливку при деяких значеннях Style можна бачити на рис. 3.2. Третя зі специфічних властивостей компонента Shape- Pen(Перо), що визначає стиль ліній.

Компонент Chart

Тепер розглянемо компонент Chart.Цей компонент дозволяє будувати різні діаграми та графіки, які виглядають дуже ефектно. Компонент Chartмає безліч властивостей, методів, подій, тому якщо всі їх розглядати, то цьому довелося б присвятити цілу главу. Тому обмежимося розглядом лише основних характеристик Chart.А з рештою ви можете ознайомитись у вбудованій довідці Delphi або просто випробувати їх, експериментуючи з діаграмами.

Компонент Chartє контейнером об'єктів Series- Спадкоємців класу TChartSeries.Кожен такий об'єкт представляє серію даних, що характеризуються певним стилем відображення: тим чи іншим графіком чи діаграмою. Кожен компонент Chartможе містити кілька серій. Якщо ви хочете відображати графік, то кожна серія відповідатиме одній кривій на графіку. Якщо ви хочете відображати діаграми, то для деяких видів діаграм можна накласти один на одного кілька різних серій, для інших (наприклад для кругових діаграм) це, ймовірно, виглядатиме некрасиво. Однак і в цьому випадку ви можете задати один компонент Chartкілька серій однакових даних з різним типомдіаграми. Тоді, роблячи в кожний момент часу активною одну з них, ви можете надати користувачеві вибір типу діаграми, що відображає дані, що його цікавлять.

Розмістіть один або два компоненти Chartна формі і подивіться властивості, що відкрилися в Інспекторі Об'єктів. Наведемо пояснення деяких із них.

AllowPanning - визначає можливість користувача прокручувати спостерігається частину графіка під час виконання, натискаючи праву кнопку миші. Можливі значення: pmNone - прокручування заборонено, pmHori/ontal, pm Vertical або pmBoth - дозволено відповідно прокручування лише у горизонтальному напрямку, лише у вертикальному чи обох напрямках.

AhowZoom – дозволяє користувачеві змінювати під час виконання масштаб зображення, вирізуючи фрагменти діаграми або графіка курсором миші. Якщо рамка фрагмента малюється праворуч і донизу, цей фрагмент розтягується по всьому полі графіка. А якщо рамка малюється вгору та вліво, то відновлюється вихідний масштаб.

Title – визначає заголовок діаграми.

Foot – визначає підпис під діаграмою. За замовчуванням відсутня. Текст підпису визначається під властивістю Text.

Frame – визначає рамку навколо діаграми.

Поряд з багатьма з перерахованих властивостей в Інспекторі Об'єктів розташовані кнопки з трьома крапками, які дозволяють викликати ту чи іншу сторінку Редактора Діаграм - багатосторінкового вікна, що дозволяє встановити всі властивості діаграм. Виклик Редактора Діаграм можливий також подвійним клацанням на компоненті Chartабо клацанням на ньому правою кнопкою миші та вибором команди Edit Chart у спливаючому меню.

Зробіть подвійне клацання на верхньому компоненті Chart.Ви потрапите у вікно редактора діаграм на сторінку Chart, яка має кілька закладок. Насамперед вас буде цікавити на ній закладка Series. Клацніть на кнопці Add – додати серію. Ви потрапите у вікно, де ви можете вибрати тип діаграми або графіка. В даному випадку виберіть Pie – кругову діаграму. Скориставшись закладкою Titles, ви можете задати заголовок діаграми, закладка Legend дозволяє задати параметри відображення легенди діаграми (списку позначень) або взагалі прибрати її з екрану, закладка Panel визначає вид панелі, на якій відображається діаграма, закладка 3D дає вам можливість змінити зовнішній вигляд вашої діаграми нахил, зсув, товщину і т.д.

Коли ви працюєте з Редактором Діаграм та вибрали тип діаграми, у компонентах Chartна вашій формі відображається її вигляд із занесеними до неї умовними даними. Тому ви відразу можете спостерігати результат застосування різних опцій до вашої програми, що дуже зручно.

Сторінка Series, також має ряд закладок, дає можливість вибрати додаткові характеристики відображення серії. Зокрема, для кругової діаграми на закладці Format корисно включити опцію Circled Pie, яка забезпечить за будь-якого розміру компонента Chart відображення діаграми у вигляді кола. На закладці Marks кнопки групи Style визначають, що буде написано на ярликах, що належать до окремих сегментів діаграми: Value – значення, Percent – відсотки, Label – назви даних тощо.

Ви можете, якщо хочете, додати на цей компонент Chart ще одну тотожну серію, натиснувши на закладці Series сторінки Chart кнопку Clone, а потім для цієї нової серіїнатиснути кнопку Change (змінити) та вибрати інший тип діаграми, наприклад Bar.

Вийдіть з Редактора Діаграм, виділіть у вашому додатку нижній компонент Chart і повторіть завдання властивостей за допомогою Редактора Діаграм. В даному випадку вам потрібно буде задати дві серії, якщо хочете відображати на графіку дві криві та вибрати тип діаграми Line. Оскільки мова йдепро графіки, ви можете скористатися закладками Axis та Walls для завдання координатних характеристик осей та тривимірних граней графіка.

На цьому проектування зовнішнього виглядупрограми завершується. Залишилося написати код, який задає дані, які ви хочете відображати. Для тестової програми давайте поставимо в круговій діаграмі деякі константні дані, а графіках - деякі функції.

Для завдання значень необхідно використовувати методи серій Series. Зупинимося лише з трьох основних методах.

Метод Clearочищає серію від занесених раніше даних.

Метод Add:

Add(Const AValue:Double; Const ALabel:String; AColor:TColor) ,

дозволяє додати до діаграми нову точку. Параметр AValueвідповідає значення, що додається, параметр ALabel- мітка, яка відображатиметься на діаграмі та в легенді, AColor- Колір. Параметр ALabel- не обов'язковий, його можна поставити порожнім: ' '. Метод AddXY:

AddXY(Const AXValue, AYValue: Double; Const ALabel: String; AColor: TColor)

дозволяє додати нову точку до графіка функції. Параметри AXValueі AYValueвідповідають аргументу та функції. Параметри ALabel та AColorті ж, що й у методі Додати.

Таким чином, процедура, що забезпечує завантаження даних у нашому прикладі, може мати вигляд:

const Al = 155; A2 = 251; A3 = 203; A4 = 404; var i:word; begin

With Seriesl do begin

Add(Al,"Цех l",clYellow);

Add(A2, "Цех 2", clBlue);

Add(A3, "Цех 3", clRed);

Add(A4,"Цех 4",clPurple); end;

Series2.Clear; SeriesS.Clear; for i:=0 to 100 do begin

Series2.AddXY(0.02*Pi*i,sin(0.02*Pi*i)

SeriesS.AddXY(0.02*Pi*i,cos(0.02*Pi*i) end;

ClRed); clBlue);

Оператори Clearпотрібні, якщо під час роботи програми ви збираєтеся оновлювати дані.

На цьому ми закінчимо знайомство з компонентом Chart.Щоправда, ми розглянули лише невелику частину його можливостей.

«Відображення графічної інформації в Delphi» План теми: 1.С З пппп оооо сссс оооо бббб ыыыы в у в ыыыы ввввв оооо дддд аааа г г г ррррр ааа фффф ииии чччйей оооо рррр мммм аааа ццц ииии ииии в в в д D D D D eeee llll pppp hhhh iiii О О тттт ооо бббб рррр аааа жжжж їїїї нннн ііііїїї до к к аааа рррр тттт иио нннн аа жжжж їїїї нннн ііііїїї г г г г ееее оооо мммм ееее тттт рррр ииии чччч ееее сссс кккк иииии хххх фффф ииии гггг уууу рррр П Поооо сссс тттт ррррр ооооее нннн ииии ееее ггв гг і і і і д д д д ІІІІ аааа рррррррр аааа мммм мммм.

1. Методи виведення графічної інформації. У Delphi існує кілька способів виведення графічної інформації: Висновок заздалегідь приготовлених зображень (компоненти Image, Shape); П Побудова графіків та діаграм (компонент Chart та ін.); Формування зображень програмним способом (об'єкт Canvas).

2.Отображение 2.Отображение картинок. Відображення картинок за допомогою компонента Image ми розглянули в оооо дддд нннн оооо ййййй і і і і зззз п п п прррр її дддд ыыыы дддд ууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууущ щщщщиииии хххх т т теееемммм. найпростішої анімаціїшляхом періодичної зміни зображення, що відображається в компонентах Image. ПППП її її рррр її її йййй ттттіііі н н н н аааа п п п прррр ииии мммм ееее рррр.

3. Відображення 3. Відображення геометричних фігур. І з кількох компонентів Shape можна створювати нескладні малюнки. П Програмно змінюючи положення (. Left,. Top) розмір (. Width,. Height) і колір (Brush. Color) компонентів Shape в малюнку можна здійснити елементи найпростішої анімації. Р Р Р Р аааа сссс сссс мммм оооо тттт рррр їїїї ттттьььп п п пррррііііі мммм їїїї рррр.

4.Побудова 4.Побудова графіків та діаграм. Діаграми призначені для наочнішого представлення масивів чисельних даних, їх візуального відображення та аналізу. ПППП рррр ииии мммм ееее рррр.... Для побудови діаграм у Delphi є кілька компонентів, одне із них компонент Chart (розділ TeeChart Std).

Графіків та діаграм. Дані для відображення зазвичай передаються Chart програмно, приклад: Series1.Clear; (очистити серію) for i:=1 to N do Series1.addxy(i, A[i], clGreen); Значення по осі X Значення по осі Y Підпис по осі X Колір даних на діаграмі РР аааа сссс сссс мммм оооо тттт рррр їїїї тттт ььь п п п прррріііі мммм їїєї рррр п п оооо сссс тттрр рррр аааа фффф ииии кккк аааа фф ф ф фуууу ннннн кккк цццц ииііііііі y y y y y = = = = S S S S iiiii nnnn (((((xxxx))))

Далі: Лабораторна робота «««« ТОВО тттт оооо бббб рррр аааа жжжж ееее нннн ииии ееее к к к к аааа рррр ттттііии нннн оооо кккк і і і г г г геееоооочмм ІІІІ хххх фффф ииии гггг уууу рррр, и и и и хххх а а а ннннииииии мммм аааа ццц ииии яяяяя»»»»....Завдання: 1) Розробити додаток для здійснення найпростішої анімації шляхом періодичної зміни відображуваної картини. (Кількість картинок не менше трьох, картинки підібрати самостійно).

Далее: Лабораторная работа «««« ПППП оооо сссс тттт рррр оооо ееее нннн ииии ееее г г г г рррр аааа фффф ииии кккк оооо вввв и и и и д д д д ииии аааа гггг рррр аааа мммм мммм »»»».. ..Завдання: 1)М одіфікувати додаток з лабораторної роботи 9 (Відображення даних у таблиці). Додати можливість відображення деяких даних із таблиці на гістограмі або круговій діаграмі. 2) Побудувати графік заданої функції.

Бібліотека візуальних компонентів (англ. Visual Component Library, VCL) Delphi для відображення графічної інформації надає нам такі візуальні компоненти: Image (зображення), PaintBox (вікно для малювання), DrawGrid (таблиця малюнків), Chart (діаграми та графіки), Animate ( виведення відеокліпів), а також форма Form. Ці компоненти мають властивість Canvas (про нього розказано вище), який дає доступ до кожного пікселя. Звичайно, малювати попіксельно для роботи з графікою Delphi не доводиться, система Delphi надає потужні засоби роботи з графікою.

Розглянемо наведені вище компоненти докладніше:

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

Є об'єктом класу TImage. Використовується для виведення на екран зображень, які зчитуються з графічних файлів. За умовчанням виводить на поверхню форми зображення представлених у форматі *.bmp. Для виведення зображень у форматі jpg необхідно в дерективі uses підключити модуль JPEG. Знаходиться у вкладці Additional Палітри компонентів.

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

Малюнок 9 - Компонент Image на формі

Для відкриття діалогу для вибору потрібного зображення необхідно виконати наступне за допомогою Object Inspector. Для цього знаходимо властивість Picture та ліворуч від нього натискаємо на три точки. Відкривається вікно Picture Editor і в ньому вибираємо завантажити (Load), у вікні вибираємо файл зображення.

Також це можна здійснити програмно шляхом виклику методу LoadFromFile властивості Picture:

Image1.Picture.LoadFromFile("name_pic.jpeg") ;

де name_pic.jpeg – ім'я файлу.

Таблиця 8 – Основні властивості компонента Image

Властивість		Опис
		Зображення, що відображається в полі компонента
	Розмір компонента. Якщо ці розміри менші за розмір ілюстрації, а значення властивостей Strech, AutoSize і Proportional рівні False, то відображається частина зображення
	Дозволяє автоматично масштабувати зображення без спотворення. Для виконання масштабування значення властивості AutoSize має бути рівним False
	Дозволяє автоматично масштабувати (стискати або розтягувати) зображення відповідно до розміру компонента Image. Якщо розмір компонента не пропорційний розміру зображення, зображення буде спотворено
	Дозволяє автоматично змінювати розмір компонента відповідно до розміру зображення
	Дозволяє визначати розташування зображення в полі компонента Image по горизонталі, якщо ширина зображення менша від ширини компонента.
	Поверхня, що дозволяє вивести графіку
	Вказує прозорий колір фону зображення

Приклад 1: Написати програму для перегляду зображень за допомогою компонента Image. Програма повинна мати такі можливості:

· Переглядати зображення, що знаходяться в папці;
· Переглядати зображення в повному розмірі або у форматі, що найбільше підходить для розмірів вікна;
· керувати файлами зображень, а також друкувати, зберігати, видаляти та змінювати зображення;
· При необхідності відкривати зображення у програмі редагування;

Рисунок 10 – Вікно програми до її запуску

Створення проекту:

1. Створити папку для файлів програми та запустити інтегроване середовище розробки Delphi.
2. Додати на форму компоненти:

Спочатку на формі розмістимо компонент Image, основний компонент з яким нам доведеться працювати. Крім нього, нам знадобляться такі компоненти:

· ScrollBox Він необхідний у разі, коли у повнорозмірному режимі зображення вийде за межі Image. Його властивості Aling присвоюємо значення alClient щоб його розміри змінювалися пропорційно з розмірами вікна. І на ньому розміщуємо компонент Image;
· Також додамо компоненти-діалоги SavePictureDialog та OpenPictureDialog, призначені для збереження та відкриття зображень. Перший нам необхідний для копіювання зображення у вибрану директорію, друга – для виклику діалогу відкриття графічного файлу. Розташовані вони на сторінці Dialogs Палітри компонентів. Ще з цієї сторінки нам знадобиться компонент PrintDialog, необхідний для виклику діалогу вибору принтера для друку.
· Додамо MainMenu для додавання до програми головного меню та XPManifest для більш барвистого оформлення
· Також нам необхідно десь зберігати імена зображень, що лежать у робочій директорії. Для цього зручний компонент ListBox, який при обробці події Create форми Form1 можна приховати.
· Для розміщення кнопок навігації та зручної роботи з ними додамо панель Veil, на якій і розмістимо ці кнопки (Попереднє зображення, Наступне зображення, Справжній розмір, Підігнати розмір, Видалити, Копіювати, Друк, Редагувати). Як компонент для них вибраний SpeedButton.
· Додаємо таймер для вилову натискань клавіш «Вліво» (попереднє зображення), «Вправо» (наступне зображення) та клавіші «Del» (видалення зображення).
· І ще один компонент - ProgressBar, що відображає процес завантаження великих файлів.
3. Написати код обробки події натискання на кнопки (Попереднє зображення, Наступне зображення, Справжній розмір, Підігнати розмір, Видалити, Копіювати, Друк, Редагувати). Написати код обробки події натискання на пункти меню MainMenu (Вихід, Відкрити, Закрити, Створити).
4. Встановити початкові установки створення форми. Двічі клацнути мишею по вільному місцюформи і написати код процедури procedure TForm1.FormCreate(Sender:TObject), див. код модуля в Додатку 1.
5. Написати процедури такого виду:

procedure FindFileInFolder(path, ext: string);

Ця процедура сканує папку path на наявність файлів за маскою ext.

Повний листинг коду модуля програми міститься у Додатку 1 (Лістинг програми 3).

1. Перерахуйте можливості компонента Image.
2. Об'єктом якого класу є компонент Image?
3. 3. Який тип файлів підтримує компонент Image?
4. 4. Перелічіть основні властивості компонента Image.
5. 5. Яка властивість зберігає зображення компонента Image?

Опис презентації з окремих слайдів:

1 слайд

Опис слайду:

2 слайд

Опис слайду:

Середовище візуального програмування Delphi, як і Windows, підтримує графічний інтерфейскористувача (GDI – Graphic Delphi Interface). У Delphi існує два способи виведення графічної інформації: виведення заздалегідь підготовлених зображень; малювання із програми.

3 слайд

Опис слайду:

Перший спосіб заснований на використанні компонентів Image та Shape. Можна скористатися готовою картинкою (піктограмою) або створити їх самостійно, використовуючи Редактор Image Editor. Другий спосіб це формування зображень програмним способом, використовуючи об'єкт Canvas.

4 слайд

Опис слайду:

Delphi має у своєму розпорядженні спеціальний об'єкт, який оформлений як властивості Canvas. Воно доступне лише під час роботи програми, так що керувати ним можна лише з програми, написавши потрібний кодмовою Object Pascal. Якщо об'єкт має властивість Canvas, на його поверхні можна малювати. Найбільш підходящими кандидатами на цю роль є сама форма і спеціальний компонент PaintBox.

5 слайд

Опис слайду:

Об'єкт Canvas Властивості: Pen (Перо) – властивість для малювання ліній та меж геометричних фігур. Перо слідує командам графічного курсору і, своєю чергою, має свої вкладені властивості: Color – визначає колір лінії (за умовчанням чорний); Mode – стиль малювання (має безліч значень, які тут не наводяться); Style – стиль лінії, який може набувати значень: рsSolid – суцільна (за замовчуванням); рsDosh - штрихова; рsDot – пунктирна; рsDoshDot - штрих пунктирна (та ін. властивості); Widh – товщина лінії (за замовчуванням 1 піксель);

6 слайд

Опис слайду:

Brush (Пензель) – властивість для заповнення фігур, що мають такі вкладені властивості: Color – колір пензля (за замовчуванням – білий); Style – орнамент пензля, який може набувати значень: bsClear – суцільна розмальовка; bsHorizontal - горизонтальні лінії; bsVertical – вертикальні лінії; bsFDiagonal – ліві діагональні лінії; bsBDiagonal – праві діагональні лінії; bsCross – клітина; bsDiagCross - коса клітина;

7 слайд

Опис слайду:

Font (Шрифт) – властивість виведення тексту, має такі вкладені властивості: Color – колір символів; Height – висота шрифту у пікселях; Name – ім'я шрифту; Size – розмір шрифту; Style – стиль шрифту, який може набувати таких значень: fsBold – напівжирний; fsItalic - курсив; fsUnderline – підкреслений; fsStrikeOut – перекреслений;

8 слайд

Опис слайду:

PenPos (Позиція пера) – властивість для зберігання поточної позиції малювання (визначає положення пера в області малювання Наразічасу); Pixels – властивість-масив для запису та зчитування координат окремих точок області малювання («полотна»).

9 слайд

Опис слайду:

Методи об'єкта Canvas MoveTo(x,y: integer) –переміщає перо з поточної позиції в точку із заданими координатами х, без малювання лінії; LineTo(х.у: integer) -переміщає перо з поточної позиції в точку із заданими координатами х, з прочерчиванием лінії; Arc (х1, у1, х2, у2, х3, у3, х4, у4: integer) - Малює дугу еліпса, вписаного в прямокутник з координатами (х1, у1) і (х2, у2). Дуга визначається радіусами еліпса, що проходять через точки (х3, у3) та (х4, у4);

10 слайд

Опис слайду:

Chord (х1, у1, х2, у2, х3, у3, х4, у4: integer) - малює хорду еліпса за описом, наведеним для методу Arc; Ellipse(х1, у1, х2, у2: integer) – малює еліпс, вписаний у прямокутник з лівим верхнім кутом у точці (х1, у1) та нижнім правим кутом у точці (х2, у2); FillRect(Rect (х1, у1, х2, у2: integer)) – заповнює прямокутник кольором, заданим у поточному пензлі (Brush). Використовує функцію Rect, яка представляє прямокутник із заданими координатами;

11 слайд

Опис слайду:

FloodFill(х,у: integer; Color: TColor; FillStyle: TFillStyle) – заповнення поточним кольором, заданим у властивості Brush: при FillStyle=fsBorder – замкнутій області від точки з координатами х, у до межі, визначеної кольором Color; при FillStyle=fsSurface – та ділянка поверхні, яка має колір Color; Pie (х1, у1, х2, у2, х3, у3, х4, у4: integer) - малює сектор еліпса, вписаного в прямокутник з координатами (х1, у1) і (х2, у2). Сектор визначається двома радіусами еліпса, що проходять через точки (х3, у3) та (х4, у4);

12 слайд

Опис слайду:

Polyline (Points: array of TPoint) - малює ламану лінію, послідовно з'єднуючи точки масиву Points; Polygon (Points: array of TPoint) – викреслює багатокутники, послідовно з'єднуючи точки масиву Roints. Відрізняється від методу Polyline тим, що автоматично з'єднує кінець ламаної з її початком; Rectangle (х1, у1, х2, у2: integer) – малює прямокутник з лівим верхнім кутом у точці (х1, у1) та нижнім правим кутом у точці (х2, y2);

13 слайд

Опис слайду:

Retresh – метод викликається за необхідності перемальовування зображення; RoundRect (х1, у1, х2, у2, х3, у3: integer) - малює прямокутник із закругленими кутами. Кути малюються як чверті еліпса із шириною х3 та висотою у3; TextOut (х, у:integer, Text:String) – виведення тексту, вказаного у параметрі Text. Текст вписується у прямокутник, верхній лівий кут якого має координати х, у.

Популярне в рубриці: