Programozás III. Ismétlés (Grafikai lehetőségek WPF-ben)

Az előadások a következő témára: "Programozás III. Ismétlés (Grafikai lehetőségek WPF-ben)"— Előadás másolata:

1 Programozás III. Ismétlés (Grafikai lehetőségek WPF-ben)
Drawing / Geometry objektumok TODO: A drawing automatikusan skáláz + GeometryGroup.FillRule!

2 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 leszármazottak) 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

3 Drawingok System.Windows.Media.Drawing osztály utódai
Rajzokat reprezentálunk velük Nem képesek maguktól a megjelenésre, hosztoló objektumba kell őket helyezni GeometryDrawing Egyszerű kétdimenziós alakzatokból álló rajzokat lehet vele készíteni GlyphRunDrawing Szöveges adatokat lehet vele rajzolni ImageDrawing Határoló téglalapban lehet vele képet megjeleníteni VideoDrawing Audio- vagy videófájlt lehet vele lejátszani (van más megoldás: MediaPlayer típus) DrawingGroup Több rajzot lehet vele egybefoglalni

4 Drawingok hosztoló objektumai
DrawingImage Segítségével a rajzot WPF-es Image objektumban megjeleníthetjük DrawingBrush Segítségével a rajzot ecsetként használhatjuk DrawingVisual Közvetlenül leírja egy objektum vizuális megjelenítését (később tárgyaljuk

5 Geometryk System.Windows.Media.Geometry utódai
Kétdimenziós rajz szerkezetét részletezik, síkidomokat, egyszerű alakzatokat, vonalakat adhatunk meg velük Nincs grafikus megjelenésük, csak szerkezetet reprezentálnak! RectangleGeometry Téglalap alakzat reprezentálását teszi lehetővé. EllipseGeometry Ellipszis alakzat reprezentálását teszi lehetővé LineGeometry Vonal reprezentálását teszi lehetővé PathGeometry Vonaldarabok gyűjteményét foglalja magában GeometryGroup Több geometriát lehet vele egybefoglalni …

6 Képben megjelenített GeometryDrawing példa
XAML kód: <Image Stretch="None"> <Image.Source> <DrawingImage> <DrawingImage.Drawing> <GeometryDrawing Brush="Black"> <GeometryDrawing.Geometry> <EllipseGeometry Center="10,10” RadiusX="10" RadiusY="10"> </EllipseGeometry> </GeometryDrawing.Geometry> </GeometryDrawing> </DrawingImage.Drawing> </DrawingImage> </Image.Source> </Image> WPF Image UI-elem létrehozása, forrásának beállítása DrawingImage-ben lévő rajz beállítása Rajzot alkotó geometria megadása GeometryDrawing-ban megadandó/megadható: Geometry, Brush, Pen

7 Képben megjelenített GeometryDrawing példa
C# kód: DrawingImage drawingImage = new DrawingImage(); GeometryDrawing geometryDrawing = new GeometryDrawing(); geometryDrawing.Brush = Brushes.Black; geometryDrawing.Geometry = new EllipseGeometry(new Point(10, 10), 10, 10); drawingImage.Drawing = geometryDrawing; image.Source = drawingImage;

8 Példa Szöveg megjelenítése Geometryként
FormattedText osztály BuildGeometry függvényével csináljuk Több Geometry összefogása egy GeometryGroupba A GeometryGroup önmaga is Geometry, így tudunk több komponensből álló geometriákat csinálni EllipseGeometry ellipszis = new EllipseGeometry(new Point(10, 10), 10, 10); FormattedText text = new FormattedText("Ez itt az ellipszisem.", CultureInfo.CurrentCulture, FlowDirection.LeftToRight, new Typeface("Tahoma"), 16, Brushes.Black); Geometry textGeometry = text.BuildGeometry(new Point(10, 20)); GeometryGroup group = new GeometryGroup(); group.Children.Add(ellipszis); group.Children.Add(textGeometry); geometryDrawing.Geometry = group;

9 Feladat

10 Feladat-kiegészítés Ha a játékos végzett az adott pályával, automatikusan töltődjön be egy másik Minden pályánál mérjük az időt, ami alatt megoldja a játékos (System.Diagnostics.Stopwatch osztály) Lehessen megjeleníteni a pályák megoldási idejét (GeometryDrawinggal rajzolt) grafikonon egy új ablakban