A C++ programozás Windows környezetben Képek, rajzok alkalmazása

Az előadások a következő témára: "A C++ programozás Windows környezetben Képek, rajzok alkalmazása"— Előadás másolata:

1 A C++ programozás Windows környezetben Képek, rajzok alkalmazása
Alkalmazott Informatikai Tanszék SZÁMÍTÁSTECHNIKA II dr.Dudás László 38./0. A C++ programozás Windows környezetben Képek, rajzok alkalmazása Geometriai alakzat komponensek (Shape) Ábrás nyomógomb (BitBtn) és Kép (Image) komponensek Rajzolás a Canvas objektum segítségével Mintaprogram rajzolásra

2 Geometriai alakzat komponensek (Shape)
Alkalmazott Informatikai Tanszék SZÁMÍTÁSTECHNIKA II dr.Dudás László 38./1. Geometriai alakzat komponensek (Shape) Az alakzat komponensek elsősorban az alkalmazás megjelenésének színe- sítésére használhatók, illetve egysze- rűbb geometrikus ábrák építhetők be- lőlük. Előnyük, hogy vezérlőként mű- ködnek, azaz egéresemények rendel- hetők hozzájuk, és felbukkanó (popup) menü is. Legfontosabb jellemzőik: Shape: az alakzat formája, lásd ábrát. Brush: ecset, azaz kitöltés jellemzői: színe: Color, mintája: Style, vagy rajzolata: Bitmap. Pen: toll, azaz körvonal jellemzői: színe: Color, mintája: Style, vastagsága: Width. Természetesen fontos jellemzők a szélesség: Width, magasság: Height, vízszintes és függőleges pozíció: Left, Top adatok is.

3 Ábrás nyomógomb (BitBtn) és Kép komponensek (Image)
Alkalmazott Informatikai Tanszék SZÁMÍTÁSTECHNIKA II dr.Dudás László 38./2. Ábrás nyomógomb (BitBtn) és Kép komponensek (Image) Gyakran alkalmazzuk a TBitBtn nyomógomb komponenst, amelyre előzete- sen definiált, vagy általunk megadott ábrát he- lyezhetünk el. Jól ismert formái az OK és Cancel nyomógombok. A bitképet a Glyph jellemzőbe kell betöltenünk. A kép (Image) komponens egy téglalapalakú bitkép, amely- et az alkalmazás ablakában vagy egyes vezérlőin elhelyezhetünk. Egyik jellemzője a Canvas, ezáltal a bitképre még programból tovább rajzolhatunk. Az ábrázolt képet a Picture jellemzőbe tölt- hetjük be, .bmp, .ico, .jpg, .jpeg, .emf, .wmf formátumban. Ha azt akarjuk, hogy a kép a méretezőkeretet mindenkor kitöltse, a Strech jellemzőjét true értékre kell állítani. Nagyméretű képek- nél, különösen, ha mozgatni is akarjuk a programban, célszerű az IncrementalDisplay jellemzőjét true értékre állítani, így nem kell megvárni a teljes kirajzolódását. A Transparent (átlátszó) jellem- ző true értéke mellett a kép háttere beleolvad a hordozó felületbe. Egymást részben takaró képek sorrendje a BringToFront() és SendToBack() metódusokkal módosítható.

4 Rajzolás a Canvas objektum segítségével
Alkalmazott Informatikai Tanszék SZÁMÍTÁSTECHNIKA II dr.Dudás László 38./3. Rajzolás a Canvas objektum segítségével A más programozási környezetekben megszokott grafikus rajzolási lehetőségeket a TCanvas osztály egyedein keresztül érhetjük el. Ez a TGraphicControl osztályban jelenik meg először az öröklési fán, tehát a leszármazottakban mind megtalálható. Ilyen, TCanvas adattaggal bíró komponens osztályok a TForm, a TPrinter , a TPaintBox, a TShape, a TBitBtn nyomógomb, a TLabel címke és a TImage ábra, tehát ezek egyedeire rajzolhatunk, kitöltött alakzatokat festhetünk, szövegeket tehetünk ki rájuk a hozzájuk kötött koordinátarendszerben. A Canvas legfontosabb jellemzői:  Karakterjellemzők (Font),  Vonalalakzatok rajzolási jellemzői (Pen),  Kitöltés, kifestés jellemzői (Brush),  Pontok rajzolási jellemzői (Pixels). A metódusok a jellemzőkhöz szorosan kapcsolódnak és elsősorban  vonalalakzatokat és  kitöltött alakzatokat rajzolnak. A TColor típusú elemekből álló Pixels tömb Pixels[X][Y] eleme írható, olvasható: Pixels[10][22] = clRed; szin= Pixels[12][24] ; X Y

