Grafikai lehetőségek

Vizuális és eseményvezérelt programozás 2006–2007, 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 © Szénási Sándor, BMF NIK, 2006–2007 [email protected]

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.

V1.1

2007. március 3.

© Szénási Sándor, BMF NIK, 2006–2007 [email protected]

2

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é

V1.1

2007. március 3.


3

System.Drawing névtér alterei • System.Drawing – 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

V1.1

2007. március 3.


4

Graphics osztály • System.Drawing.Graphics – 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

V1.1

2007. március 3.


5

Graphics osztály • Graphics objektum létrehozása (2) – 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

V1.1

2007. március 3.


6

Graphics osztály • Graphics objektum létrehozása (3) – 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 V1.1

2007. március 3.


7

Színek kezelése • A GDI+ által használt színstruktúra – Minden színt négy darab 8 bites érték jellemez: 7 6 5 4 3 2 1 0 7 6 5 4 3 2 1 0 7 6 5 4 3 2 1 0 7 6 5 4 3 2 1 0

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 2563 ≈ 16 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

V1.1

2007. március 3.

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

Color struktúra • System.Drawing.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

V1.1

2007. március 3.


9

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 (0,0)

y (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 V1.1

2007. március 3.


10

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)

V1.1

2007. március 3.


11

Vonal rajzolás • DrawLine( ... ) metódus segítségével x • Vonalrajzolás paraméterei – Pen objektum – Kezdőpont koordinátája – Végpont koordinátája

y (x1, y1) (x2, y2)

• A DrawLine metódus változatai

V1.1

2007. március 3.


12

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

(x, y) magasság

szélesség

• A DrawRectangle metódus változatai

V1.1

2007. március 3.


13

Ellipszis rajzolás • DrawEllipse( ... ) metódus segítségével x • Ellipszisrajzolás paraméterei – Pen objektum y – Ellipszist befoglaló téglalap bal felső sarka – Ellipszist befoglaló téglalap méretei

(x, y) magasság

szélesség

• A DrawEllipse metódus változatai

V1.1

2007. március 3.


14

Körív rajzolás • DrawArc( ... ) metódus segítségével x • Körívrajzolás paraméterei – Pen objektum y – 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

(x, y)

β

α

magasság

szélesség

• A DrawArc metódus változatai

V1.1

2007. március 3.


15

Zárt sokszög rajzolás • DrawPolygon( ... ) metódus segítségével x • Sokszögrajzolás paraméterei – Pen objektum – Koordinátákat tartalmazó tömb (Point vagy PointF típusú elemek)

(A[2].x, A[2].y)

y (A[0].x, A[0].y)

(A[1].x, A[1].y)

• A DrawPolygon metódus változatai

V1.1

2007. március 3.


16

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

V1.1

2007. március 3.


17

Brush osztály • System.Drawing.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 – ...

V1.1

2007. március 3.


18

SolidBrush osztály • System.Drawing.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

V1.1

2007. március 3.


19

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

V1.1

2007. március 3.


20

http://www.devhood.com/training_modules/dist-d/AdvancedGUI/advancedgui.htm

HatchStyle felsorolás értékei

V1.1

2007. március 3.


21

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

V1.1

2007. március 3.


22

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

V1.1

2007. március 3.


23

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

V1.1

2007. március 3.


24

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

V1.1

2007. március 3.


25

Szöveg kirajzolása • DrawString( ... ) metódus segítségével x • A metódus paraméterei – – – –

A megjelenítendő szöveg y Betűtípus (Font) Használandó ecset (Brush) X és Y koordináta, esetleg befoglaló téglalap – Egyéb paraméterek

(x, y)

Hello világ

• DrawString metódus változatai

• 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 V1.1

2007. március 3.


26

Összegzés • GDI+ használatának lépései – 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

V1.1

2007. március 3.


27

Grafikai lehetőségek

Recommend Documents