Grafikai lehetőségek

Átírás

1 Vizuális és eseményvezérelt programozás , II. félév BMF NIK Grafikai lehetőségek System.Drawing névtér Graphics osztály Színek használata Vonalalapú alakzatok Pen osztály Rajzolási lehetőségek Kitöltött alakzatok Brush osztály leszármazottai Rajzolási lehetőségek Összegzés

2 Hallgatói tájékoztató A jelen bemutatóban található adatok, tudnivalók és információk a számonkérendő anyag vázlatát képezik. Ismeretük szükséges, de nem elégséges feltétele a sikeres zárthelyinek, illetve vizsgának. Sikeres zárthelyihez, illetve vizsgához a jelen bemutató tartalmán felül a kötelező irodalomként megjelölt anyag, a gyakorlatokon szóban, illetve a táblán átadott tudnivalók ismerete, valamint a gyakorlatokon megoldott példák és az otthoni feldolgozás céljából kiadott feladatok önálló megoldásának képessége is szükséges. 2

3 Windows grafikus alrendszere GDI (Graphics Device Interface) A Windows grafikus alrendszerének magja Az alkalmazások és a megjelenítő eszközök (képernyő, nyomtató stb.) közötti kapcsolatot biztosító illesztőfelület Feladata az alkalmazások által kezdeményezett rajzolási műveletek eszközfüggő hívásokká való átalakítása Alkalmas különböző grafikai elemek (görbék, alakzatok, szövegek, képek stb.) megjelenítésére, és torzítására (skálázás, forgatás stb.) GDI+ A.NET keretrendszer GDI változata Magasabb szintű programozást tesz lehetővé 3

4 System.Drawing System.Drawing névtér alterei Biztosítja az elérést a legalapvetőbb GDI+ funkciókhoz System.Drawing.Design Felhasználói felület kiterjesztését biztosító osztályok System.Drawing.Drawing2D Magasszintű kétdimenziós és vektorgrafikai funkciók System.Drawing.Printing Nyomtatással kapcsolatos szolgáltatások System.Drawing.Imaging Képekkel, szabványos képformátumokkal kapcsolatos osztályok System.Drawing.Text Biztosítja az elérést a GDI+ tipográfiai funkcióihoz 4

5 System.Drawing.Graphics Graphics osztály Biztosítja a kommunikációt a GDI irányába Ennek segítségével tudunk rajzolni a megjelenítő eszköz felületére Graphics objektum létrehozása (1) Egy grafikus vezérlő felületére közvetlenül rajzolhatunk a komponens CreateGraphics() metódusa által visszaadott Graphics objektum segítségével 5

6 Graphics objektum létrehozása (2) Graphics osztály A vezérlő Paint() eseményéhez kapcsolt eseménykezelővel, vagy az OnPaint() metódusának felülírásával szintén hozzáférhetünk a kirajzolásához használt Graphics objektumhoz. Mindkét esetben a paraméterként kapott PaintEventArgs típusú objektum Graphics tulajdonságát kell lekérdeznünk Ennek a megoldásnak az előnye, hogy a vezérlő minden kirajzolásakor automatikusan lefut a mi kódunk is 6

7 Graphics objektum létrehozása (3) Graphics osztály Ha nem közvetlenül egy vezérlőre szeretnénk rajzolni, akkor a Graphics osztály FromImage metódusának segítségével egy háttérben létrehozott kép alapján is hozzáférhetünk a Graphics objektumhoz Lefoglalt erőforrások felszabadítása: ha már nincs szükség a Graphics objektumra, a Dispose() metódusának meghívásával célszerű felszabadítani az általa lefoglalt erőforrásokat 7

