Способи виведення графічної інформації у Delphi. Використання графічних можливостей Delphi. Компоненти Image та PaintBox

Слайд 2

«Відображення графічної інформаціїу Delphi» План теми: Способи виведення графічної інформації в Delphi. Відображення картинок. Відображення геометричних фігур. Побудова графіків та діаграм.

Слайд 3

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

Слайд 4

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

Слайд 5

Відображення геометричних фігур. Відображення найпростіших геометричних фігур на формі забезпечує компонент Shape.

Слайд 6

Відображення геометричних фігур. Основні властивості компонента Shape:

Слайд 7

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

Слайд 8

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

Слайд 9

Побудова графіків та діаграм. Вид компонента Chart після його встановлення на форму:

Слайд 10

Побудова графіків та діаграм. Крім «Інспектора об'єктів» доступ до властивостей компонента Chart можна отримати, відкривши спеціальне вікно діалогу (права кнопка на компоненті \ Edit Chart…) Додати серію даних Змінити тип діаграми

Слайд 11

Побудова графіків та діаграм. Вибір типу діаграми:

Слайд 12

Побудова графіків та діаграм. Встановлення властивостей для осей координат (Axis):

Слайд 13

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

Слайд 14

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

Слайд 15

Завдання: 2) Придумати та намалювати малюнок із компонентів Shape. Програмно змінюючи положення, розмір або колір компонентів Shape у малюнку здійснити елементи найпростішої анімації.

Слайд 16

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

Переглянути всі слайди

«Відображення графічної інформації в Delphi»
План теми:
1. Способи виведення графічної
інформації в Delphi.
2. Відображення картинок.
3. Відображення геометричних
фігур.

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

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. Текст вписується у прямокутник, верхній лівий кут якого має координати х, у.

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

Таблиця 6

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

Крім того, відображати та вводити графічну інформацію можна на поверхні будь-якого віконного компонента, що має властивість 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 Колір даних на діаграмі РР аааа сссс сссс мммм 0о рррр аааа фффф ииии кккк аааа ф ф ф фуууу нннн кккк цццц ииіііііі y y y y y = = = = S S S S iiiii nnnn ((((xxxx))))

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

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