Vizuális programozás
description
Transcript of Vizuális programozás
![Page 1: Vizuális programozás](https://reader036.fdocuments.net/reader036/viewer/2022081419/56814605550346895db31072/html5/thumbnails/1.jpg)
Vizuális programozásVizuális programozás
Rajzolás Windows Forms Rajzolás Windows Forms alkalmazásokbanalkalmazásokban
GDI+GDI+
![Page 2: Vizuális programozás](https://reader036.fdocuments.net/reader036/viewer/2022081419/56814605550346895db31072/html5/thumbnails/2.jpg)
RajzolásRajzolásGDI+: 2D grafikát támogató osztályok, GDI+: 2D grafikát támogató osztályok, fontkezelés, képek beillesztésefontkezelés, képek beillesztéseNévtér: System.Drawing Névtér: System.Drawing Szükséges: Szükséges: – GraphicsGraphics típusú objektum – ennek a típusú objektum – ennek a
metódusaival történik a rajzolásmetódusaival történik a rajzolás– Lehetőségek: Lehetőségek:
PaintPaint esemény feldolgozása (Invalidate) esemény feldolgozása (Invalidate)bármely eseménynél (Load nem lehet) bármely eseménynél (Load nem lehet) CreateGraphics() metódus meghívásaCreateGraphics() metódus meghívása
![Page 3: Vizuális programozás](https://reader036.fdocuments.net/reader036/viewer/2022081419/56814605550346895db31072/html5/thumbnails/3.jpg)
JellemzőkJellemzőkGrafikus objektumokGrafikus objektumok– Vonalhúzáshoz: Vonalhúzáshoz: PenPen típusú objektum, típusú objektum, PensPens– Kifestéshez: Kifestéshez: Brush/SolidBrushBrush/SolidBrush típusú típusú
objektum, objektum, BrushesBrushes– Betűtípus: Betűtípus: FontFont
Eszközfüggetlen rajzolásEszközfüggetlen rajzolás– képernyőképernyő– nyomtatónyomtató– grafikus állománygrafikus állomány
Támogatott: jpeg, png, bmp, gifTámogatott: jpeg, png, bmp, gif
![Page 4: Vizuális programozás](https://reader036.fdocuments.net/reader036/viewer/2022081419/56814605550346895db31072/html5/thumbnails/4.jpg)
![Page 5: Vizuális programozás](https://reader036.fdocuments.net/reader036/viewer/2022081419/56814605550346895db31072/html5/thumbnails/5.jpg)
Szín megadásaSzín megadásaColor osztályColor osztály– Előre definiált színekElőre definiált színek
pl. Color.Bluepl. Color.Blue– SzínfelsorolásbólSzínfelsorolásból
pl. pl. Color.FromKnownColor(KnownColor.Azure);Color.FromKnownColor(KnownColor.Azure);– Felhasználó által Felhasználó által
definiáltdefiniáltpl. Color.fromArgb(128,0,0,255);pl. Color.fromArgb(128,0,0,255);
Alpha: az áttetszőséget befolyásoljaAlpha: az áttetszőséget befolyásolja
![Page 6: Vizuális programozás](https://reader036.fdocuments.net/reader036/viewer/2022081419/56814605550346895db31072/html5/thumbnails/6.jpg)
Kifestőminta megadásaKifestőminta megadása
BrushBrush– SolidBrushSolidBrush– HatchBrushHatchBrush– LinearGradientBrushLinearGradientBrush– TextureBrushTextureBrush
Példaprogram: ÁttetszőségPéldaprogram: Áttetszőség
![Page 7: Vizuális programozás](https://reader036.fdocuments.net/reader036/viewer/2022081419/56814605550346895db31072/html5/thumbnails/7.jpg)
Rajzoló és kitöltő metódusokRajzoló és kitöltő metódusokDrawLine( Pen p, int x1, int y1, DrawLine( Pen p, int x1, int y1, int x2, int y2 ) int x2, int y2 )DrawRectangle( Pen p, int x, int y, DrawRectangle( Pen p, int x, int y, int width, int height ) int width, int height )DrawEllipse(Pen p, int x, int y, DrawEllipse(Pen p, int x, int y, int width, int height ) int width, int height )FillRectangle( Brush b, int x, int y, FillRectangle( Brush b, int x, int y, int width, int height ) int width, int height )FillEllipse( Brush b, int x, int y, FillEllipse( Brush b, int x, int y, int width, int height ) int width, int height )
![Page 8: Vizuális programozás](https://reader036.fdocuments.net/reader036/viewer/2022081419/56814605550346895db31072/html5/thumbnails/8.jpg)
Rajzoló és kitöltő metódusokRajzoló és kitöltő metódusokDrawLine(PenDrawLine(Pen p p,,int x1int x1, , int y1int y1, , int x2int x2, , int y2 int y2););
DrawArc( Pen p, int x, int y, int width, DrawArc( Pen p, int x, int y, int width, int height, int kezdőszög, int height, int kezdőszög, int ívszög ) int ívszög )
DrawPie( Pen p, int x, int y, int width, DrawPie( Pen p, int x, int y, int width, int height, int kezdőszög, int ívszög ) int height, int kezdőszög, int ívszög )
FillPie( Brush b, int x, int y, int width, FillPie( Brush b, int x, int y, int width, int height, int kezdőszög, int ívszög ) int height, int kezdőszög, int ívszög )
x
y
Pozitív szög
Példaprogram: Körcikk
![Page 9: Vizuális programozás](https://reader036.fdocuments.net/reader036/viewer/2022081419/56814605550346895db31072/html5/thumbnails/9.jpg)
ProblémákProblémákSebességSebesség– Menedzselt DirectX:Menedzselt DirectX:– SlimDX (http://slimdx.org/)SlimDX (http://slimdx.org/)– SharpDX SharpDX (http://code.google.com/p/sharpdx/)(http://code.google.com/p/sharpdx/)
– XNA Game StudioXNA Game Studio
Eltűnő képEltűnő kép– Mindig újrarajzoljukMindig újrarajzoljuk– Metafájlba lementjük és visszaolvassukMetafájlba lementjük és visszaolvassuk– Képre rajzolásKépre rajzolás– Dupla pufferelésDupla pufferelés
![Page 10: Vizuális programozás](https://reader036.fdocuments.net/reader036/viewer/2022081419/56814605550346895db31072/html5/thumbnails/10.jpg)
PéldaprogramokPéldaprogramokGrafikaNemPaintGrafikaNemPaint
GrafikaPaintGrafikaPaintKepreRajzolasKepreRajzolas
DuplaPufferHasznalatDuplaPufferHasznalat
![Page 11: Vizuális programozás](https://reader036.fdocuments.net/reader036/viewer/2022081419/56814605550346895db31072/html5/thumbnails/11.jpg)
Koordináta rendszerekKoordináta rendszerekWorldWorld: a rajzoló metódusoknak átadott : a rajzoló metódusoknak átadott koordináta értékek ebben vannakkoordináta értékek ebben vannakmyGraphics.DrawLine(myPen, 0, 0, 160, 80)myGraphics.DrawLine(myPen, 0, 0, 160, 80)
PagePage: a rajzoló felület (form, vezérlő) által : a rajzoló felület (form, vezérlő) által használt koordináta rendszer. Kezdőpontja a használt koordináta rendszer. Kezdőpontja a kliens terület bal felső sarkában.kliens terület bal felső sarkában.DeviceDevice: a megjelenítő eszköz által használt : a megjelenítő eszköz által használt koordináta rendszer (képernyő, papír)koordináta rendszer (képernyő, papír)Rajzoláskor a rendszer először átalakít PK-ba Rajzoláskor a rendszer először átalakít PK-ba (World Transformation)majd átalakít DK-ba (Page (World Transformation)majd átalakít DK-ba (Page Transformation)Transformation)
![Page 12: Vizuális programozás](https://reader036.fdocuments.net/reader036/viewer/2022081419/56814605550346895db31072/html5/thumbnails/12.jpg)
World – logikai World – logikai k.r.k.r.
float koordináta értékekfloat koordináta értékekKezdőpontja elmozgatható a Graphics Kezdőpontja elmozgatható a Graphics objektum objektum TranslateTransformTranslateTransform metódusa segítségévelmetódusa segítségévelmyGraphics.TranslateTransform(100, 50); myGraphics.TranslateTransform(100, 50); myGraphics.DrawLine(myPen, 0, 0, 160, 80);myGraphics.DrawLine(myPen, 0, 0, 160, 80); Kezdetben a World és Page k.r. Kezdetben a World és Page k.r. kezdőpontja egybeesikkezdőpontja egybeesik
![Page 13: Vizuális programozás](https://reader036.fdocuments.net/reader036/viewer/2022081419/56814605550346895db31072/html5/thumbnails/13.jpg)
PagePagePage Coordinate SpacePage Coordinate Space. The Page . The Page space is where the world coordinates space is where the world coordinates are transformed into some real-world are transformed into some real-world value. You can make the Page Space value. You can make the Page Space represent pixels, inches millimeters and represent pixels, inches millimeters and so-on. This is what makes GDI+ a so-on. This is what makes GDI+ a resolution independent system. You resolution independent system. You control how the page space interprets control how the page space interprets the world space by telling the Graphics the world space by telling the Graphics object what object what PageUnitPageUnit is being used is being used and adjusting the and adjusting the PageScalePageScale..
![Page 14: Vizuális programozás](https://reader036.fdocuments.net/reader036/viewer/2022081419/56814605550346895db31072/html5/thumbnails/14.jpg)
DeviceDeviceDevice Coordinate SpaceDevice Coordinate Space. This space . This space is controlled by the system and enables is controlled by the system and enables the real-world values in the Page Space the real-world values in the Page Space to be translated to your screen or to be translated to your screen or printer. Device space ensures that a 1 printer. Device space ensures that a 1 inch long line looks an inch long on the inch long line looks an inch long on the screen and on the printer even though screen and on the printer even though the two devices may have very the two devices may have very different pixel resolutions. You have no different pixel resolutions. You have no direct control over this space.direct control over this space.
![Page 15: Vizuális programozás](https://reader036.fdocuments.net/reader036/viewer/2022081419/56814605550346895db31072/html5/thumbnails/15.jpg)
World TransformationWorld Transformation
A Graphics objektum A Graphics objektum TransformTransform tulajdonságában van tárolva (mátrix)tulajdonságában van tárolva (mátrix)
Átalakító metódusok:Átalakító metódusok:– TranslateTransformTranslateTransform– ScaleTransformScaleTransform– RotateTransformRotateTransform
![Page 16: Vizuális programozás](https://reader036.fdocuments.net/reader036/viewer/2022081419/56814605550346895db31072/html5/thumbnails/16.jpg)
EredetiEredeti
TranslT.(70,0)TranslT.(70,0)
TranslT.(-70,20)TranslT.(-70,20)
ScaleT.(0.5f,1f)ScaleT.(0.5f,1f)
![Page 17: Vizuális programozás](https://reader036.fdocuments.net/reader036/viewer/2022081419/56814605550346895db31072/html5/thumbnails/17.jpg)
myGraphics.Transform = new Matrix();myGraphics.Transform = new Matrix();myGraphics.TranslateTransform(100, 20);myGraphics.TranslateTransform(100, 20);myGraphics.RotateTransform(45f);myGraphics.RotateTransform(45f);myGraphics.myGraphics.DrawRectangleDrawRectangle(Pens.Black, 10, 10,(Pens.Black, 10, 10,50, 10);50, 10);
Példapr: WorldKoordRendszMozgatasPéldapr: WorldKoordRendszMozgatas
![Page 18: Vizuális programozás](https://reader036.fdocuments.net/reader036/viewer/2022081419/56814605550346895db31072/html5/thumbnails/18.jpg)
Page – fizikai k.r.Page – fizikai k.r.A menüterület is beleesikA menüterület is beleesikPage transformationPage transformation
Pen myPen = new Pen(Color.Black,1); Pen myPen = new Pen(Color.Black,1); myGraphics.PageUnit = GraphicsUnit.Inch; myGraphics.PageUnit = GraphicsUnit.Inch; myGraphics.DrawLine(myPen, 0, 0, 2, 1);myGraphics.DrawLine(myPen, 0, 0, 2, 1);
Pen myPen = new Pen(Color.Black, Pen myPen = new Pen(Color.Black, 1/myGraphics.DpiX1/myGraphics.DpiX); ); DPI=Dot Per InchDPI=Dot Per Inch
![Page 19: Vizuális programozás](https://reader036.fdocuments.net/reader036/viewer/2022081419/56814605550346895db31072/html5/thumbnails/19.jpg)
KoordinátákKoordinátákMértékegységMértékegység– CoordinateSpace.DeviceCoordinateSpace.Device – képernyőpont – képernyőpont– CoordinateSpace.PageCoordinateSpace.Page – a koordináták a – a koordináták a
Graphics.PageUnit-ben megadott Graphics.PageUnit-ben megadott egységet használják (egységet használják (alapértelmezés a alapértelmezés a GraphicsUnit.Pixel)GraphicsUnit.Pixel)
– CoordinateSpace.CoordinateSpace.WorldWorldSpecifies that coordinatesSpecifies that coordinates are in the world coordinate are in the world coordinate context. World coordinates are used in a context. World coordinates are used in a nonphysical environment, such as a nonphysical environment, such as a modeling environment. modeling environment.
![Page 20: Vizuális programozás](https://reader036.fdocuments.net/reader036/viewer/2022081419/56814605550346895db31072/html5/thumbnails/20.jpg)
GraphicsUnitGraphicsUnitDisplayDisplay: Specifies the unit of measure of the display : Specifies the unit of measure of the display device. Typically pixels for video displays, and 1/100 inch device. Typically pixels for video displays, and 1/100 inch for printers. for printers.
Document: Document: Specifies the document unit (1/300 inch) as Specifies the document unit (1/300 inch) as the unit of measure. the unit of measure.
Inch: Inch: Specifies the inch as the unit of measure. Specifies the inch as the unit of measure.
Millimeter: Millimeter: Specifies the millimeter as the unit of Specifies the millimeter as the unit of measure. measure.
Pixel: Pixel: Specifies a device pixel as the unit of measure. Specifies a device pixel as the unit of measure.
Point: Point: Specifies a printer's point (1/72 inch) as the unit of Specifies a printer's point (1/72 inch) as the unit of measure. measure.
World: World: Specifies the world coordinate system unit as the Specifies the world coordinate system unit as the unit of measure. unit of measure.