Készítette: Major Péter

Az előadások a következő témára: "Készítette: Major Péter"— Előadás másolata:

1 Készítette: Major Péter
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 / <Projectnév> 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: int Width: szélesség int Height: magasság Size Empty: a 0 szélességű és magasságú méretet adja vissza 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: 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ó)

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
BDraw BFont RBLines RBRectangles RBText BClear RBLineNormal TBText RBLineArrow RBLineDash RBLineDouble RBStars LBColor RBFillSolid RBFillGradient CBTransparency RBFillHatch BColor RBFillTexture PBImage 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! BSave

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
Forráskód a Picasso_source.pdf fájlban! BDraw_Click RBMode_Click BClear_Click BFont_Click RBLineStyle_Click RBFill_Click BColor_Click BSave_Click 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: 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) m12 dx m21 m22 dy 1

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 Rövid összefoglaló példákkal
Grafika: How Do I …?

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: Graphics osztálypéldány: Panel Form Duplaklikk

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 Hogyan rajzoljak ki egy …-t?

107 Mátrixok használata 1. 2. 3. 4.

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 eseménykezelője
(azaz az időzítő jelzéséé) Frissítés gyakorisága: [ms] 100ms -> 10FPS 33ms->~30FPS

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.