Grafikai lehetőségek WPF-ben Egyszerű grafika (Shape-ek)

Az előadások a következő témára: "Grafikai lehetőségek WPF-ben Egyszerű grafika (Shape-ek)"— Előadás másolata:

1 Grafikai lehetőségek WPF-ben Egyszerű grafika (Shape-ek)
Programozás III. Grafikai lehetőségek WPF-ben Grafikai alapok Egyszerű grafika (Shape-ek)

2 Grafikai lehetőségek WPF-ben
A grafikai keretrendszerek között azonosítunk azonnali és visszatartott módúakat Retained (visszatartott) mód: A grafikai primitívekből (vonalak, alakzatok…) készített jelenetet valamilyen formában a memóriában tartja, minden frame rajzolásánál a tárolt modell alapján keletkeznek a rajzolási parancsok. Az alkalmazás alakzatokat adhat hozzá vagy vehet el. Immediate (azonnali) mód: A keretrendszer nem tárolja a jelenetet, minden frame rajzolásánál az alkalmazás közvetlenül adja ki a rajzolási parancsokat. Az összes kirajzolandó dolog számon tartása az alkalmazás feladata. A WPF visszatartott módú grafikai rendszert biztosít Immediate mode: GDI/GDI+, Direct2D, Direct3D Retained mode: WPF, Direct3D (3.0 után megszüntették a retained mode-ot)

3 Grafikai lehetőségek WPF-ben
Shape-ek (System.Windows.Shapes.Shape leszármazottak) Egyszerű, előre elkészített grafikai alakzatok Toolboxban is szerepelnek FrameworkElement utódok: input, fókusz, események… Csak kevés számú (max 10-20) objektum esetén Drawing objektumok (System.Windows.Media.Drawing névtér) Nincs belső támogatásuk input eseményekhez Nem képesek maguktól a megjelenésre, hosztoló objektumban kell őket elhelyezni Legtöbbször XAML-ból kezeljük Gyorsabb a Shape-eknél (max néhány 100 objektumig) Visual objektumok (System.Windows.Media.Visual) Legbonyolultabb, leggyorsabb (max kb objektumig) XAML lehetőségek korlátozottak, mindig kódból kezeljük

4 WPF grafikai alapok – koordináta-rendszer
A WPF-ben használt koordináta-rendszer origója a bal felső sarokban van – minden helyzetmegadás a tartalmazó objektum bal felső sarkához képest értendő Egy objektum helyzetét befolyásolják pl.: HorizontalAlignment, Margin, Padding, tartalmazó/tartalommenedzser beállításai, … A fentiekből együtt, ún. Layout (elhelyezési) fázis során áll össze a 2D pozíciója – nem egyszerűen elérhető és nem (nagyon nehézkesen) állítható! A Canvas tartalommenedzser támogatja az objektumok adott koordinátákra való elhelyezését – csak grafikánál!

5 WPF grafikai alapok – típusok (System.Windows)
System.Windows névtérben sok egyszerű típus van, amit főként grafikánál használunk Nincs megjelenítésük, csak adatreprezentációs célra! (Struktúrák (érték típusok)) Point: pont a síkban (2D) X, Y Size: méret Width, Height Rect, Int32Rect: téglalap a síkban X, Y, Width, Height, Top, Bottom, Left, Right Vector: helyvektor a síkban X, Y, Length, LengthSquared

6 WPF grafikai alapok – színek
Minden színt négy darab 8 bites érték jellemez: Vörös (R), zöld (G), kék (B) – közötti értékeket vehetnek fel (így összesen 256^3 ≈ 16 millió szín állhat elő). Minél nagyobb a szám, annál nagyobb az adott színkomponens intenzitása. Alfa – A szín átlátszóságát határozza meg , 0: teljesen átlátszó, 255: teljesen átlátszatlan. A szín reprezentálására a Color struktúrát használjuk Color color = Colors.Red; Color color = Color.FromArgb(20, 255, 0, 0);

7 WPF grafikai alapok – ecsetek
A WPF grafikus lehetőségeinek mindegyike ecseteket használ a 2D felületek kitöltéseinek megadásához System.Windows.Media.Brush absztrakt osztály utódai SolidColorBrush: adott színnel való kitöltés LinearGradientBrush: lineáris átmenettel való kitöltés RadialGradientBrush: sugaras átmenettel való kitöltés ImageBrush: képpel való kitöltés DrawingBrush: rajzzal való kitöltés VisualBrush: Visual utódobjektummal való kitöltés

8 WPF grafikai alapok – ecsetek
Forrás:

9 WPF grafikai alapok – ecsetek
C# megadás: XAML megadás: //előre elkészített ecset: button.Background = Brushes.Red; //saját ecset előre elkészített színnel: button.Background = new SolidColorBrush(Colors.Aqua); //saját ecset saját színnel: Color almostRed = Color.FromArgb(20, 255, 0, 0); button.Background = new SolidColorBrush(almostRed); <Button Background="AliceBlue" Content="Button" .../> <Button Background="#FFFF0000" Content="Button2" .../> <Grid.Resources> <SolidColorBrush x:Key="kedvencSzinem" Color="Azure"/> </Grid.Resources> ... <Button Background="{StaticResource kedvencSzinem}"></Button>

10 Shape-ek Ellipse Rectangle Line Polygon Polyline Path
Utóbbi négy elem Toolboxhoz adása: Toolbox  Jobb klikk  Choose Items…  WPF Components Nincs jó szerkesztési idejű támogatás hozzájuk

11 Shape-ek tulajdonságai
Ellipse, Rectangle: Width, Height: kért dimenziók (ActualWidth, ActualHeight: az elrendezések/méretezések után megkapott dimenziók) Stroke: vonal ecsetje StrokeThickness: vonal vastagsága StrokeDashArray, StrokeEndLineCap: vonaldíszítő elemek Fill: kitöltés ecsetje RenderTransform/LayoutTransform: transzformáció az elem elrendezése és méretezése után/előtt (forgatás/nyújtás/eltolás) Line: Stroke, StrokeThickness, StrokeDashArray, StrokeEndLineCap, RenderTransform/LayoutTransform X1, X2, Y1, Y2: vonal két végpontja

12 Shape-ek tulajdonságai
Polygon, Polyline: Stroke, StrokeThickness, StrokeDashArray, StrokeEndLineCap, Fill, RenderTransform/LayoutTransform Points: PointCollection típusú pontgyűjtemény (elemei Point típusúak) Polygon polygon = new Polygon(); //... Point[] points = new Point[3]; points[0] = new Point(0, 0); points[1] = new Point(20, 40); points[2] = new Point(70, 0); polygon.Points = new PointCollection(points); <Polygon Points="0,0 20,40 70,0" .../>

13 Feladat

14 System.Windows.Threading.DispatcherTimer
Műveletek adott időközönkénti végrehajtására használjuk Interval Tulajdonság, amelynek segítségével megadhatjuk, hogy a timer milyen gyakran jelezzen (TimeSpan típusú) Start(), Stop() Függvények elindításra, leállításra Tick Esemény, ami jelzi, hogy a megadott időtartam letelt (a jelzéssel együtt az időtartam mérése újraindul) Sok más Timer típus van – ne keverjük! (System.Windows.Forms.Timer, System.Timers.Timer, System.Threading.Timer, System.Web.Ui.Timer…)