Visual Basic.NET – 10. diel

Peter Hrdlica  /  25. 08. 2010, 00:00

Dnes dokončíme záležitosti spojené s grafikou a s rozhraním GDI+. Ukážeme si pár nových prvkov a techník a opäť ako vždy doplníme potrebným množstvom obrazového materiálu. Príjemné čítanie!

Úvod

           

            Prajem príjemný dobrý deň. Tak ako som sľúbil, dnes budeme pokračovať v našom seriály so základmi vykresľovania pomocou GDI+. Ukážeme si ako nakresliť ďalší obrazec a ako rôzne pracovať s jeho výplňou a aj to ako na formulár vykreslíme obrázok, ktorý sme si napr. stiahli niekde z internetu. A keďže žiadny program nemôže zostať bez popisu tak si ukážeme ako na formulár pomocou GDI+ dostať aj nejaký ten text.

 

(Nepravidelné) mnohouholníky – polygóny

 

            Ako príklad kresby mnohouholníka som si vybral lichobežník. Definícia znie: „Lichobežník je štvoruholník, ktorého dve strany sú rovnobežné (podstavy) a dve rôznobežné (ramená).  Po definícii pera sa dáme na definíciu bodov, z ktorých sa bude mnohouholník skladať:

 

Dim bod1 As New Point(50, 50) 'ľavý horný bod

Dim bod2 As New Point(150, 50) ' pravý horný bod

Dim bod3 As New Point(180, 150) ' pravý dolný bod  

Dim bod4 As New Point(20, 150) ' ľavý doolný bod

 

Funkcia DrawPolygon má dva parametre: prvý je pero a druhý je pole bodov, ktoré sa určujú tvar polygónu (mnohouholníka). Preto ešte musíme body, ktoré sme si už zadeklarovali, vložiť do poľa:

 

Dim pole_bodov As Point() = {bod1, bod2, bod3, bod4}

 

Miesto deklarácie bodu cez Point ho môžeme deklarovať aj cez PointF. Hlavným rozdielom týchto dvoch určení bodu je v tom, že Point uchováva súradnice X a Y v premennej typu Integer, zatiaľ čo PointF (f ako floating = plávajúci, pohyblivý) ukladá čísla s desatinnou čiarkou, vďaka čomu sa môžete dopracovať vyššej presnosti. Teraz nám už neostáva nič iné, iba nakresliť obrazec:

 

e.Graphics.DrawPolygon(pero, pole_bodov)

Kresba lichobežníka

Ak bol Váš postup správny, dostanete podobný obrázok. Ak ste prehodili napr. tretí a štvrtý bod, dostanete akýsi tvar pripomínajúci presýpacie hodiny.

Rozšírená práca s obrazcami

 

            Doteraz sme obrazce kreslili tak, že vidieť bol iba ich obrys a pozadie presvitalo z objektov pod ním. V tejto chvíli si ukážeme ako obrazce rôznymi spôsobmi vyplniť. K vyfarbovaniu geometrických obrazcov sa využívajú funkcie s predponou „fill“ ako napr. FillEllipse alebo FillRectangle. Najdôležitejšia zmena oproti funkciám s predponou „draw“ ako napr. DrawEllipse DrawRectangle, ktoré sme si popísali už v minulom diely, je prvý parameter. Tento krát nebudeme používať pero (Pen), ale štetec – Brush. Deklarácia vyzerá nasledovne:

 

Dim stetec As New SolidBrush(Color.Beige)

 

Aby sme nadviazali na predchádzajúci text, vypĺňať budeme náš lichobežník. Použijeme rovnaké body ako v predchádzajúcom príklade a teda funkcia na kresbu bude vyzerať približne takto:

 

e.Graphics.FillPolygon(stetec, pole_bodov)

 

Kresba lichobežníka s výplňou

 

 

Pokiaľ by sme chceli vyfarbovať obrazec „inak“, napr. šrafovať, kresliť do výplne krúžky, bodky, trojuholníčky a i. tak musíme volať namespace System.Drawing.Drawing2D v hlavičke programu.

 

Pokročilí štetec nadefinujeme pomocou triedy HatchBrush a to zhruba nasledovne:

 

Dim iny_stetec As New HatchBrush(HatchStyle.Sphere, Color.CornflowerBlue, Color.AliceBlue)

A tento štetec opäť aplikujeme na náš, snáď už obľúbený, lichobežník:
 

