Začátečník

Pokročilý

Profesionál

Grafický subsystém GDI+ /1. díl

Představení grafických možností platformy .NET

 

Budete potřebovat přibližně 45 minut

Operační systém použitý v příspěvku: Windows XP

Vývojové nástroje: Visual Basic .NET

 

 

Milí čtenáři,

 

v dnešním a budoucím vydání se podíváme blíže na nový grafický subsystém, neboli grafické aplikační programové rozhraní (API), které přináší platforma .NET. Jméno tohoto grafického systému je GDI+ (angl. Graphics Device Interface). Ve výkladu se podíváme na nové možnosti, které jsou pro programátory více než přínosné. Dnes se naučíme kreslit jednoduché geometrické obrazce, jako jsou úsečky, obdélníky, vybarvené obdélníky a obdélníky s gradientní výplní. Příště se podíváme na Bezierovy křivky, kardinální spline křivky a jiná pokročilá témata. Tedy, vzhůru do GDI+!

 

Obsah

GDI+ a jeho místo v .NET dílně

Jmenné prostory pro GDI+

Souřadnicový systém

GDI+ v akci: Tvorba objektu Graphics

GDI+ v akci: Kreslení úsečky

GDI+ v akci: Kreslení obdélníku

GDI+ v akci: Kreslení vybarveného obdélníku

GDI+ v akci: Kreslení obdélníku s gradientní výplní

 

 

GDI+ a jeho místo v .NET dílně

 

Grafický systém GDI+ je nástupcem již staršího a poněkud zastaralého systému GDI. Pokud situaci hodně zjednodušíme, můžeme prohlásit, že grafický systém GDI+ je zodpovědný za vše, co se nachází na počítačové obrazovce. Pro vás, jako programátory ve VB .NET je ovšem důležitější skutečnost, že nový systém vám dovoluje provádět doposud nevídané věci, a to cestou velmi jednoduchou, dokonce bych řekl, že až intuitivní. Vše co GDI+ nabízí je moderně „zaobaleno“ do velkého množství tříd a jmenných prostorů. Pokud přicházíte z Visual Basicu verze 6.0, možná budete po prvních zkušenostech s GDI+ poněkud zklamáni tím, že „všechno je jinak“. Ano, způsob, jakým prováděl grafické operace VB 6.0 je na míle vzdálený tomu, se kterým se setkáte ve VB .NET. Ovšem nevěšte hlavu! Pokud se naučíte správně a efektivně aplikovat grafické algoritmy relevantní pro .NET platformu, budete moci daleko snadněji generovat mnohem složitější a také působivější grafické obrazce.

 

GDI+ nabízí rozšíření především v následujících oblastech:

 

  1. Práce s grafikou ve dvourozměrném (2D) prostoru

Nových metod a technik, které můžete při kreslení 2D obrazců využít je opravdu velké množství. Níže uvedená tabulka představuje výčet těch nejmarkantnějších změn:   

 

Antialiasing

Při renderování křivek, ale i jiných grafických objektů dochází velmi často k vzniku „zubatých“ hran. Pokud nebudete pracovat jenom s horizontálními nebo vertikálními křivkami, určitě se s neželaným efektem „zubatosti hran“ střetnete. Aby i různorodé křivky a geometrické tvary působily uhlazeně, můžete využít výhod techniky zvané Antialiasing. V podstatě jde o vytvoření plynulého barevného přechodu mezi barvou křivky a pozadím, na kterém je křivka kreslena.   

Kardinální spline křivky

Kardinální spline křivky si můžete představit jako soubor menších křivek, ze kterých je vytvářena jedna větší křivka. Zvláštností je, že přechod mezi jednotlivými body je zcela plynulý, tedy nedochází ke vzniku ostrých hran při „napájení“ jedné křivky do druhé. Další zajímavostí je možnost definice tzv. faktoru napětí, který určuje, jak moc bude křivka v „přechodních“ bodech ohýbána.  

Alpha Blending

Technika pro nastavování průhlednosti grafických objektů. Potenciálních stupňů průhlednosti je 256, stupně lze tedy volit z intervalu <0, 255>. Stupeň 0 znamená nulovou průhlednost, stupeň 255 pak kompletní průhlednost.  

Gradientní výplně

Gradientní výplní se rozumí plynulý přechod z jedné barvy do druhé. Pomocí tohoto oblíbeného efektu můžete snadno vygenerovat region s různým typem barevného přechodu.

Bezierovy křivky

Bezierova křivka je speciální křivka, která je (v nejjednodušším provedení) tvořena počátečním a koncovým bodem a dvěma řídícími body. Nastavováním polohy řídících bodů lze plynule měnit tvar samotné křivky. 

Transformace

Pomocí nové třídy Matrix lze uskutečňovat transformace grafických objektů (rotace, posunutí atd.).

Škálovatelné regiony

Regiony jsou ukládány ve světových souřadnicích a lze na ně aplikovat jakékoliv grafické transformace pomocí transformační matice.

 

  1. Práce s obrázky

 

Velké množství grafických formátů

Grafický subsystém GDI+ obsahuje podporu pro větší počet nativních grafických formátů. Jde o tyto formáty: .BMP, .GIF, .JPEG, .Exif, .PNG, .TIFF, .ICON, .WMF, .EMF.

Nové grafické operace

GDI+ vám dovoluje aplikovat na rastrové obrázky nové algoritmy např. přizpůsobení jasu, kontrastu, rotace, zešikmení atd.

 

 

  1. Typografická rozšíření    

      

Lepší čitelnost textu na LCD obrazovkách

Technologie ClearType od společnosti Microsoft zvyšuje čitelnost textu na LCD obrazovkách. Do oblasti působnosti technologie spadají také pokročilé algoritmy pro vyhlazování hran textových jednotek. 

 

 

Jmenné prostory pro GDI+

 

Jádro funkčnosti grafického systému GDI+ je zapouzdřeno do více jmenných prostorů, které si nyní představíme. Hlavním jmenným prostorem je System.Drawing, obsahující třídy pro základní manipulaci s grafickými objekty. Pokud budete chtít renderovat pokročilejší geometrické obrazce, zcela jistě „zavadíte“ i o prostor jmen s názvem System.Drawing.2D. Budete-li potřebovat generovat specifické fonty, je vám k dispozici jmenný prostor System.Drawing.Text a pro modifikaci rastrových obrázků lze zase využít dovedností jmenné prostoru System.Drawing.Imaging. Aby byl výčet prostorů jmen úplný, je zapotřebí vzpomenout ještě dva jmenné prostory, a to System.Drawing.Design a System.Drawing.Printing.     

 

 

Souřadnicový systém

 

Renderování, neboli vykreslování grafických obrazců se ve většině případů bude uskutečňovat na ploše formuláře. Proto bude vhodné, když si tento grafický region popíšeme podrobněji. Plocha formuláře, na kterou lze umísťovat grafické útvary, se nachází v rovině, ve které pozici objektů determinují jednotlivé souřadnice na horizontální (x-ové) a vertikální (y-ové) ose. Počátkem souřadnicového systému formuláře je jeho levý horní roh, jenž disponuje nulovými souřadnicemi (0,0). Koncový bod je pak určen jako pravý dolní roh formuláře. Nejmenší bod formuláře se nazývá pixel, nebo také obrazovkový bod. Grafický systém GDI+ nabízí několik struktur, které určují pozici objektu na grafické ploše. Mezi struktury patří Point, Size a Rectangle. Tyto struktury určují pozici regionů pomocí parametrů typu Integer. Všechny uvedené struktury mají ještě své dvojníky PointF, SizeF a RectangleF, ve kterých jako parametry vystupují čísla s pohyblivou řádovou čárkou a jednoduchou přesností (Single).        

 

 

GDI+ v akci: Tvorba objektu Graphics

 

Pokud budete chtít kreslit grafiku, je potřebné za tímto účelem vytvořit speciální grafický objekt s názvem Graphics. Tento objekt představuje plochu, na kterou lze umísťovat grafické obrazce. Touto plochou může být třeba plocha formuláře, nebo plocha určeného ovládacího prvku. Při tvorbě grafického objektu Graphics tak ve skutečnosti získáme přístup k objektu Graphics, jenž představuje kreslící plochu blíže určeného objektu (např. formuláře). Tuto situaci zachycuje následující výpis zdrojového kódu:

 

        Dim graf_01 As Graphics

        graf_01 = Me.CreateGraphics()  

 

V kódu je deklarována objektová proměnná graf_01, do které je následně přiřazen, pomocí metody CreateGraphics, odkaz na objekt Graphics aktivního formuláře (Me). Takto lze získat přístup k objektu Graphics formuláře, neboli k samotné kreslící ploše formuláře. Na tuto plochu pak můžeme začít umísťovat další grafické obrazce.

 

 

GDI+ v akci: Kreslení úsečky

 

Jestliže jste úspěšně vytvořili hlavní grafický objekt, můžete pokračovat v „malování“ dalších geometrických útvarů. Následující programový kód zabezpečí vykreslení úsečky.

 

 

        Dim graf_01 As Graphics

        Dim pero_01 As New Pen(Color.Black, 2)

        graf_01 = Me.CreateGraphics()

        graf_01.DrawLine(pero_01, 50, 40, 120, 200)

        pero_01.Dispose()

        graf_01.Dispose()

 

Zde si můžete všimnout použití nového objektu Pen, jenž reprezentuje „grafické pero“, se kterým je vykreslena samotná úsečka. Při deklaraci grafického pera je specifikována jeho barva (Color.Black) a tloušťka (2). Abyste vyrenderovali úsečku, použijte metodu DrawLine objektu Graphics. Metoda DrawLine pracuje s několika parametry. Především je to objekt Pen a x-ové a y-ové souřadnice počátečního a koncového bodu úsečky. Po realizaci primárního programovacího algoritmu jsou prostřednictvím volání metody Dispose uvolněny z paměti grafické objekty Graphics a Pen.  

 

Po vykonání požadovaných grafických operací byste měli vždy zavolat metodu Dispose, která zabezpečí, že se uvolní paměťové zdroje spjaté s alokací příslušných grafických objektů.

 

