Programozási technikák Pál László Sapientia EMTE, Csíkszereda, 2009/2010
9. ELŐADÁS Grafika Delphiben 2
Grafikus objektumok Tervezési időben létrehozható grafikus elemek: TImage (kép) TShape (alakzat) Futási időben létrehozható grafikus elemek: TCanvas (vászon) 3
Tervezési időben - TImage Helye: Additional paletta Leírás, szerep: kép megjelenítésére használjuk Tulajdonságok: Picture: a megjelenítendő képet ebben a tulajdonságban adhatjuk meg. A képfájl típusa lehet JPG, BMP, ICO, EMF és WMF. Stretch (nyújtás): ha True, a kép felveszi az komponens méretét. Ha False, akkor a kép a komponens bal felső sarkában lesz, eredeti méretben (ha az Image kisebb mint a kép, levágja) Proportional: ha értéke True, akkor a nyújtás az oldalarányok megtartásával történik 4
Tervezési időben - TImage Tulajdonságok: Center: képet a komponens közepére igazíthatjuk, ha igaz értéket adunk meg Példa: Stretch=true Stretch=true Proportional=true Center=true 5
Tervezési időben - TImage Metódusok: Picture.LoadFromFile(állománynév: string): a képet betölti a paraméterként megadott állományból Picture.SaveToFile(állománynév: string): a képet lementi a paraméterként megadott állományba Példa: Image1.Picture.LoadFromFile ( kepnev.bmp ); 6
Tervezési időben - TShape Helye: Additional paletta Leírás, szerep: ha csak egyszerűbb geometriai alakzatok megjelenítésére van szükség, akkor az Image komponens helyett használhatjuk ezt a komponenst Tulajdonságok: Shape: az alakzat formája. A lehetséges értékek: stcircle: kör stellipse: ellipszis strectangle: téglalap stroundrect: lekerekített sarkú téglalap stsquare: négyzet stroundsquare: lekerekített sarkú négyzet 7
Tervezési időben - TShape Tulajdonságok: Pen: az alakzat körvonalának (a rajzoló toll) tulajdonságai: Pen.Color: szín Pen.Style: a toll stílusa: pssolid folytonos, psdash szaggatott, psdot pontozott, stb. Pen.Mode: a rajzolási mód Pen.Width: a toll vastagsága Brush: az alakzatot kitöltő, kifestő ecset tulajdonságai: szín, és stílus. A Color property-ben adhatjuk meg a kitöltés színét, míg a Style property-ben a mintát. Ha ez utóbbi értéke bsclear, akkor nem lesz kitöltés, az alakzat átlátszó lesz. A teljes kitöltéshez a bssolid értéket kell megadni. 8
Tervezési időben - TShape Példa: 9
Futás közben, Delphiben azoknak a komponenseknek a felületére rajzolhatunk, amelyek rendelkeznek canvas ( rajzvászon ) jellemzővel. Ilyen komponens például a TImage, TBitmap, TPrinter, TForm, stb. A canvas tulajdonképpen egy objektum, amely tartalmazza a rajzoláshoz szükséges tulajdonságokat, metódusokat. Mivel ez a jellemző csak publikus (public) és nem publikált (published) tervezési időben nem érhető el (nem jelenik meg az Object Inspectorban a jellemzőknél), csak a program futása közben. A komponensek rajzvásznának az osztálya TCanvas, amely tartalmazza a rajzoláshoz szükséges jellemzőket és metódusokat 10
Jellemzők: Pen: a rajzoló toll. Tulajdonságai: Pen.Color: a rajzoló toll színe Pen.Style: a toll stílusa: 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 nem szeretnénk körvonalat rajzolni. 11
Jellemzők: Pen.Mode: a rajzolási mód: pmblack: a vonal színe mindig fekete lesz. pmwhite: a vonal színe mindig fehér lesz. pmnop: nem történik rajzolás. pmnot: a rajzvászon színének az inverzével történik a rajzolás. pmcopy: a Color jellemzőnél megadott színt használja rajzoláshoz. Ez az alapértelmezett beállítás. pmnotcopy: a Color jellemzőnél megadott szín inverzével történik a rajzolás. 12
Jellemzők: Pen.Mode: a rajzolási mód: pmmerge: A vászon színének és a Color jellemzőnél megadott színnek a kombinációja. pmxor: XOR művelet (kizáró vagy) a vászon színe, és a Color jellemzőnél megadott szín között. pmnotxor: NotXOR művelet a vászon színe, és a Color jellemzőnél megadott szín között (az előző művelet eredményének a fordítottja). Törlésre használjuk: ha egy objektumot ilyen rajzmódban újra megrajzolunk (rárajzolunk saját magára), akkor az eltűnik, a háttérszínt kapjuk vissza 13
Jellemzők: Brush: a rajzvászonra rajzolt objektumokat (kör, téglalap, stb.) kitöltő, kifestő ecset tulajdonságai: Brush.Color: az ecset színe Brush.Style: az ecset stílusa: bssolid: nincs minta, folyamatos kitöltés a Color jellemzőben megadott színnel. bsclear: nincs kitöltés. Akkor használjuk, ha például az objektumnak csak a körvonalát szeretnénk megjeleníteni, vagy a felirat hátterét átlátszóvá tenni Brush.Bitmap: egy TBitmap típusú kisméretű grafikus objektum, amivel a vászonra rajzolt grafikus objektumokat kitöltjük. 14
Jellemzők: Font: A rajzvászonra szöveget is lehet írni (rajzolni), ez a jellemző határozza meg a szöveg tulajdonságait. PenPos: TPoint (x,y pár) típusú érték, a toll aktuális pozícióját jelenti. Pixels: egy kétdimenziós tömb, ami a rajzvászon képpontonkénti színét jelenti. 15
Példa: az űrlap rajzvásznának egy bizonyos téglalap alakú tartományát piros színűre fessük. 16
Metódusok: MoveTo(x,y:integer): a tollat a vászon (x,y) koordinátájú pontba helyezi LineTo(x,y:integer): vonalat húz a toll aktuális pozíciójából az (x,y) koordinátájú pontba TextOut(x,y:integer,s:string): az s paraméterben megadott szöveget, elhelyezi az (x,y) koordinátájú pontba Rectangle(x1,y1,x2,y2:integer): téglalap rajzolása, (x1,y1) jelenti a bal felső sarok koordinátáját, (x2,y2) a jobb alsó sarokét. RoundRect(x1,y1,x2,y2,x3,y3:integer): lekerekített sarkú téglalap, az első két koordináta-pár jelenti a sarkakat, az utolsó két paraméter annak az ellipszisnek a nagy és kistengelye, amely meghatározza a sarkak görbületét. 17
Metódusok: Ellipse(x1,y1,x2,y2:integer): a koordináták által határolt téglalapba beférő ellipszist rajzol, ha ezek négyzetet alkotnak, akkor kört. Draw(X, Y: Integer; Graphic: TGraphic): a vászon (x,y) koordinátájú pontjában elhelyezi a Graphic paraméterben megadott grafikus objektumot. Ez lehet egy TBitmap típusú objektum is, ilyenkor a CopyMode jellemzőben megadott módon történik a kép elhelyezése. StretchDraw(Rect: TRect; Graphic: TGraphic): hasonló a Draw eljáráshoz, a Graphic paraméterben megadott grafikus objektumot a Rect paraméterben megadott téglalapba beszorítva helyezi el. A kép nem az eredeti méretben (mint a Draw eljárásnál), hanem a téglalap által meghatározott méretben jelenik meg. 18
1. Példa: gomb kattintásra az űrlap rajzvásznára egy egyenest rajzolunk és kiírunk egy szöveget egy adott pozícióba: 19
Megjegyzés: az előző példákban, gombkattintásra rajzoltunk az űrlapra valamilyen alakzatot. Ennek a rajzolásnak az a hátránya, hogy a rajz csak addig látszik, amíg az űrlap újra nem frissül. Például, ha lekicsinyítjük az ablakot vagy az űrlap fölé egy másik űrlap kerül, a rajz eltűnik. Ezért az a szokás, hogy a rajzolási műveleteket, az űrlap OnPaint eseményébe helyezzük, így az űrlap frissítésekor az esemény lefut és a rajzolás újra megtörténik. Az OnPaint eseményt ki lehet váltani még a Repaint utasítás segítségével is. 20
Metódusok: FillRect(p:TRect): a megadott téglalap alakú tartományt kitölti az aktuális ecsettel Példa: külső állományból egy bitképet töltünk be és jelenítünk meg az ecset segítségével: 21
Metódusok: CopyRect(Dest: TRect; Canvas: TCanvas; Source: TRect): ha egy képnek csak egy bizonyos részletét szeretnénk a vászonra másolni, akkor erre a CopyRect eljárást használjuk. Ennek első paramétere TRect típusú, és a célterület koordinátáit adja meg. A második paraméter az a vászon, amiről a képrészletet másolni szeretnénk. Az utolsó paraméter szintén TRect típusú, és a másolandó terület koordinátáit tartalmazza. Példa: Az alábbi példában a az első kép (x1,y1,x2,y2) által határolt területét, a második kép (10, 10, 80, 80) által határolt részére másoljuk be. 22
Metódusok: FloodFill(x,y:integer, Color:TColor, FillStyle:TFillStyle): zárt területek kifestésére alkalmas eljárás, a kifestés az (x,y) koordinátájú pontból indul, a Color paraméter egy színt jelent, a negyedik paraméter pedig a kitöltés módja. A szín paraméter felhasználási módja ez utóbbi paramétertől függ. A kitöltés módja kétféle lehet: fssurface: a kitöltés addig folytatódik, amíg a paraméterként megadott színű összefüggő területet talál. fsborder: a paraméterként megadott szín annak az alakzatnak a körvonal színe, amit ki szeretnénk festeni. Ha az alakzatban vannak más színű pontok is, azok is ki lesznek festve. 23
Példa: Az alábbi példák közül az első a Canvas (10,10) pozíciójában lévő pixeltől kezdve kifesti azt az alakzatot, aminek színe a megadott koordinátában lévő szín. A második példa egy olyan alakzatot fest ki, aminek a körvonala fekete színű. A megadott koordinátának az alakzaton belül kell lennie 24
Példa: vonalak rajzolása az egér segítségével 25
A rajzolás kezdete: OnMouseDown 26
A tulajdonképpeni rajzolás: OnMouseMove 27
A rajzolás befejezése: OnMouseUp 28