e.Graphics.FillPolygon(iny_stetec, pole_bodov)

 Textúrová výplň obrazca

 

Vzor výplne môžete vyberať zo skutočne veľkého množstva. Len pre ilustráciu vymenujem zopár druhov:  HorizontalBrick, Percent40, DiagonalCross, Wave, Weave, Sphere, SolidDIamond, ZigZag a mnohé ďalšie.

 

Ako ďalší druh štetca si ukážeme LinearGradientBrush. Tento štetec vypĺňa obrazec plynulým prechodom dvoch farieb. Konštruktor má 4 parametre: počiatočný bod, konečný bod a dve farby pričom prvá patrí k počiatočnému a druhá ku koncovému bodu. Môj zápis vyzerá takto:

 

Dim stetec As New LinearGradientBrush(New Point(50, 50), New Point(180, 150), Color.PaleVioletRed, Color.Chartreuse)

 

Štetec som opäť aplikoval na lichobežník a dostal som tento výsledok:

Farebný prechod ako výplň lichobežníka

 

Aktuálne sa výplň prelína z ľavého horného rohu smerom k pravému dolnému. Stačí zmeniť počiatočný a konečný bod pre dosiahnutie iného prelínania. Nasledujúci kód je zmenený tak, že sa bude farba prelínať od hornej podstavy k spodnej.

 

Dim stetec As New LinearGradientBrush(New Point(90, 50), New Point(90, 150), Color.PaleVioletRed, Color.Chartreuse)

DrawString alebo bez popisku ani krok

            Geometrické tvary nie sú to jediné, čo môžeme pomocou GDI+ na formulár kresliť. Tak si predstavte, že pomocou toho čo ste sa už naučili nakreslíte nejaký graf. A čo teraz? Ako budete vedieť ktorá časť grafu patrí ku ktorým dátam? Jednoducho, pridáme text pomocou funkcie DrawString. Prvým parametrom tejto funkcie nie je farba pera, ale samotný textový reťazec, ktorý budeme vykresľovať (draw = kresliť). Druhým parametrom bude rez písma, teda font; tretím farba a posledným, štvrtým, bude počiatočný bod od ktorého sa text bude vykresľovať. Môj zápis vyzerá takto:

 

e.Graphics.DrawString("Toto je testovací text", Me.Font, Brushes.Crimson, 80, 80)

 

Veľkosť aj rez písma som si predal z nastavení formulára a farbu vybral priamo v konštruktore. Ak by sme aj rez písma chceli vyberať v konštruktore metódy DrawString zápis by vyzeral použili by sme príkaz podobný ako pri zadávaní nového bodu:


New Font("Courier New", 12, FontStyle.Bold)


Celý zápis by vyzeral teda takto:


e.Graphics.DrawString("Toto je testovací text", New Font("Courier New", 12, FontStyle.Bold), Brushes.Crimson, 80, 80)


DrawBitmap alebo ako dostať na formulár hotový obrázok

            Posledný zo spôsobov práce pomocou GDI+ ktorý si dnes ukážeme je vykresľovanie hotového obrázku na formulár. K tomu slúži funkcia DrawBitmap. Tá obsahuje niekoľko parametrov z ktorých si povieme o dvoch a to o ceste k obrázku a o parametri určujúcom jeho ľavý horný roh.

 

e.Graphics.DrawImage(New Bitmap("c:cesta_k_obrazku.pripona"), New Point(0, 0))

 

Cestu zadávame cez New Bitmap preto, aby si VB vopred vytvoril z predaného obrázku mapu bitov a tie potom po jednom vykreslil na určené miesto. Spomenul som, že funkcia DrawImage má viac parametrov, medzi nimi sa nachádza napr. možnosť zmeny šírky a výšky, možnosť „napasovať“ obrázok do určitého obdĺžnika a i.

 

Záver

            Týmto ste dočítal sériu zameranú na programovanie grafických prvkov a efektov vo VB.NET pomocou rozhrania GDI+. Ak máte nejaké otázky či návrhy ohľadom práce s grafikou, prípadne s niečím iným, ten správny e-mail kde ma môžete kontaktovať je hrdlica@gmail.com. V ďalšom čísle sa už opäť budeme zaoberať inou problematikou. Zatiaľ Vám prajem veľa úspechov a bezchybného kódu.

 

S pozdravom,

Peter Hrdlica



 

 

Neprehliadnite: