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