5 Szöveg elhelyezése a rajzfelületen
Alkalmazott Informatikai Tanszék SZÁMÍTÁSTECHNIKA II dr.Dudás László 38./4. Szöveg elhelyezése a rajzfelületen A grafikus ábrák részeként kirajzolt szövegek nem tévesztendők össze a címkékkel (Label), melyekhez események is köthetők és önálló életet élnek a hordozó form-on, panelon. Szöveget a rajzfelületre a Canvas->TextOut(X,Y,”Szöveg”); metódushívással helyezhetünk el. A szövegmező bal felső sarka kerül a megadott koordinátákra. A szöveg pozicionálásához segítségünkre lehet a szövegmező szélességét és magasságát megadó sz= Canvas->TextWidth("Szöveg"); m= Canvas->TextHeight("Szöveg"); int értéket adó metóduspáros. A kiíródó szöveg formátumát a Canvas->Font jellemző tulajdonságai határozzák meg, ezek a karakterkészlet, karakterméret, -szín, -stílus

6 Vonalalakzatok rajzolása a rajzfelületen
Alkalmazott Informatikai Tanszék SZÁMÍTÁSTECHNIKA II dr.Dudás László 38./5. Vonalalakzatok rajzolása a rajzfelületen A rajzoláshoz a Canvas->Pen jellemzővel állíthatjuk be a vonal tulajdonságait. Ezek a szín (Color), rajzolási mód (Mode), stílus (Style) és vastagság (Width). A mód a háttérszín és a vonalszín egymásrahatásának mikéntjét határozza meg, a stílus pedig azt, hogy a vonal folytonos, szaggatott, vagy egyéb mintázatú legyen. A vonalalakzatok rajzolását végző metódusok közül a fontosabbak: Canvas->LineTo(X,Y); // vonalat húz az aktuális pontból az (X,Y) pontba Canvas->Arc(X1,Y1, X2,Y2, X3,Y3, X4,Y4); //ellipszisívet rajzol A grafikus kurzor, azaz a toll hegyének pozicionálására a Canvas->MoveTo(X,Y); metódus szolgál. Megemlítjük, hogy törtvonal és szplájngörbe rajzolására is vannak metódusok. (X1,Y1) (X2,Y2) (X3,Y3) (X4,Y4)

7 Kitöltött alakzatok rajzolása
Alkalmazott Informatikai Tanszék SZÁMÍTÁSTECHNIKA II dr.Dudás László 38./6. Kitöltött alakzatok rajzolása A kitöltött alakzatok kontúrja a toll (Pen) jellemzőben beállított vonallal készül, míg a belső rész kifestése az ecset (Brush) jellemzőben megadottakkal. Ezek a következők: a kifestés színe (Color) és stílusa (Style). A stílus bsClear értéke üresen hagyja a ki- festendő területet, csak kontúrt rajzol, bsSolid érték esetén sima kitöltést végez, a többi konstanssal sraf- fozott és rácsozott kitöltéseket kapunk. Ezen stílusok helyett a kitöltés végezhető egy előre megadott bit- map mintázattal is. A kitöltött alakzatok rajzolását végző metódusok közül a legfontosabbak: Canvas->Rectangle(X1,Y1,X2,Y2); // a két pont lesz a téglalap átlója Canvas->Ellipse(X1,Y1,X2,Y2); // a két pont által kifeszített téglalapban elhelyezkedő ellipszist rajzolja. Canvas->Pie(X1,Y1, X2,Y2, X3,Y3, X4,Y4); // az Arc-nak megfelelő paraméterezéssel létrehozott ellipszisszektort rajzolja. Canvas->FloodFill(X,Y, szín, kitöltési_stílus); // szín színű zárt görbét az X,Y belső pontból kiindulva kifesti a kitöltési_stílusnak megfelelő mintával.

8 Mintaprogram rajzolásra
Alkalmazott Informatikai Tanszék SZÁMÍTÁSTECHNIKA II dr.Dudás László 38./7. Mintaprogram rajzolásra Feladat: A form Canvas jellemzője segítségével készítsünk egy egyszerű ábrát amely bemutatja a legfontosabb rajzolási eszközöket. A futó program képe az alábbi ábrának megfelelő legyen! A színek és az egyenesek vonalvastagsága véletlenszerű legyen és egérkattintásra változzon meg. Az ablak legyen átméretezhető!

9 mentsük le Rajz.prj néven.
Alkalmazott Informatikai Tanszék SZÁMÍTÁSTECHNIKA II dr.Dudás László 38./8. Megoldás: 1. A korábbiakban ismertetett módon hozzunk létre egy új alkalmazást és mentsük le Rajz.prj néven. 2. Írjuk át a form feliratát (Caption) ” Rajzolás a Canvas objektummal” szövegre! 3. Mivel a most alkalmazott Canvas nem vizuális komponens, hanem az induló form egyik jellemzője, adattagja, mely maga is objektum, a programozás nagyrésze a form-hoz tartozó Unit1.cpp állományba történő programbeírást jelenti. Elsőként inicializáljuk a véletlenszám generátort a randomize(); függvénynek a form konstruktorában való meghívásával! __fastcall TForm1::TForm1(TComponent* Owner) : TForm(Owner) { randomize(); }

