Grafika . Net-ben

1. Grafika .Net-ben Készítette: Major Péter

2. Előszó • Ebben a diasorban a .Net által nyújtott grafikus lehetőségekről lesz szó. Többek között: • Képek, animációk megjelenítése • Rajzolás • Nyomtatás • Animáció

3. Képek tárolása és megjelenítése

4. A képek tárolása .Net-ben • A képeket a System.Drawing.Image osztály és leszármazottaival tárolhatjuk. • A két fő leszármazott: • System.Drawing.Bitmap: raszteres (pixelekből felépített) képek tárolására. • System.Drawing.Imaging.MetaFile: olyan képfájlok, melyek a kép felépítésére szolgáló műveletek sorozatát rögzítik.

5. Képek megjelenítése • Ehhez alapesetben a vizuális elemek között található System.Windows.Forms.PictureBoxelemet használjuk fel, különösen akkor, ha a képet csak ritkábban változtatjuk. • Ezzel az elemmel egyszerre egy képet jeleníthetünk meg, beállíthatjuk annak nagyítását, az elem képpel való lefedésének módját.

6. A PictureBox osztály • A PictureBox egy vizuális elem (a System.Windows.Forms.Control leszármazottja), tehát annak jellegzetes mezői, tagfüggvényei itt is alkalmazhatók (pl.: Top, Left, Width, Height stb.) • Kép betöltése: • voidLoad( stringurl ): betöltés megadott helyről • stringImageLocation { get; set; }: kép helyének átállításával • ImageImage { get; set; }: az „Image” mező átállításával • Az utóbbi két mező az ablakszerkesztővel is állítható. • Az InitialImage és az ErrorImage mezőkkel beállítható a kép betöltésig ill. a betöltési hiba esetén megjelenítendő kép.

7. PictureBox: a kép elhelyezése • A kép elhelyezését az alábbi mezőkkel befolyásolhatjuk: • PictureBoxSizeModeSizeMode { get; set; }, lehetséges értékei a System.Windows.Forms.PictureBoxSizeMode enumerációból: • Normal: a kép a bal-felső sarokba kerül, a kilógó területet levágjuk • StretchImage: a képet nyújtjuk, a képarány megváltozik, a kép torz lesz • AutoSize: a PictureBoxa kép méretét veszi fel • CenterImage: a képet a PictureBox közepén helyezzük el • Zoom: a képet akkorára nagyítjuk, hogy elérje a keretet, de a képarány megtartásával

8. Kép beágyazása a futtatható fájlba • Ha egy program vizuális felületét képek felhasználásával készítjük, hasznos lehet ezek beágyazása az adott exe vagy dll fájlba. • A beágyazott képek pl. magában az exe-ben foglalnak helyet és onnan betölthetők. Ez sokkal átláthatóbb és szebb megoldás, mint ha az exe mellett heverne az összes ikon stb. mind külön fájlban. • Ezt a Visual Studio-ban a resourceedittorral végezhetjük.

9. Resource kezelés • Lépések: • Project / <Projectnév> properties… menüpontra kattintunk • Kiválasztjuk a Resources fület • A megjelenő Click here tocreateonefeliratra kattintunk • Az Add resource / Addexisting file… gombra kattintva hozzáadjuk a kívánt elemet. • Tipp: az X:\Program Files (x86)\Microsoft Visual Studio 9.0\Common7\VS2008ImageLibrary\1033 helyen található egy a képgyűjtemény, mellyel szépíthetjük programjaink kezelőfelületét.

10. Tartalom beágyazása • A beszúrt elemek természetesen törölhetők, átnevezhetők.

11. Beágyazott tartalom felhasználása • Pl.: PictureBoxImage tulajdonságánál: • Az ablakszerkesztőből: • Vagy kódból: • pictureBox1.Image = Properties.Resources.search;

12. Képnézegető program készítése • Készítsen képnézegető programot, amellyel fájlmegnyitó ablak segítségével képet nyithatunk meg és azt egy az ablakra helyezett PictureBox-ban megjeleníthetjük.

13. Képnézegető program készítése • Helyezzünk egy PictureBox-ot az ablakra és állítsuk kapcsoljuk be a „Dockinparentcontainer” opciót, így a PuctureBox kitölti az ablak méretét. • A PictureBox-nak adjuk meg a kiinduló képét, amelyet ágyazzunk be az futtatható fájlba. • Továbbá helyezzünk el az ablakon egy fájlmegnyitó gombot és rendeljünk a rá való klikkeléshez egy eseménykezelőt, amellyel megnyithatunk képet! • Helyezzünk el egy OpenFileDialog-ot is, melyet állítsunk be képmegnyitáshoz.

