Objektumok és osztályok Az objektumorientált programozás alapjai Rajzolás tollal, festés ecsettel A koordinátarendszer A vektorgrafikában az egyes grafikus elemeket (pontokat, szakaszokat, köröket, stb.) egy koordinátarendszerben helyezzük el. A Windows rendszerben minden objektumnak (űrlap, gomb, stb.) saját koordinátarendszere van. A koordinátarendszer origója az ablak bal felső sarka, az x tengely vízszintesen jobbra, az y tengely függőlegesen lefelé mutat. Ez természetesen következménye annak, hogy egy ablak átméretésekor az ablak bal felső sarka marad meg, a többi részét csökkenti vagy növeli a felhasználó.
A koordinátarendszerben az egység a képpont, ebből következik, hogy a megrajzolható terület a képernyő felbontásától függ. Ezért ha olyan koordinátákat adunk meg, amelyek az adott felbontás mellett nincsenek a képernyőn, nem kapunk hibajelzést, csupán nem jelenik meg az ábra. Ha egy programot elindítunk, akkor a fő ablakának bal felső sarkát a képernyő koordinátarendszerében adjuk meg. Ha ez az ablak egy újabb objektumot nyit meg, akkor annak bal felső sarkát már a fő ablak koordinátarendszerében kell megadnunk stb., tehát minden objektumot a szülő objektumához viszonyítunk. Ez viszont azt is jelenti, hogy egy objektum koordinátái nem változnak, ha a szülő objektumot a felhasználó mozgatja. Ilyenkor csupán a szülő objektum bal felső sarkának koordinátái módosulnak az őt létrehozó objektumhoz képest. Graphics osztály használata Rajzoláshoz három objektum szükséges: egy toll egy ecset, amivel rajzolunk, egy objektum (vászon) amire rajzolunk és egy objektum („kéz”), ami rajzol. A Windowsban e két utóbbi összetartozik: a Me űrlapra például a Me.CreateGraphics, a pb képdobozra pedig a pb.CreateGraphics objektum metódusaival rajzolhatunk.
1
Ezek a grafikus objektumok a Graphics osztály példányai. Különlegességük, hogy nem kell őket külön a New kulcsszóval példányosítani, a fenti hivatkozás esetén automatikusan létrejönnek. Ha az űrlapra a Me.CreateGraphics objektum metódusaival közvetlenül rajzolunk, meglehetősen hosszú programsorok keletkeznek. Ráadásul az objektum is minden hivatkozáskor újra és újra létrejön. Kevesebbet kell írnunk és az erőforrásokat is kevésbé terheljük, ha a grafikus objektumot egy alkalmas pillanatban pl. g néven „eltároljuk”. A deklarációs részben elhelyezett Dim utasítás nem hoz létre új objektumot, csupán jelzi, hogy lesz g néven egy grafikus objektum: Public Class Form1 Dim g As Grapgics Itt még nem célszerű a Dim g As Graphics = Me.CreateGraphics utasítással a grafikus objektumot megadni, mert az űrlap csak a Load esemény hatására jön létre. Ekkor áll be pl. az űrlap kezdeti mérete is, tehát az ehhez tartozó eseménykezelő eljárásba célszerű tennünk az értékadást:
A Pen osztály A tényleges ábra elkészítéséhez a g objektummal létrehozott „kézbe” még tennünk kell egy rajzoló vagy festő eszközt. Rajzoláshoz egy vagy több tollat (a Pen osztály objektumai), míg festéshez egy vagy több ecsetet (Brush osztály) használhatunk. A toll két legfontosabb paramétere a szín (Color) és a vastagsága (Width). A következő deklaráció egy új tollat hoz létre, melynek színe kék, vastagsága pedig 3 pixel. (A szín megadása kötelező, a vastagság elhagyható.): Dim toll As New Pen (Color.Blue, 3) A toll paramétereit a programunk során bármikor módosíthatjuk, így egyszerű ábra esetén elég egy tollat definiálni, melynek változtatjuk tulajdonságait: toll.Color = Color.Red toll.Width = 10 A fentiek helyett használhatjuk a Pens nevű osztály előre definiált 1 vastagságú tollait is. Ebben az esetben nem kell toll objektumot külön definiálni, hanem ahol egy kék tollra van szükségünk, ott elegendő beírni a toll helyett, hogy Pens.Blue. Az így kapott toll színét listából választhatjuk ki. Rajzolás tollal A tollal való rajzoláshoz a Graphics osztály Draw-val kezdődő metódusait kell meghívni. A metódus első paramétere minden esetben az a toll, amellyel a rajzolást végezzük. Ezek közül példaként nézzünk meg hármat:
2
Szakasz rajzolása a DrawLine(toll x1, y1, x2, y2) metódussal történik, ahol (x1, y1) a szakasz kezdőpontja, (x2, y2) pedig a szakasz végpontja. Ha a kezdőpont megegyezik a végponttal, akkor egy pontot kapunk. Téglalap rajzoláséhoz a DrawRectangle (toll, x, y, w, h) metódust használhatjuk, ahol (x, y) a téglalap bal felső csúcsa, a w a szélessége, h pedig a magassága. A w és h értéke negatív is lehet. Kör (és ellipszist) a DrawEllipse (toll, x, y, w, h) metódus meghívásával rajzolhatunk, itt a paraméterek a kört (ellipszist) tartalmazó téglalap adatai. Példa: A következő program az OK gomb hatására egy tiltótáblaszerű alakzatot rajzol: Public Class Form1 Dim g As Graphics Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load g = Me.CreateGraphics End Sub Private Sub OK_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles OK.Click Dim toll As New Pen(Color.Red, 5) g.DrawLine(toll, 100, 100, 150, 150) g.DrawEllipse(toll, 100, 100, 50, 50) toll.Color = Color.Black g.DrawRectangle(toll, 80, 80, 90, 90) End Sub End Class
Point és a Rectangle osztály A Visual Basic hasznos absztrakciója a pont és a téglalap objektum. Egy pontot (Point osztály) a koordinátáival adhatunk meg. A téglalapokat (Rectangle osztály) pedig négy adattal: ezek a bal felső sarok X és Y koordinátái, továbbá a szélessége (width) és a magassága(Height). Példa: Két pontot (p, q) és egy téglalapot (t) hozzunk létre és ezek segítségével rajzoljuk meg az előző ábrát. A t téglalap adatait utólag módosítjuk: Public Class Form1 Dim g As Graphics Private Sub OK_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles OK.Click Dim toll As New Pen(Color.Red, 5) Dim p, q As Point Dim t As New Rectangle(100, 100, 50, 50) p = New Point(100, 100) q = New Point(150, 150) g.DrawLine(toll, p, q) g.DrawEllipse(toll, t) toll.Color = Color.Black t.X = 80 t.Y = 80 t.Width = 90 t.Height = 90 g.DrawRectangle(toll, t) End Sub
3
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load g = Me.CreateGraphics End Sub End Class
Ecset használata Kitöltött alakzatok készítéséhez az ecsetet (Brush) kell használnunk, melyből többféle is létezik, a kitöltéstől függően. A legegyszerűbb ecset egy színnel tölti a területet, míg színátmenet készítéséhez vagy adott pixelgrafikus ábrával való mintázáshoz stb. különleges ecseteket kell készítenünk. Az ecsettel való festéshez a Graphics osztály Fill-el kezdődő metódusait használjuk, melynek első paramétere megegyezik a rajzolásnál használt neki megfelelő metódus adataival. Az egyszínű ecset a SolidBrush osztály tagja, létrehozásakor csupán a színét kell megadnunk. Példánk egy nagy piros foltot fest a képernyőre: Public Class Form1 Dim g As Graphics Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load g = Me.CreateGraphics End Sub Private Sub OK_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles OK.Click Dim ecset1 As New SolidBrush(Color.Red) Dim t As New Rectangle(100, 100, 50, 50) g.FillEllipse(ecset1, t) End Sub End Class
A legáltalánosabb esetben az ecset mintázatát (ahogy a festők esetében a festőhengerét) egy pixelgrafikus képben adhatjuk meg. A képet pl. a Paint segítségével készíthetjük el. Az ilyen ecset a TextureBrush osztály tagja: Dim ecset2 As New TextureBrush(Bitmap.FromFile(„C:\ecsetem.bmp”)) Dim t As New Rectangle(100, 100, 300, 300) g.FillRectangle(ecset2, t)
Szöveg kiírása, Font osztály Szöveg kiírásához a Graphics osztály DrawString metódusát használjuk. A metódusnak 5 paramétere van: a kiírandó szöveg, a betű formai adatai (font), a festéshez használt ecset és a szöveg bal felső sarkának koordinátái. A fontot legegyszerűbben úgy adhatjuk meg, hogy egy másik objektum font tulajdonságára hivatkozunk. A következő sorban pl. a szöveg kiíratása a Button1 gomb betűkészletével történik: g.DrawString( „Mi ez?”, Button1.Font, Brushes.Black, 100, 100) 4
A fontot, mint objektumot természetesen magunk is definiálhatjuk. Ekkor a szövegszerkesztésben megismert három adatot, a típust, a méretet és a stílust kell megadnunk: Dim betű As New Font („Arial”, 30, FontStyle.Bold) g.DrawString( „Mi ez?”, betű, Brushes.Black, 100, 100) rajzolás DrawArc DrawBezier DrawClosedCurve DrawCurve DrawEllipse DrawImage DrawIcon DrawLine DrawLines DrawPath DrawPie
festés
alakzat Ívet rajzol Bezier-görbét rajzol Zárt görbét rajzol/tölt ki Görbét rajzol Ellipszist rajzol/tölt ki Képet rajzol Ikont rajzol Vonalat húz Vonalakat húz Grafikus görbét rajzol/tölt ki Körszeletet rajzol/tölt ki
FillClosedCurve FillEllipse
FillPath FillPie
Feladatok: 1)
Rajzoljuk meg az olimpiai ötkarikát! Az egyes színek sorrendje az első sorban kék, fekete, piros, a második sorban pedig rendre sárga, zöld.
2) 3) 4) 5) 6)
Vonalkázzunk be átlósan egy négyzetet! Rajzoljunk négyzethálót! Rajzoljuk meg egy körsort! Rajzoljuk meg a sakktáblát! Rajzoljunk céltáblát!
5
