V 1.0 Programozás III. Ismétlés (Grafikai lehetőségek WPF-ben) Visual utódok

V 1.0ÓE-NIK, 2014 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 100) 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 2

V 1.0ÓE-NIK, 2014 Visual Ahhoz biztosít szolgáltatásokat, hogy a leszármazott típus renderelhető legyen Több speciális célú utódosztály: pl. DrawingVisual (2D), Viewport3DVisual (3D) Az ezzel való rajzolásnak elsősorban kétféle variációja létezik: –Egy adott grafikusfelület-elem „vizuális gyermekei” (kirajzolandó objektumok) közé beteszünk újabb Visual objektumokat –Egyedi leszármazott típust definiálunk valamelyik grafikusfelület- elemből (tipikusan: FrameworkElement), kihasználva, hogy a GUI- elemek maguk is Visual utódok 3

V 1.0ÓE-NIK, 2014 DrawingVisual 2D rajzolásra –RenderOpen() függvényét kell hívni, DrawingContext objektumot ad vissza A DrawingContext segítségével „tölthetjük fel” a Visualt (vagy egy DrawingGroupot) tartalommal –Pl. a következő függvények értelmezettek rajta: –DrawEllipse() –DrawRectangle() –DrawGeometry() –DrawImage() … –A grafikai parancsok igazából nem rajzolnak, hanem csak tárolják/ megadják a kirajzolandó dolgokat (visszatartott módú grafikai rendszer) –A Visualon belül Drawingok formájában vannak tárolva a rajzok (DrawingGroupban). –A rajzolás időpontját a rendszer dönti el 4

V 1.0ÓE-NIK, 2014 Visual használat – 1. variáció Minden Visual utódnak (így a grafikusfelület-elemeknek is) vannak „vizuális gyermekei” (kirajzolandók) Új Visual objektumokat (pl. DrawingVisualokat) kell létrehozni és azokat elhelyezni a „vizuális gyermekek” között Kötelező felülírni az új Visualok „tulajdonosában” a VisualChildrenCount, GetVisualChild tulajdonságokat –VisualChildrenCount: adjuk vissza, hogy hány „vizuális gyermek” van. –GetVisualChild: adjuk vissza az n. „vizuális gyermeket”. Lehetséges az új Visual objektumokat az objektumfákban is elhelyezni (AddVisualChild(), AddLogicalChild()) –Események és találattesztelés támogatása miatt 5

V 1.0ÓE-NIK, 2014 Visual használat 1. variáció példa public partial class MainWindow : Window { //sokszor nem a MainWindow-ban DrawingVisual visualChild; //csináljuk, hanem egy FrameworkElement public MainWindow() //utódot származtatunk és azt rakjuk { //a MainWindow-ra majd InitializeComponent(); visualChild = new DrawingVisual(); using (DrawingContext context = visualChild.RenderOpen()) { context.DrawEllipse(Brushes.Red, null, new Point(50, 50),10,10); } AddVisualChild(visualChild); AddLogicalChild(visualChild); } protected override int VisualChildrenCount { get { return base.VisualChildrenCount + 1; } } protected override Visual GetVisualChild(int index) { if (index < base.VisualChildrenCount) return base.GetVisualChild(index); else return visualChild; } 6

V 1.0ÓE-NIK, 2014 Visual használat 2. variáció Kihasználjuk, hogy az ablak (vagy bármilyen más GUI elem) is Visual Amikor rajzolódik, az OnRender() metódusa hívódik –Ez felülírható, DrawingContext objektumot kap paraméterül, a DrawingContext-en keresztül tudunk rajzolni a Visualra Új rajzolás mindig kikényszeríthető az InvalidateVisual() függvénnyel class MainWindow : Window //tipikusan ezt sem a MainWindow-ban, { //hanem pl. FrameworkElement utód... //... //- ablaknál Background=Transparent kell. protected override void OnRender(DrawingContext drawingContext) { drawingContext.DrawGeometry(Brushes.Blue, new Pen(Brushes.Red, 2), geometry); } 7

V 1.0ÓE-NIK, 2014 Feladat – Asteroids 8

V 1.0ÓE-NIK, 2014 Asteroids szabályok: –Játékos csak foroghat és lőhet. –Az aszteroida véletlenszerű irányba egyenletesen mozog, ha a képernyő szélére ér, visszatér a másik oldalon –Ha a játékos lövése eltalál egy aszteroidát, az eltűnik. (Nehezebb verzió: két kisebb és gyorsabban mozgó részre válik szét, egy bizonyos mérethatárig.) –Ha a játékos lövése a képernyő szélére ér, visszatér a másik oldalon. Viszont a lövés csak bizonyos ideig „él”, egy idő után eltűnik. 9

V 1.0ÓE-NIK, 2014 Transzformációk Transform utódokkal reprezentálódnak (transzformációs mátrix) –Forgatás (RotateTransform) –Skálázás (ScaleTransform) –Nyújtás (SkewTransform) –Mozgatás (MoveTransform) –Általános transzformáció (MatrixTransform) –Több transzformáció egymás után (TransformGroup) 10

V 1.0ÓE-NIK, 2014 Transzformáció alkalmazásai GUI-elemeken (FrameworkElement utódok): –LayoutTransform (kihelyezés előtt transzformál) –RenderTransform (kihelyezés után transzformál) Geometriákon: –Transform Figyelem: nem módosít koordinátákat! –A Transform-ot levéve (xxx.Transform = Transform.Identity) az eredeti koordinátákon marad az objektum –Metszésnél esetleg gondot okoz 11

V 1.0ÓE-NIK, 2014 Geometriák metszése (érintésvizsgálat) Geometriák metsződésének vizsgálatához az elmetszéssel létrejött új geometriát létre kell hozni (Geometry.Combine()), majd a területét vizsgálni (GetArea()) Figyelem: LineGeometry-nak nincs kiterjedése, így a metszet területe 0 –Megoldása a vonal „kiterjesztésével” –geometry.GetWidenedPathGeometry(new Pen(Brushes.Blue, 2)) Geometry intersection = Geometry.Combine(geometry, otherGeometry, GeometryCombineMode.Intersect, null); return intersection.GetArea() != 0; 12

V 1.0ÓE-NIK, 2014 Feladat – Flappy Birds Turbo 13

V 1.0ÓE-NIK, 2014 Megoldási alternatíva Minden játékelem Geometry típusú adattagja úgy kerül beállításra, hogy a középpont koordinátája (0;0) legyen Kirajzolás/ütközésvizsgálat előtt transzformáljuk a megfelelő pozícióba TransformGroup tg = new TransformGroup(); tg.Children.Add(new TranslateTransform(cx, cy)); tg.Children.Add(new RotateTransform(degree, cx, cy)); Geometry copy = area.Clone(); copy.Transform = tg; return copy.GetFlattenedPathGeometry(); 14

V 1.0ÓE-NIK, 2014 Grafikai lehetőségek WPF-ben 15 MegközelítésEseménykezelés / rajzolás vezérlése HasználatObjektumok száma ShapeRajzolt objektumonként külön XAML + Binding~100 DrawingHosztoló objektum kezeli, az összes rajzolt objektumot együtt XAML + Binding + Converterek (xxx  Geometry) ~1000 VisualHosztoló objektum kezeli, egyedi kirajzoló metódus CS kód: OnRender + DrawingContext + Geometry ~10000