14. Képnézegető program készítése using System; usingSystem.Collections.Generic; usingSystem.ComponentModel; usingSystem.Data; usingSystem.Drawing; usingSystem.Linq; usingSystem.Text; usingSystem.Windows.Forms; namespaceKepnezegeto { publicpartialclassMainForm : Form { publicMainForm() { InitializeComponent(); } privatevoidBOpen_Click(objectsender, EventArgs e) { if (OFD.ShowDialog() == DialogResult.OK) { PB.Load(OFD.FileName); //PB.ImageLocation = OFD.FileName; //PB.Image = new Bitmap(OFD.FileName); //PB.Image = Bitmap.FromFile(OFD.FileName); } } } }

15. A Bitmap osztály • A PictureBox-nál már megemlített osztály fontosabb tagfüggvényei és mezői: • Konstruktor: • Bitmap( stringfilename ): létrehozás fájlból • Bitmap( Streamstream ): létrehozás adatfolyamból • Bitmap( Imageoriginal ): létrehozás másik képből • Bitmap( intwidth, intheight[, PixelFormatformat] ): létrehozás megadott mérettel, a bitmélység megadható a „format” paraméterben a System.Drawing.Imaging.PixelFormatenumerációból

16. A Bitmap osztály • Jellemzők: • intWidth { get; }: szélesség pixelben • intHeight { get; }: magasság pixelben • SizeSize { get; }: méret pixelben • PixelFormatPixelFormat { get; }: bitmélység • SizeFPhysicalDimension { get; }: fizikai méret (a felbontás figyelembevételébel) • floatVerticalResolution { get; }: függőleges felbontás pixel/inch • floatHorizontalResolution { get; }: vízszintes felbontás pixel/inch

17. A Bitmap osztály • ColorGetPixel( int x, int y ): adott pixel lekérdezése • voidSetPixel( int x, int y, Colorcolor ): adott pixel színének beállítása • voidSetResolution( floatxDpi, floatyDpi ): a vízszintes és függőleges felbontás beállítása pixel/inch egységben

18. A Color struktúra • A System.Drawing.Colorstruktúrával tárolhatunk színeket. • A byte típusú R, G, B és A mezői ebben a sorrendben a vörös, a zöld, a kék és az átlátszóság értékeket tárolják. • A Color struktúra számos színt is definiál:

19. Előre definiált színek

20. Kép mentése • A képek elmentése persze majd a rajzolás után célszerű, de már itt ismertetésre kerül: • voidSave( stringfilename, ImageFormatformat ): kép mentése fájlba adott helyre, adott formátumban • voidSave( Streamstream, ImageFormat format ): mint az előző, de adatfolyamba ment • Érdekesség: A parancsok egy másik túltöltésével a képtömörítési paraméterek (pl.: JPEG) is megadhatók: voidSave( stringfilename, ImageCodecInfoencoder, EncoderParametersencoderParams )

21. Kép mentési formátumok • A System.Drawing.Imaging.ImageFormat osztály tartalmazza a lehetséges mentési formátumokat statikus jellemzőkként: • staticImageFormatBmp / Emf / Exif / Gif / Icon / Jpeg / Png / Tiff / Wmf { get; } • Tehát így menthetünk: • B.Save("kep.png", ImageFormat.Png); • Ha a képet már nem használjuk többet, ne felejtsük el felszabadítani a lefoglalt memóriát a voidDispose() utasítással.

22. Mielőtt még rajzolnánk… • Azelőtt meg kell ismerkednünk a System.Drawing.Pen (toll) és a System.Drawing.Brush (ecset) osztályokat. • Ezek szerepe hasonló a CAD programok rajzoló moduljában a toll és kitöltés beállításaihoz.

23. Mértékegységek • A System.Drawing osztály számos eleménél adunk meg méreteket, ehhez pedig a mértékegységet is meg kell adni. • A mértékegységeket a System.Drawing.GraphicsUnit enumeráció tartalmazza, értékkészlete: • World: a válág-koordinátarendszer egysége • Display: a hardverhez köthető mértékegység (monitornál pixel, nyomtatónál 1/100 inch) • Pixel: képpont • Point: „a nyomtató pontja” - 1/72 inch • Inch • Document: „a dokumentum egység” – 1/300 inch • Millimeter

24. Float számok megadása • Ha a forráskódban egy szám szerepel, akkor attól függően, hogy szerepel-e benne tizedes pont int vagy double típusúként kezeli a fordító. • A System.Drawing névtér elemei viszont általában float azaz egyszeres precizitású (32bites) lebegőpontos számokat használnak. • Ezért ilyenkor a számokat az „f” útótaggal egészítjük, így a fordító tudja hogy floatról van szó. pl.: 0.1f, 5f

25. Grafikával kapcsolatos egyéb adattípusok I. • System.Drawing.Point(F) adatstruktúra: egy pont tárolására szolgál • Mezői: • int X: x irányú koordináta • int Y: y irányú koordináta • PointEmpty: a (0, 0) pontot adja vissza • Konstruktora (van paraméter nélküli is): • Point( int x, int y ): ahol x és y a koordináták (a PointF-nél x és y nyilván float) • System.Drawing.Size(F) adatstruktúra: méret tárolására szolgál: • Mezői: • intWidth: szélesség • intHeight: magasság • SizeEmpty: a 0 szélességű és magasságú méretet adja vissza • Konstruktora (van paraméter nélküli is): • Size ( int width, int height ): ahol a width és height a szélesség és a magasság (a SizeF-nélwidthés heightnyilván float)

26. Grafikával kapcsolatos egyéb adattípusok II. • System.Drawing.Rectangle(F) adatstruktúra: egy téglalap pozíciójának és méretének tárolására szolgál • Mezői: • int X: a bal-felső sarok x irányú koordinátája • int Y: a bal-felső sarok y irányú koordinátája • intWidth: szélesség • intHeight: magasság • RectangleEmpty: olyan téglalapot ad meg, melynek összes előbb említett paramétere nulla • Konstruktora (van paraméter nélküli is): • Rectangle( int x, int y, int width, int height ) : ahol x és y a bal-felső sarok koordinátái, width és height pedig a szélesség és a magasság (a RectangleF-néla paraméterek típusa nyilván float)

27. Vonalstílusok

28. A Pen osztály • A System.Drawing.Pen osztály a rajzolásnál a vonalak tulajdonságait határozza meg. • Konstruktor: Pen( Colorcolor, float width ): toll létrehozása adott színnel és vonalvastagsággal • A Pen is rendelkezik voidDispose() metódussal, ezért ezt hívjuk meg, ha már nincs többet rá szükség. • Főbb tulajdonságai: • ColorColor { get; set; }: a vonal színe • BrushBrush { get; set; }: ecset (lásd később) kitöltött vonal rajzolásához, ha ezt megadjuk, akkor a Color jellemzőt a rendszer nem veszi figyelembe • floatWidth { get; set; }: a vonal vastagsága általában pixelben

29. A vonalak kezdése és lezárása • LineCapStartCap { get; set; } és LineCapEndCap { get; set; } • A System.Drawing.Drawing2D.LineCap enumeráció elemei: • AnchorMask • ArrowAnchor • DiamondAnchor • Flat • NoAnchor • Round • RoundAnchor • Square • SquareAnchor • Triangle • Érdekesség: • Custom saját vonalvég megadható • CustomLineCapCustomStartCap { get; set; } és CustomLineCapCustomEndCap { get; set; } jellemzővel • a System.Drawing.Drawing2D.CustomLineCap osztállyal.

30. A vonal stílusa • DashStyleDashStyle { get; set; } • A System.Drawing.Drawing2D.DashStyle enumeráció elemei: • Solid: folytonos vonal • Dash: szaggatott vonal • Dot: pontsor vonal • DashDot: pontvonal • DashDotDot: kétpont-vonal • Érdekesség: • Custom: megadható tetszőleges szaggatás is • float[]DashPattern { get; set; } jellemzővel megadhatjuk egy tömbben a szaggatások-kihagyások hosszát

31. A szaggatások vége • Megadható a DashCapDashCap { get; set; } jellemzővel • System.Drawing.Drawing2D.DashCap enumeráció lehetséges értékei: • Flat: egyenes vég • Round: lekerekített vég • Triangle: háromszög alakú vég

32. Többszörös vonalak • float[] CompoundArray { get; set; } • A tömbben az értékek 0.0f-től 1.0f-ig szerepelhetnek, méghozzá növekvő sorrendben. Ezek tartalmazzák a vonal „keresztmetszetén” lévő sávok kezdetét (és végét) a vonal szélességéhez viszonyítva. • Tehát ha egy olyan vonalcsoportot akarunk, amely szélesség eloszlása ilyen: • 20% vonal • 50% hely • 30% vonal • Akkor a tömbben az értékek: 0.0f, 0.2f, 0.7f, 1.0f

33. Töröttvonal szakaszainak kapcsolódása • LineJoinLineJoin { get; set; } tulajdonsággal adható meg • Lehetséges értékei a System.Drawing.Drawing2D.LineJoin enumerációból: • Miter: éles vagy levágott sarok (lásd: miter limit) • Bevel: letört sarok • Round: lekerekített sarok • MiterClipped: éles vagy letört sarok (lásd: miter limit)

34. Miter limit • Ha kis szögben találkoznak vonalak, akkor a sarkot célszerű levágni: • A levágás mértékét a floatMiterLimit { get; set; } jellemzővel adhatjuk meg. • A sárgán rajzolt rész az eredeti sarok, az erősen rajzolt rész: • Bal: MiterLimit=3 • Jobb: MiterLimit=4

35. Kitöltések

36. A Brush osztály • A System.Drawing.Brush osztállyal megadható a kirajzolt alakzatok belsejének kitöltése. • Ez egy absztrakt osztály, a belőle leszármaztatott osztályokat használjuk: • SolidBrush: egyszínű kitöltés • TextureBrush: textúra kitöltés • HatchBrush: sraffozott kitöltés • LinearGradientBrush, PathGradientBrush: színátmenetes kitöltés • A Brush és leszármazottai mind IDisposable osztályok, tehát használatuk befejeztével a voidDispose() metódusukat illik meghívni.

37. Egyszínű kitöltés • A System.Drawing.SolidBrush osztállyal. • Konstruktor: SolidBrush( Colorcolor ): egyszínű kitöltés a „color”-ban megadott színnel. • Fő jellemző: • ColorColor { get; set; }: a kitöltés színe

38. Textúra kitöltés • A System.Drawing.TextureBrush osztállyal. • Fő jellemzők: • ImageImage { get; }: a kitöltés textúrája • WrapModeWrapMode { get; set; }: a kép elhelyezésének módja, a System.Drawing.Drawing2D.WrapMode enumerációból: • Tile: mozaik • TileFlipX: mozaik X tengelyre tükrözve ismétlés • TileFlipY: mozaik Y tengelyre tükrözve ismétlés • TileFlipXY: mozaik középpontra tükrözve ismétlés • Clamp: nem mozaik • MatrixTransform { get; set; }: a textúra transzformációs mátrixa • Konstruktor: TextureBrush( Image bitmap ): textúra kitöltés képből

39. Lineáris gradiens kitöltés • A System.Drawing.Drawing2D.LinearGradientBrushosztállyal. • Fő jellemzői: • ColorBlendInterpolationColors { get; set; }: az interpolált színek és pozíciójuk (lásd később) • BlendBlend { get; set; }: az összekeverés módja (ha nem lineáris, lásd később) • Color[]LinearColors { get; set; }: két színt, a kezdő és a befejező színt tartalmazó tömb • WrapModeWrapMode { get; set; }: a gradiens elhelyezésének módja, a System.Drawing.Drawing2D.WrapMode enumerációból (mint előbb) • Konstruktor: • LinearGradientBrush( Point point1, Point point2, Color color1, Color color2 ) • Ahol a point1 és a point2 a kezdő és a végpont, a color1 és a color2 a kezdő és a végső szín.

40. A lineáris színátmenet megadása • A System.Drawing.Drawing2D.ColorBlend osztállyal megadhatóak a színátmenetek: • Fő jellemzői: • Color[] Colors { get; set; }: a színek tömbje • float[]Positions { get; set; }: a színek pozíciói, 0.0f-től 1.0f-ig (mindig 0.0f az első elem és 1.0f az utolsó) • A konstruktorának nincs paramétere. • A System.Drawing.Drawing2D.Blend osztállyal megadható a színek összekeverésének mikéntje: • Fő jellemzői: • float[] Factors { get; set; }: megadja az adott helyen a kezdő és végszín közti átmenet értékét, 0.0f-től 1.0f-ig • float[] Positions { get; set; }: megadja a faktorokhoz tartozó pozíciókat, 0.0f-től 1.0f-ig (mindig 0.0f az első elem és 1.0f az utolsó) • A konstruktorának nincs paramétere.

41. Gradiens sokszögkitöltés • A System.Drawing.Drawing2D.PathGradientBrushosztállyal. • Fő jellemzői: • ColorCenterColor { get; set; }: a középpont színe • PointFCenterPoint { get; set; }: a középpont helye • Color[]SurroundColors { get; set; }: a csúcsokhoz rendelt színek • További testreszabhatóság: • PointFFocusScales { get; set; }: a gradiens fókuszpontja • ColorBlendInterpolationColors { get; set; }: a színátmenet megadása • BlendBlend { get; set; }: a színátmenet menetének megadása • WrapModeWrapMode { get; set; }: a gradiens elhelyezésének módja • A konstruktornak meg kell adni a SurroundColors-hoz tartozó pozíciókat: • PathGradientBrush( Point[] / PointF[] points )

42. Sraffozott kitöltés • A System.Drawing.Drawing2D.HatchBrush osztály valósítja meg. • Fő jellemzői: • ColorBackgroundColor { get; }: háttérszín • ColorForegroundColor { get; }: sraff színe • HatchStyleHatchStyle { get; }: sraff stílusa, a System.Drawing.Drawing2D.HatchStyle enumerációból • Konstruktor: • HatchBrush( HatchStylehatchstyle, ColorforeColor, ColorbackColor )

43. Sraffozási stílusok

44. Rajzolás

45. Rajzolás • A .Net egyik nagy előnye, hogy a hozzátartozó függvénykönyvtárak széleskörű megoldást kínálnak számos programozási feladatra. • Nem kivétel ebből a szempontból a rajzolás sem: hiszen egyszerűbb rajprogramokat megszégyenítő rajzkészlettel rendelkezünk. • A grafikai parancsok száma igen nagy, de a mérnöki munkában játszott nagy szerepük miatt (pl.: mérési eredmények, folyamatok ábrázolása) érdemes áttekinteni őket.

46. A Graphics osztály • A rajzolást .Net-ben a System.Drawing.Graphics osztály segítségével végezzük. • A Graphics osztály konstruktora nem publikus, ezért egy statikus tagfüggvénnyel hozzuk létre példányait: • System.Drawing.Bitmap B = newBitmap(640, 480); • System.Drawing.Graphics G = Graphics.FromImage(B); • Itt egy Bitmap objektumhoz hozzuk létre a Graphics objektumot, azaz arra tudunk majd rajzolni. • A rajzolás során a műveleteket végrehajtását (hasonlóan a fájlba íráshoz) egy voidFlush() tagfüggvénnyel kérhetjük. • A GraphicsIDisposable, használata után a voidDispose() metódusa hívandó.

47. A Graphics osztály beállításai • RegionClip { get; set; } és RectangleFClipBounds { get; } levágási határok (ezen kívül nem lehet rajzolni) • CompositingModeCompositingMode { get; set; }: • SourceOver: háttérszínnel való keverés rajzoláskor átlátszó szín esetén (alphablending) • SourceCopy: háttér felülírása rajzoláskor • CompositingQualityCompositingQuality { get; set; }: rajzolás minősége: • Invalid • HighSpeed: gyors, de rossz a minőség • AssumeLinear: közel szokásos minőség, de gyorsabb • Default: szokásos • HighQuality: jó minőség, de lassú • GammaCorrected: gamma korrekciót is használunk

48. A Graphics osztály beállításai • InterpolationModeInterpolationMode { get; set; }: interpolációs mód (pl.: képek nagyításakor fontos) • Invalid • Default • Low • High • Bilinear • Bicubic • NearestNeighbor (éles pixelhatárok) • HighQualityBilinear • HighQualityBicubic (legjobb minőség)

49. A Graphics osztály beállításai • SmoothingModeSmoothingMode { get; set; } élsimítás (anti-alias) beállítása: • Invalid • None • HighSpeed • Default • HighQuality* • AntiAlias* • *: van anti-alias

50. A Graphics osztály beállításai • A szöveg élsimítása a TextRenderingHintTextRenderingHint { get; set; } tulajdonsággal oldható meg: • SystemDefault: rendszerbeállítás • SingleBitPerPixelGridFit: rácshoz igazítás • SingleBitPerPixel: nincs képjavítás • AntiAliasGridFit: anti-alias + rácshoz igazítás • AntiAlias: anti-alias • ClearTypeGridFit: cleartype, legjobb minőség