Výsledek práce kódu můžete vidět na obr. 1.

 

 

Obr. 1 – Generování úsečky pomocí metody DrawLine

 

Pokud si prohlédnete obr. 1 pozorněji, určitě spatříte efekt „zubatosti“ při vykreslování úsečky. Abyste tento nežádoucí efekt eliminovali, doplňte předchozí ukázku programového kódu takto:

 

        Dim graf_01 As Graphics

        Dim pero_01 As New Pen(Color.Black, 2)

        graf_01 = Me.CreateGraphics()

        graf_01.SmoothingMode = Drawing.Drawing2D.SmoothingMode.AntiAlias

        graf_01.DrawLine(pero_01, 50, 40, 120, 200)

        pero_01.Dispose()

        graf_01.Dispose()

 

A výsledek:

 

 

Obr. 2 – Generování úsečky pomocí metody DrawLine a aktivního Antialiasingu

 

Vhodným nastavením vlastnosti SmoothingMode objektu Graphics lze minimalizovat vytváření „schodkovitých“ přechodů při malování úsečky.

 

 

GDI+ v akci: Kreslení obdélníku

 

Tvorba obdélníku je stejně snadná jako kreslení úsečky. Podívejte se nejdříve na programový kód, a pak si k němu něco řekneme.

 

        Dim obdl_01 As New Rectangle(10, 10, 200, 200)

        Dim pero_01 As New Pen(Color.Black, 2)

        Dim graf_01 As Graphics

        graf_01 = Me.CreateGraphics()

        graf_01.SmoothingMode = Drawing.Drawing2D.SmoothingMode.AntiAlias

        graf_01.DrawRectangle(pero_01, obdl_01)

        pero_01.Dispose()

        graf_01.Dispose()

 

Na vykreslení obdélníku je nevyhnutné deklarovat objekt Rectangle, jenž charakterizuje podobu vytvářeného obdélníku. Obdélník je definován x-ovými a y-ovými souřadnicemi levého horního a pravého dolního rohu. Proces samotného vykreslování je pod patronátem metody DrawRectangle, která přijímá dva parametry (objekty Pen a Rectangle). Finální podobu obdélníku znázorňuje obr. 3.

 

 

Obr. 3 – Generování obdélníku pomocí metody DrawRectangle

 

 

GDI+ v akci: Kreslení vybarveného obdélníku

 

Lehkou obměnou předchozího fragmentu programového kódu lze docílit toho, aby byl obdélník vyplněn uživatelskou barvou.

 

        Dim obdl_01 As New Rectangle(10, 10, 200, 200)

        Dim br_01 As New SolidBrush(Color.Gold)

        Dim graf_01 As Graphics

        graf_01 = Me.CreateGraphics()

        graf_01.SmoothingMode = Drawing.Drawing2D.SmoothingMode.AntiAlias

        graf_01.FillRectangle(br_01, obdl_01)

        br_01.Dispose()

        graf_01.Dispose()

 

Pamatujte, že vždy, když budete chtít vytvořit grafický objekt s výplní, budete muset definovat objekt grafický štětec (Brush), jenž specifikuje barvu výplně. V našem příkladě jde o objekt SolidBrush, který specifikuje výběr barvy pro zabarvení objektu Rectangle. Vykreslení pak uskuteční metoda FillRectangle, která pracuje se dvěma parametry (objekt grafický štětec SolidBrush a objekt Rectangle). 

 

Výsledek:

 

 

Obr. 4 – Generování obdélníku s barevnou výplní pomocí metody FillRectangle

 

 

GDI+ v akci: Kreslení obdélníku s gradientní výplní

 

Chcete-li dosáhnout skutečně impresivních efektů, můžete nakreslit obdélník s gradientní výplní.

 

        Dim obdl_01 As New Rectangle(10, 10, 200, 200)

 

        Dim br_01 As New System.Drawing.Drawing2D.LinearGradientBrush _

        (obdl_01, Color.DeepSkyBlue, _

        Color.FloralWhite, _

        Drawing.Drawing2D.LinearGradientMode.ForwardDiagonal)

 

        Dim graf_01 As Graphics

        graf_01 = Me.CreateGraphics()

        graf_01.SmoothingMode = Drawing.Drawing2D.SmoothingMode.AntiAlias

        graf_01.FillRectangle(br_01, obdl_01)

        br_01.Dispose()

        graf_01.Dispose()

 

Výsledek:

 

 

Obr. 5 – Generování obdélníku s gradientní výplní

 

Pro vytvoření plynulého barevného přechodu se používá speciální grafický štětec (objekt LinearGradientBrush), jenž se nachází v jmenném prostoru System.Drawing.Drawing2D. Pomocí tohoto štětce můžete rovněž určit počáteční a koncovou barvu, podobně jako i styl přechodu barev, jenž má být aplikován. Pro vykreslení grafického obrazce použijeme již „starou známou“ metodu FillRectangle.  

 

 

V příští části si ukážeme použití dalších zajímavých grafických elementů, jako jsou např. Bezierovy křivky, kardinální spline křivky a mnoho dalšího.

 

 

Ján Hanák