Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

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.

Hasonló előadás


Az előadások a következő témára: "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."— Előadás másolata:

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.PictureBox elemet 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: ◦ void Load( string url ): betöltés megadott helyről ◦ string ImageLocation { get; set; }: kép helyének átállításával ◦ Image Image { 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: ◦ PictureBoxSizeMode SizeMode { 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 PictureBox a 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 resource edittorral végezhetjük.

9 Resource kezelés Lépések: ◦ Project / properties… menüpontra kattintunk ◦ Kiválasztjuk a Resources fület ◦ A megjelenő Click here to create one feliratra kattintunk ◦ Az Add resource / Add existing 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.: PictureBox Image 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 „Dock in parent container” 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; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; namespace Kepnezegeto { public partial class MainForm : Form { public MainForm() { InitializeComponent(); } private void BOpen_Click(object sender, 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( string filename ): létrehozás fájlból  Bitmap( Stream stream ): létrehozás adatfolyamból  Bitmap( Image original ): létrehozás másik képből  Bitmap( int width, int height[, PixelFormat format] ): létrehozás megadott mérettel, a bitmélység megadható a „format” paraméterben a System.Drawing.Imaging.PixelFormat enumerációból

16 A Bitmap osztály Jellemzők: ◦ int Width { get; }: szélesség pixelben ◦ int Height { get; }: magasság pixelben ◦ Size Size { get; }: méret pixelben ◦ PixelFormat PixelFormat { get; }: bitmélység ◦ SizeF PhysicalDimension { get; }: fizikai méret (a felbontás figyelembevételébel) ◦ float VerticalResolution { get; }: függőleges felbontás pixel/inch ◦ float HorizontalResolution { get; }: vízszintes felbontás pixel/inch

17 A Bitmap osztály Color GetPixel( int x, int y ): adott pixel lekérdezése void SetPixel( int x, int y, Color color ): adott pixel színének beállítása void SetResolution( float xDpi, float yDpi ): 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.Color struktú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: ◦ void Save( string filename, ImageFormat format ): kép mentése fájlba adott helyre, adott formátumban ◦ void Save( Stream stream, 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: void Save( string filename, ImageCodecInfo encoder, EncoderParameters encoderParams )

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: ◦ static ImageFormat Bmp / 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 void Dispose() 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  Point Empty: 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:  int Width: szélesség  int Height: magasság  Size Empty: 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él width és height nyilvá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  int Width: szélesség  int Height: magasság  Rectangle Empty: 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él a 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( Color color, float width ): toll létrehozása adott színnel és vonalvastagsággal A Pen is rendelkezik void Dispose() metódussal, ezért ezt hívjuk meg, ha már nincs többet rá szükség. Főbb tulajdonságai: ◦ Color Color { get; set; }: a vonal színe ◦ Brush Brush { 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 ◦ float Width { get; set; }: a vonal vastagsága általában pixelben

29 A vonalak kezdése és lezárása LineCap StartCap { get; set; } és LineCap EndCap { 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ó ◦ CustomLineCap CustomStartCap { get; set; } és CustomLineCap CustomEndCap { get; set; } jellemzővel ◦ a System.Drawing.Drawing2D.CustomLineCap osztállyal.

30 A vonal stílusa DashStyle DashStyle { 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 DashCap DashCap { 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 LineJoin LineJoin { 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 float MiterLimit { 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 void Dispose() metódusukat illik meghívni.

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

38 Textúra kitöltés A System.Drawing.TextureBrush osztállyal. Fő jellemzők: ◦ Image Image { get; }: a kitöltés textúrája ◦ WrapMode WrapMode { 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 ◦ Matrix Transform { 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.LinearGradientBrush osztállyal. Fő jellemzői: ◦ ColorBlend InterpolationColors { get; set; }: az interpolált színek és pozíciójuk (lásd később) ◦ Blend Blend { 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 ◦ WrapMode WrapMode { 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.PathGradientBrush osztállyal. Fő jellemzői: ◦ Color CenterColor { get; set; }: a középpont színe ◦ PointF CenterPoint { get; set; }: a középpont helye ◦ Color[] SurroundColors { get; set; }: a csúcsokhoz rendelt színek További testreszabhatóság: ◦ PointF FocusScales { get; set; }: a gradiens fókuszpontja ◦ ColorBlend InterpolationColors { get; set; }: a színátmenet megadása ◦ Blend Blend { get; set; }: a színátmenet menetének megadása ◦ WrapMode WrapMode { 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: ◦ Color BackgroundColor { get; }: háttérszín ◦ Color ForegroundColor { get; }: sraff színe ◦ HatchStyle HatchStyle { get; }: sraff stílusa, a System.Drawing.Drawing2D.HatchStyle enumerációból Konstruktor: ◦ HatchBrush( HatchStyle hatchstyle, Color foreColor, Color backColor )

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 = new Bitmap(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 void Flush() tagfüggvénnyel kérhetjük. A Graphics IDisposable, használata után a void Dispose() metódusa hívandó.

47 A Graphics osztály beállításai Region Clip { get; set; } és RectangleF ClipBounds { get; } levágási határok (ezen kívül nem lehet rajzolni) CompositingMode CompositingMode { get; set; }: ◦ SourceOver: háttérszínnel való keverés rajzoláskor átlátszó szín esetén (alpha blending) ◦ SourceCopy: háttér felülírása rajzoláskor CompositingQuality CompositingQuality { 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 InterpolationMode InterpolationMode { 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 SmoothingMode SmoothingMode { 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 TextRenderingHint TextRenderingHint { 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

51 Rajzoljunk… A rajzolás során a már ismertetett Pen és Brush segítségével rajzolhatunk ki vonalakat, görbéket valamint ki is tölthetjük őket. Mivel ide igen sok számos túltöltéssel rendelkező parancs kapcsolódik, így mindnek ismertetésétől eltekintünk. A legtöbb függvény túltöltései mind int mind float alapú koordinátákkal (PointF, RectangleF) működnek, itt csak az egyik változatot fogom ismertetni.

52 VONALAS RAJZOLÁS

53 Vonal / töröttvonal – DrawLine(s) void DrawLine( Pen pen, PointF pt1, PointF pt2 ) void DrawLine( Pen pen, float x1, float y1, float x2, float y2 ) void DrawLines( Pen pen, PointF[] points ): töröttvonal Ahol: ◦ pen: a toll ◦ pt1, pt2: a kezdő és a végpont ◦ x1, y1, x2, y2: a kezdő és a végpont x és y koordinátái ◦ points: a pontok

54 Téglalap(ok) – DrawRectangle(s) void DrawRectangle( Pen pen, Rectangle rect ) void DrawRectangle( Pen pen, float x, float y, float width, float height ) void DrawRectangles( Pen pen, RectangleF[] rects ): több téglalap Ahol: ◦ pen: a toll ◦ rect: a téglalap ◦ rects: a téglalapok ◦ x, y: a téglalap jobb felső sarka ◦ width, height: a téglalap szélessége és magassága

55 Poligon - DrawPolygon void DrawPolygon( Pen pen, PointF[] points ) Ahol: ◦ pen: a toll ◦ points: a csúcsok pontjai Ha az első és utolsó csúcs nem esik egybe, akkor az azokat összekötő oldalt is kirajzolja.

56 Ellipszis – DrawEllipse void DrawEllipse( Pen pen, RectangleF rect) void DrawEllipse( Pen pen, float x, float y, float width, float height) Ahol: ◦ pen: a toll ◦ rect: a befoglaló téglalapx: a jobb felső sarok x koordinátája ◦ y: a jobb felső sarok y koordinátája ◦ width: szélesség ◦ height: magasság

57 Ellipszis ív / körcikk– DrawArc void DrawArc / DrawPie ( Pen pen, RectangleF rect, float startAngle, float sweepAngle ) void DrawArc / DrawPie ( Pen pen, float x, float y, float width, float height, float startAngle, float sweepAngle ) Ahol: ◦ pen: a toll ◦ rect: a befoglaló téglalap ◦ startAngle: a kezdő szög ◦ sweepAngle: a söprési szög ◦ x: a jobb felső sarok x koordinátája ◦ y: a jobb felső sarok y koordinátája ◦ width: szélesség ◦ height: magasság

58 Görbék rajzolása - Spline - DrawCurve void DrawCurve( Pen pen, Point[] points, float tension ) void DrawClosedCurve( Pen pen, PointF[] points, float tension, FillMode fillmode ): zárt görbéhez Spline-görbék rajzolása adott pontokon keresztül. Ahol: ◦ pen: a toll ◦ points: a kontrollpontok helye ◦ tension: feszültség ◦ fillmode: kitöltési mód, mely vonalak látszódjanak (lásd később)

59 Görbék rajzolása - Bezier - DrawBezier void DrawBezier( Pen pen, PointF pt1, PointF pt2, PointF pt3, PointF pt4 ) void DrawBeziers( Pen pen, PointF[] points ) Ahol: ◦ pen: a toll ◦ pt1: a kezdőpont ◦ pt2: az első kontrolpont ◦ pt3: a második kontrolpont ◦ pt4: a végpont ◦ points: a rajzoláshoz szükséges pontok, szerekezete: 0-K-K-0-K-K-0, ahol:  0: olyan pont ami a görbe átmegy  K: kontrolpont

60 KITÖLTÉS RAJZOLÁS

61 Ellipszis – FillEllipse void FillEllipse( Brush brush, RectangleF rect) void FillEllipse(Brush brush, float x, float y, float width, float height) Ahol: ◦ brush: az ecset ◦ rect: a befoglaló téglalapx: a jobb felső sarok x koordinátája ◦ y: a jobb felső sarok y koordinátája ◦ width: szélesség ◦ height: magasság

62 Szektor – FillPie void FillPie ( Brush brush, RectangleF rect, float startAngle, float sweepAngle ) void FillPie ( Brush brush, float x, float y, float width, float height, float startAngle, float sweepAngle ) Ahol: ◦ brush: az ecset ◦ rect: a befoglaló téglalap ◦ startAngle: a kezdő szög ◦ sweepAngle: a söprési szög ◦ x: a jobb felső sarok x koordinátája ◦ y: a jobb felső sarok y koordinátája ◦ width: szélesség ◦ height: magasság

63 Téglalap(ok) – DrawRectangle(s) void FillRectangle(Brush brush, Rectangle rect ) void FillRectangle(Brush brush, float x, float y, float width, float height ) void FillRectangles(Brush brush, RectangleF[] rects ): több téglalap Ahol: ◦ brush: az ecset ◦ rect: a téglalap ◦ rects: a téglalapok ◦ x, y: a téglalap jobb felső sarka ◦ width, height: a téglalap szélessége és magassága

64 Poligon - FillPolygon void FillPolygon( Brush brush, PointF[] points, FillMode fillMode ) Ahol: ◦ brush: az ecset ◦ points: a csúcsok pontjai ◦ fillMode: kitöltés módja a System.Drawing.Drawing2D.FillMode enumerációból:  Alternate:  Winding: Ha az első és utolsó csúcs nem esik egybe, akkor az azokat összekötő oldalt is kirajzolja.

65 Görbék rajzolása - Spline - DrawCurve void FillClosedCurve( Brush brush, PointF[] points, FillMode fillmode, float tension ) Ahol: ◦ brush: az ecset ◦ points: a kontrollpontok helye ◦ tension: feszültség ◦ fillmode: kitöltési mód

66 Képek rajzolása - DrawImage void DrawImage( Image image, Rectangle rect ) void DrawImage( Image image, int x, int y, int width, int height ) Ahol: ◦ image: a rajzolandó kép ◦ rect: a cél téglalap (nyújt! – képarány változhat) ◦ x, y: a kép bal felső sarkának helye ◦ width, height: a kirajzolt kép szélessége, magassága (nyújt!) A parancs 30+ darab túltöltése minden célra megfelel.

67 Vonal és kitöltési stílusok demonstrációs program Készítse el a képen látható ablakszerkezetet! Helyezzen el még egy ColorDialog (CD), egy SaveFileDialog (SFD) és egy FontDialog (FD) elemet, és adja a programhoz az asimov.png fájlt! PBImage RBLineNormal RBLineArrow RBLineDash RBLineDouble RBFillSolid RBFillGradient RBFillHatch RBFillTexture RBLines LBColor BSave BFont RBRectanglesRBText RBStars TBText BClear BDraw BColor CBTransparency

68 A színválasztó ablak elemei A színek listáját adja meg a következőképpen:

69 Választógombok eseménykezelői Mivel a választógombok kezelése hasonló, ezért közös eseménykezelőt használunk hozzájuk és a Tag tulajdonságukkal azonosítjuk őket. A Click esemény cellájába írjuk be a függvény nevét, majd ezt később a többi hasonló célú elemhez is rendeljük hozzá a cella mellett megjelenő lefele nyilas menüből. Végezzük el a vonal- és kitöltési stílusok, valamint a rajzolási módok választógombjaira is.

70 Beállítandó eseménykezelők RBLineStyle_Click RBFill_Click RBMode_Click BFont_Click BClear_Click BDraw_Click BColor_Click BSave_Click Forráskód a Picasso_source.pdf fájlban! PBImage_MouseMove

71 SZÖVEG KIRAJZOLÁSA

72 Betűtípusok - Font A betűtípusokat a System.Drawing.Font osztály segítségével adhatjuk meg. A jellemzőket a konstruktorral adhatjuk meg, azok később nem változtathatók: ◦ Font( string familyName, float emSize, FontStyle style, GraphicsUnit unit ) ◦ Ahol:  familyName: a betűtípus neve (pl.: Arial)  emSize: a betűméret  style: a betűk stílusa (pl.: dőlt)  unit: a betűméret mértékegysége (pl.: pixel) A Font is rendelkezik void Dispose() metódussal, ezért ezt hívjuk meg, ha már nincs többet rá szükség.

73 Betűstílusok - FontStyle A System.Drawing.FontStyle enumeráció tartalmazza őket, elemei: ◦ Regular: normál ◦ Bold: vastag ◦ Italic: dőlt ◦ Underline: aláhúzott ◦ Strikeout: áthúzott Ez az enumeráció Flag típusú, ezért megadásnál alkalmazható a „|” (bináris vagy) operátor, pl.: vastag aláhúzott: FontStyle.Bold | FontStyle.Underline

74 Szöveg kirajzolása - DrawString void DrawString( string s, Font font, Brush brush, PointF point ) void DrawString( string s, Font font, Brush brush, RectangleF layoutRectangle, StringFormat format ) Ahol: ◦ s: a szöveg ◦ font: a betűtípus ◦ brush: az ecset ◦ PointF: a bal felső sarok ◦ layoutRectangle: a befoglaló téglalap ◦ format: a szöveg formátuma (pl.: jobbrazárt) Abc

75 Szövegformátum - StringFormat A szöveg formátuma a System.Drawing.StringFormat osztályban tárolható. Főbb mezői: ◦ StringAlignment Alignment { get; set; }: a szöveg horizontális elhelyezése:  Center: középre  Far: jobbra igazított (balról jobbra írásnál)  Near: balra igazított (balról jobbra írásnál) ◦ StringAlignment LineAlignment { get; set; }: a szöveg vertikális elhelyezése:  Center: középre  Far: alulra igazított  Near: felülre igazított ◦ StringFormatFlags FormatFlags { get; set; }: egyéb formázási jellemzők (ezt itt most nem fejtjük ki)

76 Befoglaló téglalap - MeasureString A szöveg által elfoglalt terület kiszámítására szolgál. SizeF MeasureString( string text, Font font ) Ahol: ◦ text: a szöveg ◦ font: a betűtípus ◦ visszatérési érték: a befoglaló téglalap mérete

77 TRANSZFORMÁCIÓK, ÖSSZETETT VEKTORGRAFIKUS ALAKZATOK, LOGIKAI MŰVELETEK

78 Mátrixok – Matrix osztály A geometriai transzformációk megadására szolgál a System.Drawing.Drawing2D.Matrix osztály. Főbb mezők: ◦ float[] Elements { get; }: a mátrix elemei m11, m12, m21, m22, dx, dy sorrendben ◦ void Invert (): mátrix invertálása ◦ void Multiply ( Matrix matrix ): mátrix szorzása jobbról ◦ void Reset (): visszaalakítás egységmátrixszá ◦ void Rotate ( float angle ): forgatás mátrix óramutató irányában ◦ void RotateAt ( float angle, PointF point ): forgatás adott pont körül ◦ void Scale ( float scaleX, float scaleY ): nagyítás ◦ void Translate ( float offsetX, float offsetY ): eltolás ◦ void TransformPoints ( PointF[] pts ): pontok transzformációja (szorzás) ◦ void TransformVectors ( PointF[] pts ): vektorok transzformációja (szorzás, de az eltolás figyelembe vétele nélkül)

79 Transzformáció beállítása A Graphics osztállyal állítható be, a Matrix Transform { get; set; } tulajdonság segítségével. Az eredeti állapot a void ResetTransform() függvénnyel helyreállítható.

80 Mátrix bemutatóprogram Készítse el az alábbi ablakot: Minden gombhoz tartozik egy BGombNeve_Click eseménykezelő is! A forráskód a gyak_matrix_source.pdf fájlban! BUp BDown BRight BLeft BZoomIn BZoomOut BRotateRight BRotateLeft

81 Összetett vektorgrafikus elemek - GraphicsPath A System.Drawing.Drawing2D.GraphicsPath osztály egymáshoz kapcsolódó egyenesek és görbék tárolására szolgál, segítségével összetett formák írhatóak le. A GraphicsPath is rendelkezik void Dispose() metódussal, ezért ezt hívjuk meg, ha már nincs többet rá szükség. Az AddArc / AddBezier(s) / AddClosedCurve / AddCurve / AddEllipse / AddLine(s) / AddPath / AddPie / AddPolygon / AddRectangle(s) / AddString függvényekkel adhatunk elemeket az összetett objektumhoz. A void Reset() függvénnyel üríthető ki.

82 Összetett vektorgrafikus elemek - GraphicsPath A benne elhelyezett elemeket úgynevezett figurákba csoportosíthatók. Minden figura egymáshoz kapcsolódó vonalak sorozata vagy geometriai primitív (pl.: kör, téglalap). Ha az alakzatot kitöltve rendereljük, akkor minden nyitott elem zárásra kerül a kezdő és végpont összekötésével. Új figurát a következőképpen kezdhetünk: ◦ implicit: egy lezárt útvonal elkészültével ◦ explicit:  void CloseFigure(): lezárja a jelenlegi figurát és újat kezd  void StartFigure(): új figura kezdése a régi lezárása nélkül Az ábra mérete a RectangleF GetBounds( Matrix matrix, Pen pen ) metódussal kérdezhető le: ◦ matrix: transzformációs mátrix ◦ pen: a használt toll (a vonalvastagságtól függ a méret)

83 A GraphicsPath kirajzolása A rajzolás a Graphics osztály következő metódusaival végezhető el: ◦ void DrawPath( Pen pen, GraphicsPath path ): vonalas rajz ◦ void FillPath( Brush brush, GraphicsPath path ): kitöltött rajz Az alakzat transzformációja a void Transform( Matrix matrix ) parancsal végezhető el. A kitöltés módja a FillMode FillMode { get; set; } jellemzővel állítható.

84 A Region osztály A System.Drawing.Region osztály segítségével logikai műveletek végezhetőek területeken, ez hasznos lehet összetett alakzatok rajzolása esetén. A Region is rendelkezik void Dispose() metódussal, ezért ezt hívjuk meg, ha már nincs többet rá szükség. Az osztály konstruktorai: ◦ Region (): teljes régió ◦ Region ( RectangleF rect ): létrehozás téglalapból ◦ Region ( GraphicsPath path ): létrehozás GraphicsPath objektumból ◦ Region ( RegionData rgnData ): létrehozás másik régióból (az rgnData a RegionData GetRegionData () metódussal érhető el)

85 Logikai műveletek - Region void MakeEmpty (): üressé teszi a régiót void MakeInfinite (): végtelenné teszi a régiót Logikai műveletek (elvégezhetőek másik Region, RectangleF és GraphicsPath elemekre): ◦ Intersect: metszet ◦ Union: unió ◦ Xor: kizáró vagy (olyan régiót ad, amelynek pontjai vagy az első vagy a második régióhoz tartoznak, de nem mindkettőhöz) ◦ Complement: komplementer (olyan régiót ad, amely a második régió minden olyan pontját tartalmazza, amely nincs benne az első régióban)

86 Régió kirajzolása void FillRegion( Brush brush, Region region ) Ahol: ◦ brush: az ecset ◦ region: régió

87 RAJZOLÁS ABLAKOKRA

88 Rajzolás közvetlenül ablakokra Bár lehetőségünk van arra, hogy rajzainkat úgy jelenítsük meg, hogy a létrejött Bitmap-et megadjuk egy PictureBox-nak vagy egy Control BackgroundImage jellemzőjének, de rajzolhatunk közvetlenül a vizuális elemek felületére is.

89 Rajzolás közvetlenül ablakokra Három módja van: ◦ event PaintEventHandler Paint eseményhez adunk eseménykezelőt ◦ virtual void OnPaint( PaintEventArgs e ) metódus felülírása ◦ Graphics CreateGraphics() metódus hívása Ezen módszerek az összes vizuális elemre (System.Windows.Forms.Control ősosztály) alkalmazhatók. A művelet során egy System.Windows.Forms.PaintEventArgs típusú paramétert is kapunk, mely tartalmazza: ◦ Graphics Graphics { get; }: a rajzoláshoz használható Graphics objektumot ◦ Rectangle ClipRectangle { get; }: az vizuális elem határait jellemző téglalapot

90 Rajzolás közvetlenül ablakokra Az előbbi két metódus automatikusan meghívódik, ha újra kell rajzolni az adott területet, tipikusan: ◦ A terület fölé rajzolás: ha a 3D-s ablakkompozíció (Windows Aero) nincs bekapcsolva, akkor egyik ablak másikra rajzolása esetén, illetve az ablak képernyőről lelógó mozgatása esetén is ◦ Ablak átméretezésekor ◦ Az adott elem void Invalidate() metódusának hívására

91 A vizuális elemek újrarajzolásának felfüggesztése Számos esetben előfordulhat, hogy például egy listát tartalmazó vizuális elem feltöltésekor nem szeretnénk, ha minden egyes elem behelyezésére újrarajzolódna az adott objektum (ez hosszú listák esetén olyan nagy CPU használatot eredményez, ami több másodpercre is válaszképtelenné teszi a programunkat). Ez elkerülhető a Control osztály (és leszármazottai) void SuspendLayout() és void ResumeLayout() metódusainak hívásával. Ha ezekkel keretbe foglalunk egy sok lépésből álló a grafikus felületet többször változtató programrészt a programunk jelentősen gyorsulhat.

92 NYOMTATÁS

93 Nyomtatás.Net-ben A nyomtatás folyamata nagyban hasonlít a vizuális elemekre rajzoláskor használt Paint eseménykezelőjének megírásához. A System.Drawing.Printing.PrintDocument osztály segítségével végezhetjük el a nyomtatást. Általában szükségünk lesz egy vagy több a nyomtatással kapcsolatos beállítások megadására alkalmas elemre (nyomtató beállítások, oldalbeállítás, nyomtatási kép) is.

94 Nyomtatással kapcsolatos eseménykezelők Először létrehozzuk a nyomtatáshoz használt PrintDocument osztályt paraméter nélküli konstruktorával. Beállítjuk a következő események eseménykezelőit (csak a PrintPage kötelező): ◦ event PrintEventHandler BeginPrint: a nyomtatás kezdetekor hívódik meg, általában itt történik a nyomtatással kapcsolatos erőforrások lefoglalása ◦ event QueryPageSettingsEventHandler QueryPageSettings: minden egyes lap nyomtatása előtt meghívódik, lehetővé teszi a lappal kapcsolatos beállítások oldalankénti megadását ◦ event PrintPageEventHandler PrintPage: a lapok nyomtatásakor hívódik meg, itt szerepel a nyomtatandó képet megalkotó kód ◦ event PrintEventHandler EndPrint: a nyomtatás befejeztével hívódik meg, itt felszabadíthatók a nyomtatással kapcsolatos erőforrások (kivétel esetén vagy a nyomtatás megszakításakor is meghívódik) Megadjuk a nyomtatási beállításokat (lásd később) A nyomtatást a void Print() metódussal kezdeményezzük.

95 A PrintPage eseménykezelője Ebben adjuk meg nyomtatással kapcsolatos rajzoló kódot. Amelyet a paraméterként kapott System.Drawing.Printing.PrintPageEventArgs osztály segítségével végzünk el. Ennek fő jellemzői: ◦ Graphics Graphics { get; }: ezzel rajzolhatjuk meg az adott oldalt ◦ Rectangle PageBounds { get; }: a papír teljes területe ◦ Rectangle MarginBounds { get; }: a margókon belüli terület ◦ PageSettings PageSettings { get; }: az oldalbeállítások ◦ bool HasMorePages { get; set; }: ezzel jelezzük, hogy vannak-e még hátra oldalak ◦ bool Cancel { get; set; }: ha igazra állítjuk, megszakítjuk a nyomtatást

96 Nyomtatási beállítások A nyomtatási beállítások megadását a Windows által biztosított konfigurációs ablak segítségével szokás elvégezni. Ezt a System.Windows.Forms.PrintDialog osztály segítségével végezhetjük el.

97 A PrintDialog osztály Fontos beállításai: ◦ PrintDocument Document { get; set; }: a nyomtatandó dokumentum ◦ bool UseEXDialog { get; set; }: ez a beállítást 64bites rendszereken be kell kapcsolni, mert különben az ablak nem jelenik meg ◦ bool AllowCurrentPage { get; set; }: az aktuális oldal nyomtatása válaszható ◦ bool AllowPrintToFile { get; set; }: a fájlba nyomtatás válaszható ◦ bool AllowSelection { get; set; }: oldaltartomány választható ◦ bool AllowSomePages { get; set; }: néhány oldal nyomtatása választható

98 A PrintDialog osztály A DialogResult ShowDialog () metódus segítségével jelenítjük meg, és ha DialogResult.OK eredményt ad (felhasználó OK-ra kattintott), akkor kezdhetjük a nyomtatást.

99 GRAFIKA: HOW DO I …? Rövid összefoglaló példákkal

100 Hogyan rajzolok ablakokra? Ha a kirajzolt képre amúgy nincs szükség máshol, azaz pl. nem kell elmenteni kinyomtatni: Paint eseménykezelőjének felülírásával: Panel Form Duplaklikk Graphics osztálypéldány:

101 Hogyan hívjam meg az előző dia Paint eseményét? A következőképpen: Rajzolhatok máshogy is az ablakokra? – Igen, az OnPaint függvény felülírásával:

102 Rajzolás ablakra B módszer Lehetőségünk van arra is, hogy egy bitmap felületére készítsük el a rajzunkat és ezt jelenítsük meg a képernyőn:

103 Hogyan mentsük el a képet? Ha Bitmap-re rajzoltunk:

104 Szín, vonalstílus, kitöltés megadása, szövegkiírás

105 Hogyan rajzoljak ki egy …-t?

106

107 Mátrixok használata

108 GraphicsPath & Region Ying-yang jel rajzolása GraphicsPath és Region segítségével:

109 Hogyan rajzoljak Bitmap-re?

110 Nyomtatás

111 Hogyan csináljak animációt? Kapcsold be a DoubleBuffered jellemzőt a rajzolás célobjektumán: Írd meg a Paint eseménykezelőjét, vagy az OnPaint-t írd felül, vagy esetleg… :) Az így elkészített Graphics objektumok bárhol használhatók a programban.

112 Animáció… Rakj le egy Timer-t az ablakra: Frissítés gyakorisága: [ms] 100ms -> 10FPS 33ms->~30FPS Frissítés eseménykezelője (azaz az időzítő jelzéséé)

113 Animáció… Az óra ütésére rajzoljunk: E két paranccsal hívásra kerülnek a rajzoló metódusok, az animációhoz számoljuk az időt egy globális (a függvényből nézve) változóba. Animáció elindítása a TDraw.Start(), megállítása a TDraw.Stop() paranccsal.


Letölteni ppt "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."

Hasonló előadás


Google Hirdetések