Úvod
Opäť Vás raz všetkých vítam pri ďalšom pokračovaní seriálu o programovaní v jazyku VB.NET. Dnes si okrajovo povieme, že v rodine VB pribudol opäť ďalší mladší brat, tento krát s označením Microsoft Visual Basic 2010. Pokračovať budeme základmi práce s grafikou a vykresľovaním geometrických útvarov pomocou vstavaného GDI+ (Graphics Device Interface).
Visual Basic .NET 2010 – už desiaty prírastok v rodine
Úplne všetky podrobnosti ohľadom nového Visual Studia 2010 alebo konkrétne ohľadom Visual Basic .NET 2010 sa dozviete na oficiálnych stránkach na adrese http://www.microsoft.com/express/ . V prípade potreby sa neostýchajte kontaktovať aj mňa.
Tento krát Microsoft dáva možnosť stiahnuť si aj Trial (skúšobnú) verziu profesionálneho balíka označeného ako Visual Studio 2010 Professional. Pre tých, ktorým opäť stačí Express (voľná) verzia rovnako ako v prípade VB.NET 2008 tak tá správna adresa na stiahnutie je http://www.microsoft.com/express/Downloads/#2010-Visual-Basic
K inštalácii môžem povedať toľko, že ju zvládne každý - je to len jednoduché „preklikanie“ sa pár krokmi a voila, môžete programovať. Pre tých, ktorých napadne otázka či môžu mať naraz aj VB.NET 2008 aj VB.NET 2010 je odpoveď jasná: ÁNO (rovnako ako to bolo už pri predchádzajúcej verzii), takže sa netreba obávať zložitej migrácie medzi jednotlivými verziami alebo naspäť na staršiu verziu či už z dôvodu nedostatočného hardvéru, alebo keď si proste s 2010 navzájom nesadnete.
GDI+ alebo aj vo Visual Basicu sa dá kresliť (jednoducho)
Aj keď sa to možno niekomu bude zdať zvláštne, pravdou je, že aj vo VB.NET sa dá kresliť (a to dokonca efektívne a rýchlo zároveň). Spôsobov je samozrejme viac, no mi si dnes opäť ukážeme ten najzákladnejší z nich a to pomocou menného priestoru System.Drawing a jeho objektov.
Keďže sa budeme venovať tej obyčajnejšej = 2D grafike a zároveň aj obrazovka má iba dva rozmery (výšku a šírku) musíme si uvedomiť, že aj súradnicový systém pomocou ktorého budeme umiestňovať obrazce a obrázky na formulár sa bude skladať z dvoch súradnicových osí – X a Y. Začiatok tejto súradnicovej sústavy (teda bod [0,0] ) sa nachádza v ľavom hornom rohu formulára. Os X je tá horizontálna (vodorovná) a rastie smerom doprava zatiaľ čo hodnoty vertikálnej (zvislej) osi Y rastú smerom dole. Viď obrázok.
O vykresľovanie okna formulára sa stará volanie udalosti Paint formulára. Volá sa vždy, keď je potrebné prekresliť okno formulára, napr.: pri minimalizovaní a opätovnom maximalizovaní formulára, alebo keď okno alebo jeho časť prekryjeme iným oknom a opäť poodhalíme. Dostaneme sa k nej tak, že si ju nalistujeme v rolovacom menu pri editácii zdrojového kódu pod Form1 Events a Paint.
Na kreslenie budeme využívať parameter e (nájdeme ho zadeklarovaný v hlavičke udalosti Paint), ktorý obsahuje všetky potrebné objekty a procedúry.
Ako prvú si ukážeme procedúru Clear, ktorá sa postará o vymazanie či vlastne kompletné prekreslenie priestoru, na ktorý chceme maľovať, určenou farbou. Ja som vybral (najbežnejšiu) čiernu farbu, ktorú nájdeme napr. aj v štruktúre Color. Táto štruktúra obsahuje už množstvo preddefinovaných farieb a tak si stačí len vybrať.
Kompletný kód bude teda vyzerať nasledovne:
Private Sub Form1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
e.Graphics.Clear(Color.Black)
End Sub
Keďže sme si už prichystali „plátno“ na maľovanie, môžeme pokročiť na ďalšiu úroveň a to kreslenie jednoduchých geometrických tvarov.
Úkon kreslenia začneme tým, že si vyberieme farbu pera (alebo štetca, ako chcete). Skôr než farbu peru priradíme, musíme si ho zadeklarovať a to nasledovne (opäť použijem farbu z kolekcie Color):
Dim pero As New Pen(Color.White, 3)
Pozadie už máme prichystané, farbu pera tiež, je teda čas nakresliť prvý tvar. Začneme úsečkou. Aby sme úsečku mohli nakresliť, musíme o nej poznať 5 údajov. Úsečka ako geometrický útvar je určená dvomi bodmi. Podľa súradnicového systému o ktorom sme si už povedali má každý bod 2 súradnice (X a Y) – to už sú štyri údaje a tým piatym, posledným bude jej farba.
Všeobecný zápis teda bude vyzerať takto:
e.Graphics.DrawLine(farba, X1, Y1, x2, y2)
Náš konkrétny zápis bude vyzerať nasledovne:
e.Graphics.DrawLine(pero, 50, 100, 300, 100)
Kompletný zdrojový kód na nakreslenie bielej vodorovnej čiary teda bude vyzerať takto:
Private Sub Form1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
e.Graphics.Clear(Color.Black)
Dim pero As New Pen(Color.White, 3)
e.Graphics.DrawLine(pero, 50, 100, 300, 100)
End Sub
Ako ďalší budeme kresliť obdĺžnik pomocou funkcie DrawRectangle. Prvým parametrom ostáva farba pera, druhým a tretím parametrom sú súradnice ľavého horného bodu. Štvrtý a piaty parameter budú šírka a výška obdĺžnika. Štvorec sa počíta ako špeciálny prípad obdĺžnika, ktorého šírka aj výška sa zhodujú.
pero.Color = Color.Red
pero.Width = 5
e.Graphics.DrawRectangle(pero, 30, 30, 150, 150)
Na obdĺžnik nadväzuje elipsa, ktorá sa kreslí pomocou funkcie DrawEllipse. Parametre funkcie sa presne zhodujú s tými, ktoré sme si popísali pri obdĺžniku. Elipsu teda vlastne z hľadiska VB kreslíme do vymedzeného obdĺžnika. Kružnica, rovnako ako pri obdĺžniku štvorec, je špeciálnym prípadom elipsy. Kružnica je elipsa ktorá sa vkreslí do štvorca.
pero.Color = Color.DodgerBlue
pero.DashStyle = Drawing2D.DashStyle.Dot
e.Graphics.DrawEllipse(pero, 80, 80, 300, 145)
Kompletný zdrojový kód (tento krát bez hlavičky) vyzerá nasledovne:
e.Graphics.Clear(Color.Black)
Dim pero As New Pen(Color.White, 3)
e.Graphics.DrawLine(pero, 50, 100, 300, 100)
pero.Color = Color.Red
pero.Width = 5
e.Graphics.DrawRectangle(pero, 30, 30, 150, 150)
pero.DashStyle = Drawing2D.DashStyle.Dot
pero.Color = Color.DodgerBlue
e.Graphics.DrawEllipse(pero, 80, 80, 300, 145)
Záver
Týmto príkladom sme sa dostali až na koniec dnešného článku. Zvedavci sa môžu s vlastnosťami a metódami objektu pera či funkciami na kreslenie pohrať sami. Tí, ktorí si dôverujú menej môžu počkať do budúceho čísla kde si ukážeme opäť niečo ďalšie z práce s grafikou pomocou GDI+. V prípade záujmu, pripomienok či nápadov som ako vždy dostupný na e-mailovej adrese hrdlica@gmail.com. Veľa šťastia a zdaru pri programovaní a aj v osobnom živote!
S pozdravom,
Peter Hrdlica
