vizuális programozás

Vizuális programozásVizuális programozás

Rajzolás Windows Forms Rajzolás Windows Forms alkalmazásokbanalkalmazásokban

GDI+GDI+

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

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

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

Kifestőminta megadásaKifestőminta megadása

BrushBrush– SolidBrushSolidBrush– HatchBrushHatchBrush– LinearGradientBrushLinearGradientBrush– TextureBrushTextureBrush

Példaprogram: ÁttetszőségPéldaprogram: Áttetszőség

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 )

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

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

PéldaprogramokPéldaprogramokGrafikaNemPaintGrafikaNemPaint

GrafikaPaintGrafikaPaintKepreRajzolasKepreRajzolas

DuplaPufferHasznalatDuplaPufferHasznalat

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)

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

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..

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.

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

EredetiEredeti

TranslT.(70,0)TranslT.(70,0)

TranslT.(-70,20)TranslT.(-70,20)

ScaleT.(0.5f,1f)ScaleT.(0.5f,1f)

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 – 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

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. 

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.