A Delphi grafikája Készítette: Páldi Orsolya. GDI  A Delpfiben a grafikus megjelenítést egy grafikus alprogramrendszer végzi, ez a GDI  (GDI = Graphics.

Az előadások a következő témára: "A Delphi grafikája Készítette: Páldi Orsolya. GDI  A Delpfiben a grafikus megjelenítést egy grafikus alprogramrendszer végzi, ez a GDI  (GDI = Graphics."— Előadás másolata:

1 A Delphi grafikája Készítette: Páldi Orsolya

2 GDI  A Delpfiben a grafikus megjelenítést egy grafikus alprogramrendszer végzi, ez a GDI  (GDI = Graphics Device Interface)

3 Grafikus ábrák készítésének módjai  Grafikus vezérlők segítségével.  Bizonyos komponensek felületére rajzolásával.  A képernyő mellett a nyomtatón is megjeleníthetünk információkat.

4 Tartalom 1. Alapvető grafikus eszközök Színek Rajzolási módok Alapeszközök (toll, ecset, betűtípus, képek) Alapeszközöktollecsetbetűtípusképek 2. Grafikus vezérlők használata Grafikus vezérlők használata Geometriai alakzatok megjelenítése Képek megjelenítése Képlisták Grafikonok megjelenítése 3. A Canvas használata A canvas objektum alaptulajondágai Rajzolás Canvas felhasználásával Rajzolás és újrafestés windows alkalmazásokban Nyomtatás

5 Alapvető grafikus eszközök

6 1.Színek A TColor típussal színek tárolására alkalmas változókat definiálhatunk. A leggyakrabban használt színeket konstansként is elérhetjük (például a háttérszín – clBackground, menüszín – clMenu, az ablak keretének színe - clWindowFrame). A speciális színekre a nevükkel hivatkozhatunk clBlack = TColor ($000000); clRed = TColor ($0000FF); clGreen = TColor ($008000); clBlue = TColor ($FF0000); clDkGray = TColor ($808000); clWhite = TColor ($FFFFFF); Az RGB függvényt használva saját színt keverhetünk a clSajat TColor típusú változó segítségével clSajat := RGB (10, 12, 100); A rajzeszközök (Pen, Font stb) és a vezérlők színeit a Color tulajdonsággal állíthatjuk be

7 Alapvető grafikus eszközök 2. Rajzolási módok  A grafikus objektumok felületére tollal (TPen) vonalakat húzhatunk.  A PenMode segítségével szabályozhatjuk hogyan fogjon a toll.  A PenMode tulajdonság megadásakor a TPenMode felsorolt típus lehetséges értékei közül választhatunk, például: fekete vonal – pmBlack, fehér vonal – pmwhite, a toll színe – pmCopy,

8 Alapvető grafikai eszközök 3. Alapeszközök  Toll (Pen)  Ecset (Brush)  Betűtípus (Font)  A képek

9 Toll  A Toll (Pen) a vonalas ábrák elkészítésének alapvető eszköze.  Jellemzői: a rajzolás módja (Mode), színe(Color), vastagsága (Width) és a húzott vonal típusa (Style).  A húzott vonal stílusa psSolid – folyamatos vonal psDash – Szaggatott vonal psDot pontokból álló vonal psClear – nincs vonal

10 Az ecset A grafikus elemek kifestéséhez az ecsetet (TBrush) használjuk, melynek jellemző tulajdonságai a szín (color) és a kifestés módja (Style)

11 A betűtípus Fontosabb tulajdonságai: - Tcolor: karakterek színét határozza meg - Heigh: a karaktereket befogadó cella magasságát - Size: a betűtípus méretét - Name: betűtípus családok neveit - TFont Style: itt adhatjuk meg hogyan jelenjenek meg a betűk: félkövér – fsBold, dőlt – fsItalic, aláhúzott – fsUnderline, áthúzott fsStrikeOut.

12 A képek Kétféle leírása létezik: 1. Raszteres: a pontokból álló kép színeit definiáljuk 2. Vektoros: az ábra rajzolásának lépéseit, mint pl a vonalhúzás, kifestés tároljuk A képek tulajdonságai: Height és Width: a kép méreteit határozzák meg A TPicture osztály Assign metódusa amely a paraméterében megadott kép típusától függően bitképet, icont, metafájlt másol az objektumba TGraphic osztály LoadFromFile metódusával képeket tölthetünk be. A tárolt képet a SaveToFile metódussal állományba is menthetjük.

13 GRAFIKUS VEZÉRLŐK HASZNÁLATA

14 A legfontosabb képi megjelenítő eszközök: 1. Shape (alakzat) – egyszerű geometriai ábra 2. Image (kép) – bitképek megjelenítésére alkalmas 3. ImageList – képsorozatokat tárol 4. PaintBox – megjelenít és rajzvászonként is használható 5. Chart – grafikonmegjelenítő

15 Geometriai alakzatok megjelenítése  A kompenspaletta Additional lapján helyezkedik el a Shape komponens  A megjelenítendő alakzat lehet : kör (stCircle), ellipszis(stEllipe), téglalap (stRectangle), lekerekített téglalap(stRoundRect), négyzet (stSquare), lekerekített négyzet (stRoundSquare)  A geometriai alakzat körvonalának milyenségét a Pen a toll, a kifestés módját pedig a Brush ecset tulajdonság határozza meg.

16 Képek megjelenítése  A komponespaletta System lapján található PainBox rajzvásznán csak rajzeszközökkel rajzolhatunk  A komponenspaletta Additional lapján található Image vezérlő felületére is rajzolhatunk, ugyanis ez egy rajzvászon. Azt Image vezélő Picture tulajdonsága meghatározza hogy mit látunk.  A képkeret lehet a képhez igazodó (AutoSize), a képet ki is feszíthetjük a keretre a Strech tulajdonsággal, amit true értékre kell állítani

17 Képlisták  A képek méretét a Height és a Width tulajdonságok, számát a Count jellemző határozza meg.  Minden képhez tartozik egy index mely alapján elérhető.

18 Grafikonok megjelenítése  Az Additional palettalap Chart komponense szolgál a grafikonok megjelenítésére.  A grafikon elhelyezkedését a szokásos tulajdonságok (Left, Top, Heigh és Width) adják meg.  Számos dolgot beállíthatunk a komponens Edit Chart … menüpontjának kiválasztása után. Például beállíthatjuk a megjelenítendő adatokat (Series), a tengelyeket (Axis), a feliratokat (Titles), a megjegyzéseket (Legend)

19 A Canvas használata

20 A canvas alaptulajdonságai Canvas = vászon Lehetőségei: vonalakból, körívekből és görbékből álló alakzatokat hozhatunk létre; beállíthatjuk a vonalvastagságot, színt, stílust, az alakzat kitöltéséhez használt mintát; bitképeket jeleníthetünk meg a képen, különböző módokon; szövegeket jeleníthetünk meg különböző betűtípussal

21 A vászon legfontosabb tulajdonságai  Brush – ecset. Beállításával változik az alakzatok kitöltésének színe és mintája. Az ecsetnek vannak további tulajdonságai is: Bitmap (az ecset mintáját definiáló bitkép), Color (szín) és Style (stílus).  Font – betű. Altulajdonságai: Color, Charset (karakterkészlet), Name (betűtípus neve), Size (méret), Style (stílus), stb.  Pen – toll. A vászon tollának típusát adja meg. Altulajdonságai: Color (szín), Style (stílus), Width (vonalvastagság), Mode (toll rajzolási módja).  PenPos – toll aktuális pozíciója. Ezt a tulajdonságot írni és olvasni is lehet.  Pixels – a pixelek színe. A tulajdonság értékét olvasni

22 Rajzolás a Canvas objektum felhasználásával  Képpontgrafika  Rajzolás tollakkal  Festés a rajzvásznon  Bitképek megjelenítése  Írás a rajzvászonra

23 Képpontgrafika Bitképes megjelenítő eszközön a kifestett objektum rajzvásznának pontjait egyenként színezhetjük, illetve a pontok színét egyenként le is kérdezhetjük, erre a Pixels tulajdonságtömböt használjuk Propety Pixels [x, y:integer]:TColor (Ahol x,y tömbindexek a képpont koordinátái, a tömbelem pedig a képpont színe.)

24 Rajzolás tollakkal  A vonalas ábrák készítésének alapeszköze a toll.  Az aktuális tollpozíciót a PenPos tulajdonság tárolja.  A tollat mozgathatjuk felemelt illetve letett állapotban. A toll új pozíciója az X és Y koordináták által kijelölt pont lesz: Procedure MoveTo (x, y: integer); Az aktuális tollpozíciótól kezdve az x és y koordinátákkal megadott pontig vonalat húzhatunk a Procedure LineTo (x, y:integer); metódus segítségével. Vonalláncot is tudunk rajzolni Procedure PolyLine(const Points: array of Tpoint); (A points tömbben a vonallánc tartópontjait kell átadnunk.)

25 Festés a rajzvásznon Téglalapok A téglalapot a Rectagle metódussal hozhatjuk létre: Procedure Rectangle(x1, y1, x2, y2:integer); (Ahol x1 és y1 a téglalap bal felső koordinátái; x2, y2 a jobb alsó sarkának koordinátái) RoundRect metódussal lekerekített téglalap rajzolható: Procedure RondRect(x1, y1, x2, y2, x3, y3:integer); ( Ahol x3 és y3 a lekerekítendő ellipszis vízszintes és függőleges tengelye, a többi pont megegyezik a téglalap koordinátáival.) Polygon metódussal kifestett poligonok rajzolhatók: Procedure Polygon (cont Points: array of Tpoint); ( Ahol a Point eg yTPoint típusú elemeket tartalmazó tömb, amely a tartópontokat tárolja. A metódus zárt poligont készít)

26 Festés a rajzvásznon Körívek, ellipszisek rajzolása  Ellipse metódussal teljesen kifestett ellipszisek készíthetők Procedure Ellipse(x1, y1, x2, y2:integer);  Pie metódussal ellipsziscikk, mégpedig 2 sugár által határolt ellipszisdarab rajzolható és festhető ki: Procedure Pie(x1, y1, x2, y2, x3,y3, x4, y4:integer);  Chord metódussal ellipszisszelet rajzolható ki, azaz egy egyenes és egy ellipszisív által határolt terület  Floodfill metódussal zátr alakzatot festhetünk ki Procedure Floodfill (x, y:integer,color:Tcolor,Fillstyle: TFillStyle); (Az x, y pontól kezdve addig tart a kifestés, míg el nemérjük a Color szín által definiált határt.)

27 Style property A vonal vastagságát adja meg. Értékei:  psSolid: folyamatos vonal.  psDash: szaggatott vonal.  psDot: pontozott vonal.  psDashDot: pontvonal.  psDashDotDot: dupla pontvonal (két pont és egy rövid szakasz ismétlődik)  psClear: nincs vonal. Ezt akkor használhatjuk, ha egy objektumnak (pl. Ellipse) nem szeretnénk körvonalat rajzolni.  psInsideFrame = psSolid, de ha szükséges, akkor az 1 pixelnél vastagabb vonalak színét képes több színből összeállítani (kisebb színfelbontás esetén).

28 Mode property A vonal rajzolásának módját adja meg. Például:  pmBlack: a vonal (és az objektum) színe mindig fekete lesz.  pmWhite: a vonal (és az objektum) színe mindig fehér lesz.  pmNop: nem történik rajzolás.  pmNot: invertálja a Canvas pixeleinek színét.  pmCopy: a Color property értékét használja rajzoláshoz.  pmNotCopy: invertálja a színt.  pmMerge: A Canvas színének és a Color property szín kombinációja.  pmXor: XOR művelet a Canvas háttérszíne, és a Color szín között.  pmNotXor: az előző művelet eredményének inverze.

29 Color property és Style property Color property: a kifestés színét adja meg Style property: mintázatát adja meg A Style property értékei a következők lehetnek: bbsSolid: nincs minta, folyamatos kitöltés a Color property-ben megadott színnel. bbsClear: nincs kitöltés. Akkor használjuk, ha például a rajz objektumnak csak a körvonalát szeretnénk megjeleníteni, vagy a felirat hátterét átlátszóvá tenni. bbsHorizontal: vízszintes csíkozás. bbsVertical: függőleges csíkozás. bbsFDiagonal: 135 fokos ferde csíkozás bbsBDiagonal: 45 fokos ferde csíkozás. bbsCross: vízszintes és függőleges csíkozás kombinációja.

30 Írás a rajzvászonra Textout metódussal történik Procedure TextOut (x, y:integer; const Text:string); (Ahol x, y a kiíradó szöveg befoglaló téglalapjának bal felső sarkát határozzuk meg, a Text pedig a kiírandó szöveget tartalmazza) Előfordulhat hogy a szöveget nem a bal felső saroktól szeretnénk kezdeni, ekkor használjuk a következő metódusokat: Function TextHeight (const Text: string): Integer; Function TextWidth (const Text: string): Integer ;

31 Bitképek megjelenítése Képeket is megjeleníthetünk. A grafikus objektumok, mint a biképek, ikonok, metafájlok mérettorzítás nélkül tudjuk megjeleníteni. Procedure Draw (x, y: integer; Graphic:TGrpic); (Ahol a Graphic definiálja a grafikus objectumot, x és y pedig a kép bal felső koordinátái.) A Strechdraw metódussal a megjelnítendő képet torzítva jeleníthetjük meg Procedure StrechDraw (cont: Rect;Graphic:TGrpic); (Ahol a Rect azt a téglalapot definiálja ahol a Grapich kép megjelenik)

32 Rajzolás és újrafestés Windows alkalmazásokban  Az ablakokban megjelenő grafikus objektumot gyakran eltakarja egy másik ablak, majd amikor megszűnik a takarás, újra ki kell rajzolni a képet.  Ha tehát azt szeretnénk, hogy az általunk készített rajz a takarásból előbukkanó objektumokon frissítésre kerüljön, akkor a Canvas rajzoló metódusait az OnPaint esemény kezelőjében kell elhelyeznünk.

33 Nyomtatás  A Delphiben, ha például a form képének aktuális nyomtatóra való küldéséhez meg kell hívnunk a Print metódust.  Ha programozni szeretnénk a nyomtatót, akkor abban a modulban ahonnan a nyomtatást végezzük használnunk kell a Printers modult: Uses Printers;  A szöveges állományok nyomtatóra küldését az AssignPrn eljárás segíti, melynek egyetlen paramétere van, mégpedig a TextFile típusú változó.  A nyomtatást az EndDoc metódussal kell befejezni, ami lezárja a feladatot és elküldi a nyomtatókezelőnek.  A nyomtatás előtt az aktuális papírméretekről kaphatunk információt a PageHeight éa a PageWidth tulajdonságok használatával.  A Copis tulajdonsággal beállíthatjuk a másolatok számát  Az Orientation tulajdonság értéke határozza meg a papír függőleges, illetve vízszintes állását.

34 Köszönöm a figyelmet!