10 4. Mivel a form első megjelenítésére és utána a formon történő bármely
Alkalmazott Informatikai Tanszék SZÁMÍTÁSTECHNIKA II dr.Dudás László 38./9. 4. Mivel a form első megjelenítésére és utána a formon történő bármely egérkattintásra is ki kell rajzolni a teljes rajzot, ezért a rárajzolási műveleteket fűzzük hozzá a form megjelenítéséhez, amikor is OnPaint esemény következik be. Tehát hozzuk létre az OnPaint() eseményke- zelő függvényt és írjuk bele a szükséges programkódot. Ezt az esemény- kezelőt meg tudjuk majd hívni a form újrarajzolását kérő Repaint() metódushívással az egérkattintás OnClick() eseménykezelőjében. Az OnPaint() eseménykezelő programba illesztéséhez a form aktívvá tétele mellett válasszuk ki az OnPaint eseményt az Object Inspector Events lapjáról és kattintsunk duplán a sorában! A megjelenő eseménykezelőbe írjuk be a rajzoló programrészletet az alábbiaknak megfelelően: void __fastcall TForm1::FormPaint(TObject *Sender) { int R; //További rajzolások a form megjelenítése (megrajzolása) után: Canvas->Brush->Color = clWhite; // fehér kifestőszínt állít be Canvas->FillRect(ClientRect); // fehérre törli a hátteret // folytatódik

11 Canvas->Pen->Color = (Graphics::TColor) random(65535);
Alkalmazott Informatikai Tanszék SZÁMÍTÁSTECHNIKA II dr.Dudás László 38./10. for ( int i=10; i>=1; i--) // 10 db szakaszt, kört és ellipszist rajzolunk { Canvas->Pen->Color = (Graphics::TColor) random(65535); Canvas->Pen->Width = random(7); // a vonalvastagság is változó Canvas->MoveTo(0,0); // de csak a szakaszoknál Canvas->LineTo((ClientWidth / 10.0) *i , ClientHeight); Canvas->Pen->Width = 1; // körhöz és ellipszishez R= ((ClientHeight)/4)/10*i; // a kör sugara ciklusonként változik Canvas->Pen->Color = (Graphics::TColor) random(65535); Canvas->Brush->Color = (Graphics::TColor) random(65535); // Canvas->Brush->Style=bsClear; // üres körökhöz ez kellene Canvas->Ellipse(ClientWidth-R-R,ClientHeight/2-R, ClientWidth,ClientHeight/2+R); // kör int RV= 2*R; // Canvas->Brush->Style=bsClear; //üres ellipszishez kellene Canvas->Ellipse(ClientWidth/2-RV,0, ClientWidth/2+RV,ClientHeight/4); // ellipszis } // folytatódik

12 Canvas->Font->Size= ClientHeight/16; //karakterméret
Alkalmazott Informatikai Tanszék SZÁMÍTÁSTECHNIKA II dr.Dudás László 38./11. Canvas->Font->Size= ClientHeight/16; //karakterméret Canvas->TextOut(ClientWidth/2 - Canvas->TextWidth("Szöveg")/2, ClientHeight/3.5, "Szöveg” ); } 5. Próbáljuk ki a programot! Működik, a rajz megfelelő, de egérre nem reagál és az átméretezett ablakban elromlik az ábra. Hozzunk létre egy OnResize() eseménykezelő függvényt, amely az ablak méretének megváltozásakor hívódik meg, és rajzoltassuk benne újra az ablak tartalmát egy Repaint(); metódushívással kiváltva az OnPaint eseményt, azaz az OnPaint() eseménykezelő meghívását és a benne megadott rajzoló utasítások végrehajtását! void __fastcall TForm1::FormResize(TObject *Sender) { // Átméretezett ablakban újra kell a rajzot rajzolni: Form1->Repaint();

13 már a megváltozott ablak munkaterületének (Client) méretéből indul ki
Alkalmazott Informatikai Tanszék SZÁMÍTÁSTECHNIKA II dr.Dudás László 38./12. 6. Már jól kezeli az átméretezést a program, hiszen az újrarajzolásnál most már a megváltozott ablak munkaterületének (Client) méretéből indul ki Már csak egy feladat maradt hátra: a form-on történő egérkattintásra rajzolja újra az ábrát a program, hogy élvezhessük a véletlenszerű színek megadá- sából eredő színváltozásokat! Ehhez hozzuk létre a form OnClick() eseménykezelőjét az Events lapon az OnClick esemény sorában duplán kattintva! Majd írjuk bele a Repaint(); metódushívást! void __fastcall TForm1::FormClick(TObject *Sender) { //Egérkattintásra újrarajzolunk mindent, de már más véletlen színekkel: Form1->Repaint(); } 7. Futtassuk a programot újra és kattintgassunk az ablakban, hogy megváltozott színekkel jelenjen meg a rajz újra!