1 / 113

Grafika . Net-ben

Grafika . Net-ben. Készítette: Major Péter. 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ó. Képek tárolása és megjelenítése. A képek tárolása . Net-ben.

shawna
Download Presentation

Grafika . Net-ben

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related