8 A GDI+ által használt színstruktúra Színek kezelése Minden színt négy darab 8 bites érték jellemez: Alfa (Alpha) Vörös (Red) Zöld (Green) Kék (Blue) Vörös, Zöld, Kék A szín vörös, zöld illetve kék összetevője, mindegyik 0 és 255 közötti értéket vehet fel (így összesen millió szín állítható elő). A szám minél nagyobb, annál nagyobb a szín intenzitása. Alfa A szín átlátszóságát határozza meg. Szintén 0 és 255 közötti értéket vehet fel, 0 esetén a szín teljesen átlátszó, 255 esetén pedig teljesen átlátszatlan. Példa a fentiek szerint meghatározott színekre R = 0 G = 0 B = 0 A = 255 R = 255 G = 255 B = 255 A = 255 R = 150 G = 150 B = 150 A = 255 R = 200 G = 0 B = 200 A = 255 R = 200 G = 0 B = 200 A = 50 8

9 System.Drawing.Color struktúra Color struktúra Az előzőekben megismert módon egy színt tárol A szín összetevői lekérdezhetők/módosíthatók az A, R, G, B tulajdonságokon keresztül A szín további jellemzői is lekérdezhetőek, pl. GetBrightness(), GetSaturation() Létrehozás szín összetevők alapján A Color struktúra alábbi statikus metódusai az átadott paraméterek alapján visszaadják a megfelelő Color példányt Előre definiált színek A Color struktúra statikus tulajdonságain keresztül név alapján is elérhető néhány gyakran használatos szín, pl. Color.Blue, Color.Black, Color.Yellow A System.Drawing.SystemColors osztály statikus tulajdonságain keresztül elérhető néhány rendszerszín, pl. SystemColors.AppWorkSpace, SystemColors.ButtonFace 9

10 Poziciók, méretek meghatározása A Graphics osztályon keresztül elérhető felületet az alábbi koordinátarendszerként képzeljük el: x y (0,0) (100,50) A koordináták közvetlen megadásán túl az alábbi struktúrák is használhatók: Point : Egy pont X és Y koordinátáját tárolja Size : Egy terület/alakzat szélességét (Width) és magasságát (Height) tárolja Rectangle : Egy téglalap X, Y koordinátáját és szélességét (Width), magasságát (Height) tárolja PointF, SizeF, RectangleF : Hasonlóak, de lebegőpontos értékeket tárolnak 10

11 Pen osztály System.Drawing.Pen osztály Egy Pen objektum segítségével lehet vonalszerű alakzatokat rajzolni Az osztály konstruktora egy színt vár paraméterül A Pen tulajdonságai Color : A toll által húzott vonal színe Width : A toll által húzott vonal szélessége PenType : System.Drawing.Drawing2D.PenType felsorolás egy eleme: Solid Dash Dot DashDot DashDotDot DashCap : Vonalak végeinek lekerekítése (nincs, kerekítés, háromszög) 11

12 DrawLine(... ) metódus segítségével Vonalrajzolás paraméterei Pen objektum Kezdőpont koordinátája Végpont koordinátája Vonal rajzolás y x (x1, y1) (x2, y2) A DrawLine metódus változatai 12

13 Téglalap rajzolás DrawRectangle(... ) metódus segítségével Téglalaprajzolás paraméterei Pen objektum Téglalap bal felső sarka Téglalap méretei (szélesség és magasság) y x (x, y) magasság szélesség A DrawRectangle metódus változatai 13

14 Ellipszis rajzolás DrawEllipse(... ) metódus segítségével Ellipszisrajzolás paraméterei Pen objektum Ellipszist befoglaló téglalap bal felső sarka Ellipszist befoglaló téglalap méretei y x (x, y) szélesség magasság A DrawEllipse metódus változatai 14

15 DrawArc(... ) metódus segítségével Körívrajzolás paraméterei Pen objektum Befoglaló téglalap bal felső sarka Befoglaló téglalap méretei Körív kezdete (x tengellyel bezárt szög) Ívhez tartozó szög Körív rajzolás y x (x, y) β szélesség α magasság A DrawArc metódus változatai 15

16 Zárt sokszög rajzolás DrawPolygon(... ) metódus segítségével Sokszögrajzolás paraméterei Pen objektum Koordinátákat tartalmazó tömb (Point vagy PointF típusú elemek) y x (A[0].x, A[0].y) (A[2].x, A[2].y) (A[1].x, A[1].y) A DrawPolygon metódus változatai 16

