Компоненти відображення графічної інформації. Презентація на тему "Відображення графічної інформації в Delphi". Короткі відомості з теорії
Для відображення графічної інформації в бібліотеці 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 це не тільки лінії та малюнки, але також і друк текстових документів. Тому в Delphi роботіз графікоюпотрібно приділити трохи часу. Робота з графікою в Delphiпередбачає звернення до канви - властивості Canvas компонентів. Canvas Delphiце полотно, яке дозволяє програмісту мати доступ до кожної своєї точки (пікселу), і немов художнику відображати те, що потрібно. Звичайно, малювати попіксельно для роботи з графікоюу Delphi не доводиться, система Delphi надає для потужні засоби роботи з графікою, що полегшують завдання програміста.
У роботі з графікою в Delphi у розпорядженні програміста знаходяться канва (полотно, полотно - властивість Canvas Delphi компонентів), олівець (властивість Pen), пензель (властивість Brush) того компонента чи об'єкта, у якому передбачається малювати. У олівця Penта пензлі Brushможна змінювати колір (властивість Color) та стиль (властивість Style). Доступ до шрифтів надає властивість канви Font. Ці інструменти дозволяють відображати як текст, так і досить складні графіки математичного та інженерного змісту, а також малюнки. Крім цього, робота з графікоюдозволяє використовувати у Delphi такі ресурси Windowsяк графічні та відеофайли.
Звичайно, не всі компоненти Delphi мають ці властивості. На вкладці Additionalрозташований спеціалізований компонент TImageспеціально призначений для малювання, але також властивість Canvasмають, наприклад, такі компоненти як ListBox, ComboBox, StringGrid, а також сама Форма, яка розміщує наші компоненти! Крім того, для друку документів Delphi звертається до якості Canvas такого об'єкта як принтер.
Основна властивість такого об'єкту як Canvas Delphi - Pixelsтипу TColor, тобто це двовимірний масив точок (пікселів), що задаються своїм кольором. Малювання на канві відбувається у момент присвоєння будь-якій точці канви заданого кольору. Кожному пікселю може бути наданий будь-який доступний для Windows колір. Наприклад, виконання оператора
Image1.Canvas.Pixels:=clRed;
Приведе до малювання червоної точки з координатами. Дізнатися колір пікселя можна зворотним присвоєнням:
Color:=Image1.Canvas.Pixels;
Тип TColorвизначено як довге ціле (LongInt). Його чотири байти містять інформацію про частини синього (B), зеленого (G), та червоного (R) кольорів. У 16-річній системі це виглядає так: $00BBGGRR. Частка кожного кольору може змінюватися від 0 до 255. Тому, щоб відобразити максимально червону точку, їй потрібно привласнити колір $000000FF.
Для стандартних кольорів у Delphi визначено набір текстових констант. Побачити його можна, відкривши в Інспекторі Об'єктів властивість Color, наприклад тієї ж Форми.
Наступна таблиця містить деякі властивості та методи канви:
| Процедура TextOut(X, Y: Integer; const Text: WideString); Здійснює виведення рядка Textпочинаючи з (X, Y) - лівого верхнього пікселя тексту. |
| Властивість TextWidth( var Text: String): Integer; Містить довжину рядка Textу пікселах. |
| Властивість TextHeight( var Text: String): Integer; Містить висоту рядка Textу пікселах. |
| Процедура MoveTo (X, Y: Integer); Переміщення позиції до пікселя з адресою (X, Y). |
| Процедура LineTo (X, Y: Integer); Малює пряму лінію з точки поточної позиції до пікселя з адресою (X, Y). Адреса (X, Y) стає точкою поточної позиції. |
| Процедура FillRect( const Rect: TRect); Заповнює прямокутник Rectна полотні за допомогою поточного пензля. Може використовуватися, зокрема, для стирання частини зображення на полотні. |
Напишемо, використовуючи лише ці методи канви, додаток для зображення на канві компонента Imageтексту, що вводиться в компонент Memo:
Перше, що ми зробимо, це ініціалізацію змінних під час старту програми. Необхідно визначити розміри області малювання (створимо для цього глобальну змінну Rect типу TRect) та зробити колір тла Imageбілим:
procedure TForm1.FormCreate(Sender: TObject);
begin
Rect.Left:=0;
Rect.Top:=0;
Rect.Right:=Image1.Width;
Rect.Bottom:=Image1.Height;
Image1.Canvas.Brush.Color:=clWhite;
end;
Потім намалюємо рамку на всі боки Image:
procedure TForm1.page;
begin
with Image1.Canvas do
begin
MoveTo(0, 0);
LineTo(Image1.Width-1, 0);
LineTo(Image1.Width-1, Image1.Height-1);
LineTo(0, Image1.Height-1);
LineTo(0, 0);
end;
end;
Спробуймо, що вийшло. Все працює, але рамка поки що не виводиться. Тому додамо процедуру pageу процедуру FormCreate. Тепер гарно. Далі напишемо просту процедуру стирання, очищення. Її потрібно буде викликати перед будь-яким оновленням зображення, інакше попереднє та наступне зображення перекриватимуться.
procedure TForm1.clearing;
begin
Image1.Canvas.FillRect(Rect); //Прямокутник Rectзаповнюється білим кольором, зображення стирається.
end;
Тепер настала черга безпосередньо процедури виведення тексту. Почнемо виводити текст від точки (3, 3) – верхнього лівого кута аркуша, з невеликим відступом у 3 пікселі. Кожен наступний рядок будемо зміщувати на висоту рядка:
procedure TForm1.prn;
var i: Integer;
begin
with Image1.Canvas do
for i:=1 to Memo1.Lines.Count do
TextOut(3, 3+(i-1)*TextHeight("A"), Memo1.Lines);
end;
Тепер все готове для виведення тексту. Робити це будемо за подією OnChange:
procedure TForm1.Memo1Change(Sender: TObject);
begin
clearing;
prn;
page;
end;
Ну і насамкінець процедура зміни розміру шрифту:
procedure TForm1.Edit1Change(Sender: TObject);
begin
Memo1.Font.Size:=UpDown1.Position;
Image1.Canvas.Font.Size:=UpDown1.Position;
Memo1Change(Sender);
end;
Можна модифікувати цю програму для виведення тексту на друк. Для роботи з принтером необхідно підключити модуль Printers:
unit Unit1;
Interface
uses
Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
Dialogs, StdCtrls, Printers
;
При роботі з принтером як із полотном для початку друку викликається метод BeginDoc, потім проводиться висновок документа, завершується друк викликом методу EndDoc:
Printer.BeginDoc;
with Printer.Canvas do
begin
... Друк документа...
end;
Printer.EndDoc;
Ширина та висота полотна принтера доступні через властивості Printer.PageWidthі Printer.PageHeight. Закінчити друк на одній сторінці та почати друкувати на іншій можна за допомогою методу Printer.NewPage.
ЛАБОРАТОРНА РОБОТА
ТЕМА: «
Графіка у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 передбачені компоненти, список яких наведено в таблиці 4.1. Таблиця 4.1 Компоненти відображення графічної інформації Піктограма Компонент Сторінка Опис Image (зображення) Використовується для відображення графіки: піктограм, бітових матриць та метафайлів. PaintBox (вікно для малювання) Використовується для створення на формі деякої області, де можна малювати. DrawGrid (таблиця малюнків) Використовується для відображення у рядках та стовпцях нетекстових даних. Chart (діаграми та графіки) Компонент належить до сімейства компонентів TChart, які використовуються для створення діаграм та графіків. Канва Canvasне є компонентом, так що, строго кажучи, вона не повинна розглядатися в рамках цієї книги. Але оскільки багато компонентів, зокрема, форми, мають канву і канва надає можливість виводити різну графічну інформацію, деякі початкові відомості про канву все-таки доцільно дати. Канва є область компонента, на якій можна малювати або відображати готові зображення. Вона містить властивості та методи, що істотно спрощують графіку Delphi. Всі складні взаємодії з системою заховані для користувача, так що малювати в Delphi може людина, яка абсолютно не досвідчена в машинній графіці. Кожна точка канви має координати. Xі Y. Система координат канви, як і всюди Delphi, має початком лівий верхній кут канви. Координата Xзростає при переміщенні зліва направо, а координата Y- при переміщенні зверху донизу. Координати вимірюються у пікселях. Піксель - найменший елемент поверхні малюнка, з яким можна маніпулювати. Найважливіша властивість пікселя – його колір. Канва має властивість Pixels. Ця властивість є двомірним масивом, який відповідає за кольори канви. Наприклад, Canvas. Pixelsвідповідає кольору пікселя, 10-го зліва та 20-го зверху. З масивом пікселів можна поводитися як з будь-якою властивістю: змінювати колір, задаючи пікселю нове значення, або визначати його колір за значенням, що зберігається в ньому. Наприклад, Canvas. Pixels : = 0або Canvas. Pixels : = clBlack- Це завдання пікселя чорного кольору. Властивість Pixelsможна використовувати для малювання на канві. Спробуємо намалювати по пікселях графік синусоїди на канві форми. Для цього в обробник події форми OnPaint(промальовування) можна вставити наступний код: TForm1. FormPaint (Sender: TObject); var, Y: real; // координати функції, PY: longint; // координати пікселів begin: = clWhite; for PX: = 0 to ClientWidth do (X - аргумент графіка, : = PX*4*Pi/ClientWidth;: =Sin (X); (PY - координата пікселя, : =trunc (ClientHeight - (Y+1) * ClientHeight/2); (Встановлюється чорний колір вибраного пікселя (Про яскравість) ). Pixels: = 0; end;
Виконайте цей тестовий додаток і ви побачите результат, представлений на рис.4.1 а. Графік синусоїди вийшов, хоча й дуже хороший, т.к. розбивається на окремі точки – пікселі. Канва – об'єкт класу TCanvasмає безліч методів, які дозволяють малювати графіки, лінії, фігури за допомогою властивості Pen- Перо. Ця властивість є об'єктом, що у свою чергу має ряд властивостей. Одна з них вже відома вам властивість Color- Колір, яким наноситься малюнок. Друга властивість - Width(Ширина лінії). Ширина задається у пікселях. За замовчуванням ширина дорівнює 1. Властивість Styleвизначає вид лінії. Ця властивість може приймати такі значення: У канви є властивість PenPosтипу TPoint(див Спробуємо намалювати пером графік синуса з попереднього прикладу. У цьому випадку обробник події форми OnPaintможе мати вигляд: procedure TForm1. FormPaint (Sender: TObject); var, Y: real; // координати функції, PY: longint; // координати пікселів begin: = clWhite;. MoveTo (0,ClientHeight div 2); for PX: =0 to ClientWidth do (X - аргумент графіка, відповідний пікселю з координатою РХ): = PX*4*Pi/ClientWidth;: = Sin (X); (PY - координата пікселя, відповідна координаті Y): = trunc (ClientHeight - (Y+1) * ClientHeight/2); (Проводиться лінія на графіку). LineTo (PX, PY); Результат роботи програми у цьому варіанті ви можете бачити на рис.4.1 б. Як бачите, якість графіка суттєво покращилася. Перо може малювати як прямі лінії, а й постаті. Повний список методів канви, що використовують перо, див. у вбудованій довідці Delphi. А поки як приклад наведемо лише один з них - Ellipse, що малює еліпс або коло. Він оголошений як procedure Ellipse (X1, Y1, Х2, Y2: Integer); де параметри X1, Х2, Y1, Y2визначають координати прямокутника, що описує еліпс або коло. Наприклад, оператор Ellipse (10, 40, 20, 50); намалює коло з діаметром 10 і координатами центру (15, 45). Фігури в загальному випадку малюються не порожніми, а зафарбованими за допомогою канви Brush- пензлик. Властивість Brushє об'єктом, які мають у свою чергу ряд властивостей. Властивість Colorвизначає колір заповнення. Властивість Styleвизначає шаблон заповнення (штрихування). За замовчуванням значення Styleодно bsSolidщо означає суцільне зафарбовування кольором Color. У пера Penє ще одна властивість, яку ми поки що не розглядали. Ця властивість - Mode(Режим). За замовчуванням значення Mode = pmCopy. Це означає, що лінії проводяться кольором, заданим у властивості Color. Але можливі інші режими, в яких враховується не тільки колір Color, а також колір відповідних пікселів фону. Найцікавішим із цих режимів є режим pmNotXor- додавання з фоном по інверсному виключає АБО. Якщо встановлено цей режим, то повторне малювання тієї ж фігури на тому ж місці канви прибирає раніше намальоване зображення і відновлює кольори пікселів, які були до першого зображення фігури. Цю особливість режиму pmNotXorможна використовувати для створення простенької анімації. Достатньо намалювати щось, потім стерти намальоване, перемалювати трохи зміненим - і малюнок буде ожилим. Спробуйте зробити самі простеньку мультиплікацію - коло, що рухається. Почніть нову програму і в розділ implementationвставте оголошення X,Y: integer; Тим самим ви введете глобальні змінні Xі Y- поточні координати зображення. У подію форми OnPaintвставте оператори Brush. Color: = clWhite;: = clWhite;. Pen. Mode: = pmNotXor; Перший із цих операторів задає білий колір пензля. Brush. Значить ваше коло буде зафарбовано всередині білим кольором. Другий оператор задає білий колір фону поверхні форми. Третій оператор встановлює режим пера pmNotXor, який дозволить вам прати колишнє зображення, перш ніж намалювати нове. Навіть найпростіша мультиплікація потребує синхронізації. Інакше швидкість руху визначатиметься швидкодією комп'ютера. Тому перенесіть на форму компонент Timer- Таймер зі сторінки System. Цей компонент описаний у розділі 5.7 Можете подивитись там його докладний опис. А поки задайте його властивість Intervalрівним, наприклад, 30 (це час витримки в мілісекундах, але реальний часвитримки буде більше - див. розділ 5.7) та встановіть властивість Enabledрівним false(це означає, що таймер не запускатиметься автоматично в момент запуску програми). В обробник події цього компонента OnTimerвставте оператори // Стирання попереднього зображення. Ellipse (Х-5, Y, X+5, Y-1Q); (X); // Малювання нового зображення. Ellipse (Х-5, Y, X+5, Y-10); // Зупин при досягненні кінця форми if(X >= ClientWidth-20) then. Enabled: = false; Перший з цих операторів малює коло там, де вона була намальована раніше, тобто. стирає попереднє зображення. Останній оператор зупиняє зображення біля краю форми. Тепер перенесіть на форму кнопку Buttonі в обробник клацання на ній помістіть оператори Х: = 10;: = 100;. Ellipse (X-5, Y, X+5, Y-10); Enabled: = true; Перші два оператори задають початкові координати кола. Третій оператор малює коло у його початковому положенні, а четвертий - запускає таймер. Відтранслюйте програму, запустіть її на виконання, клацніть на кнопці. Ви побачите зображення кола, що переміщається формою зліва направо. А далі вже підключіть вашу фантазію і перетворіть цей не дуже цікавий додаток у щось цікавіше. На канві можна відображати не лише програмно створювані зображення, а й зображення, що зберігаються у графічних файлах. Тільки сама канва немає методу завантаження зображення з файла. Тому завантажувати файл треба в якийсь інший графічний об'єкт, здатний приймати інформацію графічних файлів. А потім переписувати зображення з цього об'єкта на канву за допомогою методу канви Draw. Його опис: Draw (X, Y: Integer; Graphic: TGraphic); Тут параметри Хі Yвизначають координати лівого верхнього кута розміщення зображення на канві, a Graphic- Об'єкт, що зберігає інформацію. Як такий об'єкт може виступати, наприклад, об'єкт типу TBitMapпризначений для зберігання бітових матриць. Давайте подивимося, як це виглядає практично. Відкрийте нову програму, перенесіть на форму компонент OpenPictureDialogзі сторінки Dialogs (це компонент діалогу відкриття графічних файлів - див. розділ 8.2 procedure TForm1. Button1Click (Sender: TObject); var: TBitMap; // Вибір користувачем графічного файлу
if OpenPictureDialog1. Execute then // Створення об'єкта BitMap типу TBitMap: =TBitMap. Create; // Перенесення зображення на канву форми. Draw (10, 10, BitMap); // Знищення об'єкта BitMap. Free; end;
Цей код створює тимчасовий об'єкт типу TBitMapз ім'ям BitMap. Потім викликається діалог відкриття графічного файлу OpenPictureDialog1і, якщо користувач вибрав файл, він завантажується в BitMapметодом LoadFromFile. Потім методом Drawзавантажене зображення копіюється на канву в область, з координатами верхнього лівого кута (10,10). Після цього тимчасовий об'єкт BitMapзнищується. Запустіть вашу програму і клацніть на його кнопці. Ви побачите, що ви можете завантажити будь-який графічний файл типу. bmpі він відобразиться на канві форми (див. рис.4.2 а). Графічні файли можна знайти в каталозі Images. У Delphi 5 та 4 він зазвичай розташований у каталозі. \program files\Common Files\Borland Shared. У Delphi 3 він розташований у каталозі. \program files\Borland\Delphi 3, а Delphi 1 - у каталозі Delphi 16. У каталозі Images є, зокрема, подкаталог \Images\Splash\16Color\, у якому зберігається файл, завантажений у прикладі рис.4.2 Ви створили непогану програму для перегляду графічних файлів. Але тепер спробуємо побачити його великий недолік. Не закриваючи своєї програми, перейдіть в якусь іншу програму, наприклад, поверніться до Delphi. Потім, нічого там не роблячи, знову перейдіть у свій додаток, що виконується. Якщо вікно програми, в яку ви йшли, повністю перекрило вікно вашої програми, то повернувшись до нього ви побачите, що картинка у вікні зникла. Якщо ж вікно вашої програми перекривалося лише частково, то повернувшись у свою програму ви, можливо, побачите результат, подібний до представленого на рис.4.2 б. Ви бачите, що якщо вікно якоїсь іншої програми перекриває на якийсь час вікно вашої програми, то зображення, намальоване на канві форми, псується. Подивимося, як можна усунути цей недолік. Якщо вікно було перекрито та зображення зіпсувалося, операційна система повідомляє додатку, що в оточенні щось змінилося і що додаток має вжити відповідних дій. Як тільки потрібне оновлення вікна, для нього генерується подія OnPaint. У обробнику цієї події (у разі події форми) потрібно перемалювати зображення. Перемальовка може проводитись різними способамизалежно від програми. У нашому прикладі можна було б винести оголошення змінної BitMap(оператор var BitMap: TBitMap) межі наведеної вище процедури, тобто. зробити цю змінну глобальною, розмістивши безпосередньо у розділі implementation. Оператор BitMap. Freeможна було б перенести в обробник події форми OnDestroy, що відбувається в момент закриття програми. Тоді протягом усього часу виконання вашої програми ви матимете копію картинки в компоненті BitMapі вам достатньо ввести в обробник події OnPaintформи всього один оператор: Draw (10, 10, BitMap); Зробіть це і побачите, що зображення на формі не псується при будь-яких перекриттях вікон. Крім розглянутого методу Drawканва має ще метод копіювання CopyRect: CopyRect (Dest: TRect; Canvas: TCanvas; Source: TRect); Метод копіює вказану параметром Sourceобласть зображення у канві джерела зображення Canvasу вказану параметром Destобласть даної канви. Тип TRect, Що характеризує прямокутні області Sourceі Dest, вже описувався у розділі 3.2 Наприклад, оператор CopyRect (MyRect2, Bitmap. Canvas, MyRect1); копіює на канву форми в область MyRect2зображення з області MyRect1канви компонента Bitmap. Копіювання методом CopyRectпроводиться у режимі, встановленому властивістю CopyMode. За умовчанням ця властивість має значення cmSrcCopyщо означає просто заміну зображення, що міститься раніше в області Destна копіюване зображення. Інші можливі значення CopyModeдозволяють комбінувати зображення, але їх розгляд виходить за рамки цієї книги. Цими основними відомостями про виведення графічної інформації на канву ми обмежимося. У розділі 3.2 Віконного компонента, що має властивість Canvas- Канва. Компоненти Image та PaintBox Компоненти Imageі PaintBoxє деякою обмеженою поверхнею з канвою, на яку можна заносити зображення, як це описано в розділі 4.2 Але крім цих можливостей у компонента Imageє властивості, що дозволяють працювати з різними типамиграфічних файлів. Підтримує три типи файлів - бітові матриці, піктограми та метафайли. Усі три типи файлів зберігають зображення; Відмінність полягає лише у способі їх зберігання всередині файлів та у засобах доступу до них. Бітова матриця (файл із розширенням. bmp) відображає колір кожного пікселя у зображенні. При цьому інформація зберігається таким чином, що будь-який комп'ютер може відобразити зображення з роздільною здатністю та кількістю кольорів, що відповідають його конфігурації. Знаки (файли з розширенням). ico) – це маленькі бітові матриці. Вони повсюдно використовуються для позначення значків додатків, у швидких кнопках, у пунктах меню, різних списках. Спосіб зберігання зображень у піктограмах схожий на зберігання інформації в бітових матрицях, але є і відмінності. Зокрема, піктограму неможливо масштабувати, вона зберігає той розмір, у якому було створено. Метафайли (Metafiles) зберігають не послідовність бітів, у тому числі складається зображення, а інформацію про спосіб створення картинки. Вони зберігають послідовності команд малювання, які можуть бути повторені при відтворенні зображення. Це робить такі файли, як правило, компактнішими, ніж бітові матриці. Компонент Imageдозволяє відображати інформацію, що міститься у графічних файлах усіх зазначених типів. Для цього слугує його властивість Picture- об'єкт типу TPicture.
Рис.4.3Вікно Picture Editor Щоб познайомитися з цією властивістю відкрийте нову програму і перенесіть на форму компонент Image. Розтягніть його або задайте його властивість Alignрівним alClientщоб він зайняв всю клієнтську область форми. Натисніть на кнопку з крапкою біля властивості Pictureу вікні Інспектора Об'єктів або просто зробіть подвійне клацання на Image. Перед вами відкриється вікно Picture Editor (рис.4.3), що дозволяє завантажити якість Pictureякийсь графічний файл (кнопка Load), а також зберегти відкритий файлпід новим ім'ям або у новому каталозі. Натисніть Load, щоб завантажити графічний файл. Перед вами відкриється вікно відкриття графічного файлу, представлене на рис.4.4 У міру переміщення курсору в списку по графічних файлах у правому вікні відображаються картинки, що містяться в них, а над ними - цифри, що характеризують розмір картинки. Ви можете вибрати потрібний графічний файл будь-якого типу. Нагадаємо, що графічні файли, що поставляються з Delphi, ви можете знайти в каталозі Images. У Delphi 5 та 4 він зазвичай розташований у каталозі. \program files\Common Files\Borland Shared. У Delphi 3 він розташований у каталозі. \program files\Borland\Delphi 3, а в Delphi 1 - у каталозі Delphi 16. Після завантаження файлу клацніть на OK у вікні Picture Editor і у вашому компоненті Imageз'явиться вибране зображення. Можете запустити вашу програму і помилуватися нею. Втім, ви бачите картинку, навіть не виконуючи додаток. Коли ви в процесі проектування завантажили зображення з файлу на компонент Image, він не просто відображає його, але й зберігає у додатку. Це дає вам можливість постачати вашу програму без окремого графічного файлу. Втім, як ми побачимо пізніше, у Imageможна завантажувати і зовнішні графічні файли у процесі виконання програми. Повернемося до розгляду властивостей компонента Image. Якщо встановити властивість AutoSizeв true, то розмір компонента Imageбуде автоматично підганятися під розмір картинки, що вміщена в нього. Якщо ж властивість AutoSizeвстановлено в false, то зображення може не поміститися в компонент або, навпаки, площа компонента може виявитися набагато більшою за площу зображення. Інша властивість - Stretchдозволяє підганяти компонент під розмір малюнка, а малюнок під розмір компонента. Встановіть AutoSizeв false, розтягніть або стисніть розмір компонента Imageта встановіть Stretchв true. Ви побачите, що малюнок займе всю площу компонента, але навряд чи реально встановити розміри Imageяк пропорційними розміру малюнка, то зображення спотвориться. Встановлювати Stretchв trueможе мати сенс лише для якихось візерунків, але не для картинок. Властивість Stretchне діє зображення піктограм, які можуть змінювати своїх розмірів. Властивість Center, встановлене в true, центрує зображення на площі Image, якщо розмір компонента більший за розмір малюнка. Розглянемо ще одну властивість - Transparent(Прозорість). Якщо Transparentодно true, то зображення в Imageстає прозорим. Це можна використовувати для накладання зображень один на одного. Покладіть на форму другий компонент Imageі завантажте іншу картинку. Тільки постарайтеся взяти якусь мало заповнену, контурну картинку. Можете, наприклад, взяти картинку з числа поміщаються зазвичай на кнопки, наприклад, стрілку (файл. \program files\common files\borland shared\images\buttons\arrow1l. bmp). Пересуньте ваші Imageтак, щоб вони перекривали один одного, і у верхньому компоненті встановіть Transparentрівним true. Ви побачите, що верхня картинка перестала затуляти нижню. Одне з можливих застосування цієї властивості - накладення на картинку написів, виконаних у вигляді бітової матриці. Ці написи можна зробити за допомогою вбудованої у Delphi програми Image Editor. Врахуйте, що властивість Transparentдіє лише на бітові матриці. При цьому прозорим (тобто замінним на колір розташованого під ним зображення) робиться за замовчуванням колір нижнього лівого пікселя бітової матриці. Ми розглянули завантаження зображення з файлу у процесі проектування. Але властивість Pictureдозволяє також легко організувати обмін із графічними файлами будь-яких типів у процесі виконання програми. Щоб пояснити техніку такого обміну, треба спочатку детальніше розглянути якість Picture. Ця властивість є об'єктом, який має у свою чергу підсвойства, що вказують на графічний об'єкт, що зберігається. Якщо в Pictureзберігається бітова матриця, на неї вказує властивість Picture. Bitmap. Якщо піктограма зберігається, на неї вказує властивість Picture. Icon. На метафайл, що зберігається, вказує властивість Picture. Metafile. Зрештою, на графічний об'єкт довільного типу вказує властивість Picture. Graphic. Об'єкт Pictureта його властивості Bitmap, Icon,
Metafileі Graphicмають методи файлового читання та запису LoadFromFileі SaveToFile:
procedure LoadFromFile ( const FileName: string); procedure SaveToFile ( const FileName: string);
Для властивостей Picture. Bitmap, Picture. Iconі Picture. Metafileформат файлу має відповідати класу об'єкта: бітовій матриці, піктограмі, метафайлу. Під час читання файлу якість Picture. Graphiсфайл повинен мати формат метафайлу. А для самого об'єкту Pictureметоди читання та запису автоматично підлаштовуються під тип файлу. Пояснимо це з прикладу. Давайте побудуємо додаток, аналогічний до розглянутого в розділі 4.2 прикладу перегляду графічних файлів. Для різноманітності можна організувати керування ним не кнопкою Button, а меню. Помістіть на форму компонент Image. Розтягніть його або задайте його властивість Alignрівним alClientщоб він зайняв всю клієнтську область форми. Перенесіть на форму компонент діалогу відкриття графічного файлу OpenPictureDialog(Див. розділ 8.2 (OpenPictureDialog1. Execute) then. Picture. LoadFromFile (. FileName); Цей оператор викличе діалог відкриття графічного файлу (див. рис.4.4) та завантажить у компонент Image1зображення з обраного користувачем файлу (див. рис.4.5). Файл може бути будь-якого типу: бітова матриця, піктограма або метафайл. Рис.4.5Зображення у компоненті Imageбітової матриці (а) та піктограми (6) У цьому додатку метод LoadFromFileзастосований до Image1. Picture. Якщо будуть відкриватися лише файли бітових матриць, то оператор завантаження файлу можна замінити на Picture. Bitmap. LoadFromFile (. FileName); Для піктограм можна було використовувати оператор. Picture. Значок. LoadFromFile (. FileName); а для метафайлів – оператор. Picture. Metafile. LoadFromFile (. FileName); або. Picture. Graphic. LoadFromFile (. FileName); Але у всіх цих випадках, якщо формат файлу не збігатиметься з передбачуваним, виникне помилка. Аналогічно працює і метод SaveToFileз тією відмінністю, що застосований до Pictureабо до Picture. Graphicвін зберігає у файлі зображення будь-якого формату. Наприклад, якщо ви доповните свою програму діалогом SavePictureDialog(Див. розділ 8.2 SavePictureDialog1. Execute then. Picture. SaveToFile (SavePictureDialog1. FileName); користувач отримає можливість зберегти зображення будь-якого формату у файлі з новим ім'ям. Тільки при цьому, щоб не виникало надалі плутанини, розширення файлу, що зберігається, все-таки повинно відповідати формату збереженого зображення. Абсолютно ідентично для зображень будь-якого формату працюватиме програма, якщо оператор збереження ви заміните на Picture. Graphic. SaveToFile (. FileName); використовує властивість Picture. Graphic. А якщо вам відомий формат, що зберігається в компоненті Imageзображення, то ви можете застосувати метод SaveToFileдо властивостей Picture. Bitmap, Picture. Iconі Picture. Metafile. Для всіх розглянутих об'єктів Picture, Picture. Bitmap,
Picture. Iconі Picture. Metafileвизначено методи присвоєння значень об'єктів: Assign (Source: TPersistent); Однак, для BitMap, Iconі Metafileнадавати можна лише значення однорідних об'єктів: відповідно бітових матриць, піктограм, метафайлів. При спробі присвоїти значення різнорідних об'єктів генерується виняток ЕConvertError. Об'єкт Picture- Універсальний, йому можна надавати значення об'єктів будь-яких з інших трьох класів. А значення Pictureможна надавати тільки тому об'єкту, тип якого збігається з типом об'єкта, що зберігається в ньому. Метод Assignможна використовувати для обміну зображеннями з буфером Clipboard. Наприклад, оператор Assign (Image1. Picture); занесе в буфер обміну зображення, що зберігається в Image1. Аналогічно оператор графіка delphi зображення додаток Image1. Picture. Assign (Clipboard); прочитає в Image1зображення, що знаходиться у буфері обміну. Причому, це може бути будь-яке зображення і навіть текст. Треба тільки не забути під час роботи з буфером обміну вставити в оператор usesвашого модуля посилання на модуль Clipbrd. Автоматично Delphi це посилання не вставляє. Повертаючись до властивостей компонента Image, можна відзначити один недолік, властивий нашому тестовому додатку, наведеному на рис.4.5 При завантаженні різних зображень розмір вікна програми може виявитися або занадто маленьким, і тоді ви побачите тільки частину зображення, або занадто великим, і тоді зображення буде негарно розміщено у лівому верхньому розі форми, залишаючи багато порожнього простору. Цей недолік можна усунути, якщо скористатися властивостями Height(висота) та Width(ширина) компонента Image. За властивості AutoSizeвстановленому в trueрозміри Imageавтоматично встановлюються рівними розмірами завантаженого зображення. І цими розмірами можна скористатися для зміни розмірів форми. Наприклад, наведений раніше код завантаження зображення з файлу можна замінити наступним: OpenPictureDialog1. Execute then begin. Picture. LoadFromFile (. FileName);. ClientHeight: = Image1. Height+10; Top: = Form1. ClientRect. Top + (Form1. ClientHeight - Image1. Height) div 2;. ClientWidth: = Image1. Width+10; Left: = Form1. ClientRect. Left + (Form1. ClientWidth - Image1. Width) div 2; end;
У цьому коді розміри клієнтської області форми встановлюються трохи більше за розміри компонента Image1, які в свою чергу адаптуються до розміру картинки завдяки властивості AutoSize. Внесіть ці виправлення у свою програму, виконайте його та побачите, що форма стала автоматично адаптуватися до розмірів завантаженого зображення Компонент Shape Компонент Shapeтільки умовно може бути віднесений до засобів відображення графічної інформації, оскільки просто є різними геометричними фігурами, відповідним чином заштриховані. Основна властивість цього компонента - Shape(форма), яке може набувати значень: Приклади цих форм показано на рис.4.7 Рис.4.7Приклади компонента Shape Інша істотна властивість компонента - Brush(пензлик). Ця властивість є об'єктом типу TBrush, що має ряд підвластивостей, зокрема: колір ( Brush. Color) та стиль ( Brush. Style) заливання фігури. Заливка при деяких значеннях Styleви можете бачити на рис.4.7 Третє зі специфічних властивостей компонента Shape - Pen(Перо), що визначає стиль ліній. Ця властивість, як і властивість Brush, вже розглядалися у розділі 4.2 Компонент Chart Тепер розглянемо компонент Chart. Цей компонент дозволяє будувати різні діаграми та графіки, які виглядають дуже ефектно (рис.4.8). Компонент Chartмає безліч властивостей, методів, подій, тому якщо всі їх розглядати, то цьому довелося б присвятити цілу главу. Тому обмежимося розглядом лише основних характеристик Chart. А з рештою ви можете ознайомитись у вбудованій довідці Delphi або просто випробувати їх, експериментуючи з діаграмами. Компонент Chartє контейнером об'єктів Seriesтипу TChartSeries- серії даних, що характеризуються різними стилями відображення. Кожен компонент може містити кілька серій. Якщо ви хочете відображати графік, то кожна серія відповідатиме одній кривій на графіку. Якщо ви хочете відображати діаграми, то для деяких видів діаграм можна накласти один на одного кілька різних серій, для інших (наприклад, для кругових діаграм) це, ймовірно, виглядатиме некрасиво. Однак, і в цьому випадку ви можете встановити один компонент Chartкілька серій однакових даних із різним типом діаграми. Тоді, роблячи в кожний момент часу активною одну з них, ви можете надати користувачеві вибір типу діаграми, що відображає дані, що його цікавлять. Розмістіть один або два (якщо захочете відтворити рис.4.8) компонента Chartна формі і подивіться властивості, що відкрилися в Інспекторі Об'єктів. Наведемо пояснення деяких із них. Визначає можливість користувача прокручувати спостерігається частину графіка під час виконання, натискаючи праву кнопку миші. Можливі значення: pmNone - прокручування заборонено, pmHorizontal, pmVertical або pmBoth - дозволено відповідно прокручування лише у горизонтальному напрямку, лише у вертикальному чи обох напрямках. Дозволяє користувачеві змінювати під час виконання масштаб зображення, вирізуючи фрагменти діаграми або графіка курсором миші (на рис.4.8 б унизу показаний момент перегляду фрагмента графіка, повністю представленого на рис.4.8 а). Визначає назву діаграми. Визначає підпис під діаграмою. За замовчуванням відсутня. Текст підпису визначається під властивістю Text. Визначає рамку довкола діаграми. Легенда діаграми – список позначень. MarginLeft, MarginRight, MarginTop, MarginBottom Значення лівого, правого, верхнього та нижнього полів. BottomAxis, LeftAxis, RightAxis Ці властивості визначають характеристики відповідно нижньої, лівої та правої осей. Завдання цих властивостей має сенс для графіків та деяких типів діаграм. LeftWall, BottomWall, BackWall Ці властивості визначають характеристики відповідно до лівої, нижньої та задньої граней області тривимірного відображення графіка (див. рис.4.8 а, нижній графік). Список серій даних, що відображаються у компоненті. Дозволяє або забороняє тривимірне відображення діаграми. Характеристики тривимірного відображення. Масштаб тривимірності (для рис.4.8 це товщина діаграми та ширина стрічок графіка). Поряд з багатьма з перерахованих властивостей в Інспекторі Об'єктів розташовані кнопки з трьома крапками, які дозволяють викликати ту чи іншу сторінку Редактора Діаграм - багатосторінкового вікна, що дозволяє встановити всі властивості діаграм. Виклик Редактора Діаграм можливий також подвійним клацанням на компоненті Chartабо клацанням на ньому правою кнопкою миші та вибором команди Edit Chart у спливаючому меню. Якщо ви хочете спробувати відтворити програму, показану на рис.4.8, зробіть подвійне клацання на верхньому компоненті Chart. Ви потрапите у вікно редактора діаграм (рис.4.9) на сторінку Chart, яка має кілька закладок. Насамперед вас буде цікавити на ній закладка Series. Клацніть на кнопці Add – додати серію. Ви потрапите у вікно (рис.4.10), у якому ви можете вибрати тип діаграми чи графіка. В даному випадку виберіть Pie – кругову діаграму. Скориставшись закладкою Titles, ви можете задати заголовок діаграми, закладка Legend дозволяє задати параметри відображення легенди діаграми (списку позначень) або взагалі прибрати її з екрану, закладка Panel визначає вид панелі, на якій відображається діаграма, закладка 3D дає вам можливість змінити зовнішній вигляд вашої діаграми нахил, зсув, товщину і т.д. Коли ви працюєте з Редактором Діаграм та вибрали тип діаграми, у компонентах Chartна вашій формі відображається її вигляд із занесеними до неї умовними даними (див. рис.4.11). Рис.4.10Вибір типу діаграми у Редакторі Діаграм Тому ви відразу можете спостерігати результат застосування різних опцій до вашої програми, що дуже зручно. Сторінка Series, також має ряд закладок, дає можливість вибрати додаткові характеристики відображення серії. Зокрема, для кругової діаграми на закладці Format корисно включити опцію Circled Pie, яка забезпечить за будь-якого розміру компонента Chartвідображення діаграми у вигляді кола. На закладці Marks кнопки групи Style визначають, що буде написано на ярликах, що належать до окремих сегментів діаграми: Value – значення, Percent – відсотки, Label – назви даних тощо. У прикладі рис.4.8 включено кнопку Percent, a на закладці General встановлений шаблон відсотків, що забезпечує відображення тільки цілих значень. Ви можете, якщо хочете, додати цей компонент Chartще одну тотожну серію, натиснувши на закладці Series сторінки Chart кнопку Clone, потім для цієї нової серії натиснути кнопку Change (змінити) і вибрати інший тип діаграми, наприклад, Bar. Звичайно, два різних типівдіаграми на одному малюнку виглядатимуть погано. Але ви можете вимкнути індикатор цієї нової серії на закладці Series, а потім надати користувачеві вибрати той чи інший вид відображення діаграми (нижче буде показано, як це робиться). Вийдіть із Редактора Діаграм, виділіть у вашому додатку нижній компонент Chartі повторіть завдання властивостей за допомогою Редактора Діаграм. В даному випадку вам потрібно буде задати дві серії, якщо хочете відображати на графіку дві криві та вибрати тип діаграми Line. Оскільки йдеться про графіки, ви можете скористатися закладками Axis та Walls для завдання координатних характеристик осей та тривимірних граней графіка. На цьому проектування зовнішнього вигляду програми завершується. Залишилося написати код, який задає дані, які ви хочете відображати. Для тестового додатка давайте поставимо в круговій діаграмі просто деякі константні дані, а в графіках – функції синус та косинус. Для завдання значень, що відображаються, треба використовувати методи серій Series. Зупинимося лише з трьох основних методах. Метод Clearочищає серію від занесених раніше даних. Метод Add: (Const AValue: Double; Const ALabel: String;: TColor) дозволяє додати до діаграми нову точку. Параметр AValueвідповідає значення, що додається, параметр ALabel- назва, яка відображатиметься на діаграмі та в легенді, AColor- Колір. Параметр ALabel- не обов'язковий, його можна поставити порожнім: "". Метод AddXY:(Const AXValue, AYValue: Double;ALabel: String; AColor: TColor) дозволяє додати нову точку до графіка функції. Параметри AXValueі AYValueвідповідають аргументу та функції. Параметри ALabelі AColorті ж, що й у методі Add. Таким чином, процедура, що забезпечує завантаження даних у нашому прикладі, може мати вигляд: 155;=251;=203;=404; var: Word; begin Series1 do begin;(A1, "Цех 1", clYellow);(A2, "Цех 2", clBlue);(A3, "Цех 3", clRed);(A4, "Цех 4", clPurple); end;. Clear;. Clear; for i: =0 to 100 do begin. AddXY (0.02 * Pi * i, sin (0.02 * Pi * i), "", clRed);. AddXY (0.02 * Pi * i, cos (0.02 * Pi * i), "", clBlue); Якщо ви передбачили, наприклад, для даних, що відображаються у діаграмі, дві серії Series1і Series4різних видів - Pieі Bar, то можете ввести процедуру, яка змінює на вимогу користувача тип діаграми. Цю процедуру можна ввести в подію OnClickбудь-якої кнопки, в команду меню або, наприклад, просто в обробку клацання на компоненті Chart. Для того, щоб завантажити дані в Series4і зробити цю діаграму в перший момент невидимою, можна вставити наприкінці наведеної раніше процедури оператори Assign (Series1);. Active: = false; Перший із цих операторів переписує дані, поміщені в Series1, у серію Series4. А другий оператор робить невидимою серію Series4. Зміна типу діаграми здійснює процедура Active: = not Series1. Active;. Active: = not Series4. Active; На рис.4.8 б ви можете побачити результат перемикання користувача інший вид діаграми. «Відображення графічної інформації в Delphi»
Крім того, відображати та вводити графічну інформацію можна на поверхні будь-якого Відображення графіки на канві Canvas.
План теми:
1. Способи виведення графічної
інформації у Delphi.
2. Відображення картинок.
3. Відображення геометричних
фігур.
У Delphi існує кілька способів
висновку графічної інформації:
Висновок заздалегідь приготовлених
зображень (компоненти Image,
Shape);
Побудова графіків та діаграм
(компонент Chart та ін.);
Формування зображень
програмним способом (об'єкт
Canvas). 2. Відображення картинок.
Відображення картинок за допомогою
компонент Image ми розглянули в
однією з попередніх тем.
Тут ми розглянемо приклад
здійснення найпростішої анімації
шляхом періодичної зміни
зображення, що відображається в
компонентів Image.
Перейти з прикладу.
Відображення найпростіших
геометричних фігур на формі
забезпечує компонент Shape. 3. Відображення геометричних фігур.
Основні властивості компонента Shape:
Brush
Pen
Shape
Колір (.Color) та стиль (.Style) для
заповнення фігури.
Колір (.Color), стиль (.Style), ширина
(.Width) та спосіб виведення (.Mode) ліній
фігури.
Перегляд геометричних фігур. 3. Відображення геометричних фігур.
З кількох компонентів Shape
можна створювати нескладні малюнки.
Програмно змінюючи положення
(.Left, .Top) розмір (.Width, .Height) та
колір (Brush.Color) компонентів Shape
у малюнку можна здійснити
елементи найпростішої анімації.
Розглянути приклад. 4. Побудова графіків та діаграм.
Діаграми призначені для
більш наочного уявлення
масивів чисельних даних, їх
візуального відображення та аналізу.
приклад.
Для побудови діаграм у Delphi
є кілька компонентів,
один з них компонент Chart (розділ
TeeChart Std). 4. Побудова графіків та діаграм.
Вигляд компонента Chart після його
установки на форму: 4. Побудова графіків та діаграм.
Окрім «Інспектора об'єктів» доступ до
властивостям компонента Chart можна
отримати відкривши спеціальне вікно
діалогу (права кнопка на компоненті \
Edit Chart…)
Додати
серію даних
Змінити тип
діаграми 4. Побудова графіків та діаграм.
Вибір типу діаграми: 4. Побудова графіків та діаграм.
Встановлення властивостей для осей координат
(Axis): 4. Побудова графіків та діаграм.
Дані для відображення зазвичай
передаються в Chart програмно,
приклад:
Series1.Clear; (Очистити серію)
for i:=1 to N do
Series1.addxy(i, A[i], '', clGreen);
Значення по
осі X
Значення по
осі Y
Підпис
по осі X
Колір даних
на діаграмі
Розглянути приклад побудови
графіка функції y = Sin(x) Далі:
Лабораторна робота № 13.1.
«Відображення картинок та геометричних
фігур, їхня анімація».
Завдання:
1) Розробити додаток для здійснення
найпростішої анімації шляхом періодичного
зміни зображення, що відображається в
компонентів Image. (Кількість картинок не
менше трьох, картинки підібрати
самостійно). Завдання:
2) Придумати та намалювати малюнок з
компонентів Shape. Програмно
змінюючи положення, розмір чи колір
компонентів Shape у малюнку
здійснити елементи найпростішої
анімації. Далі:
Лабораторна робота №13.2.
«Побудова графіків та діаграм».
Завдання:
1) Модифікувати додаток з
лабораторної роботи № 9 (Відображення
даних у таблиці). Додати можливість
відображення деяких даних з таблиці
на гістограмі чи круговій діаграмі.
2) Побудувати графік заданої функції.
