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.
Une image / un lien ci-dessous est fourni (tel quel) pour télécharger la présentation
Politique de téléchargement : le contenu du site vous est fourni TEL QUEL pour votre information et votre usage personnel ; il ne peut être vendu, concédé sous licence ni partagé sur d’autres sites sans l’accord de son auteur.Le contenu vous est fourni TEL QUEL, pour votre information et votre usage personnel uniquement.Téléchargez la présentation en cliquant sur ce lien.Lors du téléchargement, si vous ne parvenez pas à télécharger une présentation, l’éditeur a peut-être supprimé le fichier de son serveur.Pendant le téléchargement, si vous ne parvenez pas à obtenir une présentation, le fichier a peut-être été supprimé par l’éditeur.
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ó
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.
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.
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.
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
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.
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.
Tartalom beágyazása • A beszúrt elemek természetesen törölhetők, átnevezhetők.
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;
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.
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.
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); } } } }
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
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
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:
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 )
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.
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.
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
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
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)
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)
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
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.
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
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
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
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)
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
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.
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
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
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.
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.
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 )
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 )
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.
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ó.
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