17 Feladat Rajzolja meg a megadott számnak megfelelő módon változó ábrát 17

18 System.Drawing.Brush osztály Brush osztály Segítségével kitöltött alakzatokat lehet rajzolni A Brush absztrakt osztály, a kitöltés módjától függően kell példányosítani a leszármazottai közül valamelyiket Brush osztály leszármazottai SolidBrush Egy megadott színnel egyszerű kitöltést végez HatchBrush Sraffozott kitöltést végez TextureBrush Megadott mintával való kitöltést végez LinearGradientBrush Színátmenetet megvalósító kitöltést végez... 18

19 System.Drawing.SolidBrush osztály SolidBrush osztály Egy megadott színnel egyszerű kitöltést végez A kitöltéshez használatos színt (Color) a konstruktorban kell megadni SolidBrush osztály tulajdonságai Color A kitöltéskor használt szín Alkalmazási példa 19

20 HatchBrush osztály System.Drawing.Drawing2D.HatchBrush osztály Egy megadott színnel sraffozott kitöltést végez A sraffozás módját és a kitöltéshez használatos két színt a konstruktorban kell megadni HatchBrush osztály tulajdonságai HatchStyle System.Drawing.Drawing2D.HatchStyle felsorolás egy eleme BackColor A vonalak közötti kitöltés színe ForeColor A vonalak rajzolásához használt szín Alkalmazási példa HatchStyle = DarkVertical BackColor = Color.Blue ForeColor = Color.SkyBlue 20

21 HatchStyle felsorolás értékei 21

22 TextureBrush osztály System.Drawing.Drawing2D.TextureBrush osztály Egy megadott kép segítségével tölti ki az alakzatokat A képet és a kitöltés további paramétereit a konstruktorban kell átadni Alkalmazási példa 22

23 LinearGradientBrush osztály System.Drawing.Drawing2D.LinearGradientBrush osztály A legegyszerűbb színátmenetet megvalósító ecset A konstruktor paraméterei: két pont koordinátái, a megadott első ponthoz tartozó szín, a megadott második ponthoz tartozó szín A konstruktor felüldefiniált változataiban lehetőségünk van még részletesebben megadni a színátmenet megvalósításának módját Alkalmazási példa 23

24 Kitöltött alakzatok Kitöltött alakzatokat rajzoló metódusok Az előzőekben megismert DrawXXX nevű metódusokhoz hasonlóan (ahol ez értelmezhető) léteznek FillXXX nevű metódusok hasonló paraméterekkel, amelyek segítségével lehet kitöltött alakzatok rajzolni. A metódusok első paramétere a használni kívánt Brush objektum, a többi paraméter megegyezik a DrawXXX metódusoknál megismertekkel FillRectangle(... ) Kitöltött téglalap rajzolása FillEllipse(... ) Kitöltött ellipszis rajzolása FillPie(... ) Kitöltött körcikk rajzolása FillPolygon(... ) Kitöltött sokszög rajzolása 24

25 Betűtípusok System.Drawing.Font osztály Egy rajzoláshoz használható betűtípust határoz meg Kapcsolódó típusok FontFamily osztály FontStyle felsorolás (Regular, Bold, Italic, Underline, Strikeout) Font osztály konstruktorai Néhány, a gyakorlatban használható konstruktora 25

26 DrawString(... ) metódus segítségével A metódus paraméterei A megjelenítendő szöveg Betűtípus (Font) Használandó ecset (Brush) X és Y koordináta, esetleg befoglaló téglalap Egyéb paraméterek DrawString metódus változatai Szöveg kirajzolása y x (x, y) Hello világ Egy string megadott paraméterekkel való kirajzolásához szükséges befoglaló téglalap méretét a MeasureString metódus segítségével kérdezhetjük le 26

27 GDI+ használatának lépései Összegzés Graphics objektum létrehozása/lekérdezése A szükséges művelettől függően Pen vagy Brush objektum létrehozása a konstruktorban átadott megfelelő paraméterekkel Ha szükséges, további objektumok létrehozása Color Font stb. A Graphics példány megfelelő metódusainak meghívása 27

28

29