Vizulis programozs Rajzols WPF alkalmazsokban 2 D rajzols

Vizuális programozás Rajzolás WPF alkalmazásokban

2 D rajzolás Retained-mode graphics – a WPF gondoskodik a perzisztenciáról (GDI+-ban immediate mode graphics) Rajzolási lehetőségek - szintek Shapes Drawings & Geometries Visuals Dr. Johanyák Zsolt Csaba: Vizuális programozás (c) 2016

Shapes - Alakzatok Magas szintű Néhány osztály, rengeteg metódus, tulajdonságok, eseménykezelés, input kezelés (egér, billentyűzet) , kényelmes használat Nagy memóriahasználat, lassú Egy sor szabályos geometriai objektum (Ellipse, Line, Polygon, Poly. Line, Rectangle, Path) Megvalósítható: XAML-ben és C#-ban System. Windows. Shapes névtér Dr. Johanyák Zsolt Csaba: Vizuális programozás (c) 2016

Shapes – Mikor használjuk? Felhasználói interakció szükséges Egér input Tool. Tip Dr. Johanyák Zsolt

Alakzatok Mindegyik a Shape osztály leszármazottja Ellipse Line Path Polygon Polyline Rectangle Dr. Johanyák

Demo: Shapes XAML-ben <Ellipse Width="40" Height="60" Stroke="Green" Stroke. Thickness="2" Fill="Light. Green" Canvas. Left="250" Canvas. Top="100" x: Name="el. Lomb" /> Dr. Johanyák Zsolt Csaba: Vizuális programozás (c) 2016

Shapes XAML-ben Dr. Johanyák Zsolt Csaba: Vizuális programozás (c) 2016

Shapes C#-ban Dr. Johanyák Zsolt Csaba: Vizuális programozás (c) 2016

Vonaljellemzők megadása <Line Stroke="Black" Stroke. End. Line. Cap="Triangle" Stroke. Start. Line. Cap="Round" Stroke. Thickness="15" X 1="30" Y 1="30" X 2="100" Y 2="30" /> <Line Stroke="Black" Stroke. Thickness="10" Stroke. Dash. Array="2 0. 4" X 1="130" Y 1="30" X 2="250" Y 2="30" /> Dr. Johanyák Zsolt Csaba: Vizuális programozás (c) 2016

Brush Solid. Color. Brush Linear. Gradient. Brush Radial. Gradient. Brush Image. Brush Drawing. Brush – kifestés egy olyan objektummal, ami a Drawing leszármazottja Visual. Brush - kifestés egy olyan objektummal, ami a Visual leszármazottja Dr. Johanyák Zsolt Csaba: Vizuális programozás (c) 2016

Kifestés – Brush <Ellipse Fill="#FFC 42 D 2 D" Canvas. Left="10" Canvas. Top="100" Width="60" Height="60" /> <Ellipse Canvas. Left="100" Canvas. Top="100" Width="60" Height="60"> <Ellipse. Fill> <Radial. Gradient. Brush> <Gradient. Stop Color="Blue" Offset="0" /> <Gradient. Stop Color="Red" Offset="1" /> </Radial. Gradient. Brush> </Ellipse. Fill> </Ellipse> Dr. Johanyák Zsolt Csaba: Vizuális programozás (c) 2016

Kifestés – Brush Dr. Johanyák Zsolt Csaba: Vizuális programozás (c) 2016

Z sorrend A tárolóra elhelyezett alakzatok között van egy Z-sorrend A később feltett alakzatok elfedhetik a korábban feltett alakzatokat (pl. ha az elsőnek feltett alakzatot átmozgatjuk a másodiknak feltett alakzat pozíciójába, akkor az első a második alá kerül). Dr. Johanyák Zsolt Csaba: Vizuális programozás (c) 2016

Drawings & Geometries System. Windows. Media. Drawing absztrakt osztály leszármazottaival Vékonyabb réteg (ún. pehelysúlyú szolgáltatások) gyorsabb, kisebb erőforrásigény Nincs beépített input kezelés Valamilyen hoszt objektumban kell elhelyezni (pl. Drawing. Image, Drawing. Brush, Drawing. Visual) Több kód szükséges Fontosabb osztályok: Geometry. Drawing, Image. Drawing Dr. Johanyák Zsolt Csaba: Vizuális programozás (c) 2016

Jellemzők Felhasználói interakció csak jelentős kódolás árán oldható meg Megvalósítható: XAML-ben és C#-ban Drawing osztály fontosabb leszármazottai Geometry. Drawing Image. Drawing Video. Drawing. Group Dr. Johanyák Zsolt Csaba: Vizuális programozás (c) 2016

Demo: Drawing. Geometries Dr. Johanyák Zsolt Csaba: Vizuális programozás (c) 2016

Drawings & Geometries – Mikor használjuk? Felhasználói interakció nem szükséges (bár megoldható) Komplex, vektor alapú grafikus adatmegjelenítés szükséges Dr. Johanyák Zsolt Csaba: Vizuális programozás (c) 2016

Visuals System. Windows. Media. Visual leszármazottjai Legvékonyabb réteg leggyorsabb; csak elemi szolgáltatások, mindenhez meg kell írni a kódot (legtöbb kódolás) Nincs input esemény, felületmenedzser, adatkötés, alacsony szintű megközelítés Fontosabb osztályok: Drawing. Visual, Viewport 3 DVisual, Container. Visual Dr. Johanyák Zsolt Csaba: Vizuális programozás (c) 2016

Visuals Legkisebb erőforrásigény Legjobb teljesítmény Valamilyen hoszt objektumban kell elhelyezni (pl. Drawing. Image, Drawing. Brush, Drawing. Visual) A hoszt objektum biztosítja a rétegmenedzselést és az eseménykezelést Csak C#-ból oldható meg Rajzolási kapcsolatot/eszközkapcsolatot kell létrehozni és megnyitni, majd a rajzolást követően lezárni (using szerkezet használható) Dr. Johanyák Zsolt Csaba: Vizuális programozás (c) 2016

Visuals Az új objektumot el kell helyezni a logikai és a vizuális fában Át kell definiálni a Visual. Children. Count virtuális tulajdonságot Át kell definiálni a Get. Visual. Child virtuális metódust Mikor használjuk? Nagy mennyiségű adat gyors megjelenítésére Dr. Johanyák Zsolt Csaba: Vizuális programozás (c) 2016

Demo: Visuals Dr. Johanyák Zsolt Csaba: Vizuális programozás (c) 2016

Transformations Translate. Transform Rotate. Transform Scale. Transform Skew. Transform Matrix. Transform. Group Demo Dr.

Skew. Transform http: //msdn. microsoft. com/en-us/library/ms 746708. aspx Dr. Johanyák Zsolt Csaba: Vizuális programozás

Matrix. Transform M 11 M 12 0 M 21 M 22 0 Of. X Of. Y 1 X' = X*M 11 + Y*M 21 + Of. X Y' = X*M 12 + Y*M 22 + Of. Y Affin azaz transzformációt valósít meg egyenestartó, osztóviszonytartó (pl. felezőpont képe felezőpont), párhuzamosságtartó (pl. paralelogramma képe paralelogramma). Dr. Johanyák Zsolt Csaba: Vizuális programozás (c) 2016

Demo: Transform Translate. Transform bt. Gomb. Render. Transform = new Translate. Transform(100, 50); Dr.

Rotate. Transform bt. Gomb. Render. Transform = new Rotate. Transform(30, bt. Gomb. Width /

Scale. Transform bt. Gomb. Render. Transform = new Scale. Transform(0. 5, 2); Dr. Johanyák

Matrix. Transform // m 11, m 12, Offset. X, Offset. Y // X' = X*M 11 + Y*M 21 + Of. X // Y' = X*M 12 + Y*M 22 + Of. Y bt. Gomb. Render. Transform = new Matrix. Transform(0. 7, -0. 7, 0, 0); Dr. Johanyák Zsolt Csaba: Vizuális programozás (c) 2016

WPF animációk

Animáció using System. Windows. Media. Animation; Vezérlő egy vagy több tulajdonságának változtatása Dependency. Property kell legyen, pl. Width. Property Height. Property Dr. Johanyák Zsolt Csaba: Vizuális programozás (c) 2016

Animáció típusok Lineáris (egyenletes) változtatás két érték között: Adattípus. Animation (Double. Animation, Color. Animation, Byte. Animation, stb. ) Útvonal alapú: Adattípus. Animation. Using. Path (Double. Animation. Using. Path) Előredefiniált értéksor váltogatása: Adattípus. Animation. Using. Key. Frames Dr. Johanyák Zsolt Csaba: Vizuális programozás (c) 2016

Lineáris animáció Méretváltoztató animáció Ha az egeret a kép fölé visszük, kitölti a piros vonallal megrajzolt keretet Double. Animation From To Duration Vezérlő. Begin. Animation Dr. Johanyák Zsolt Csaba: Vizuális programozás (c) 2016

A felület Dr. Johanyák Zsolt Csaba: Vizuális programozás (c) 2016

Megvalósítás Time. Span ts = Time. Span. From. Milliseconds(500); Double. Animation da=new Double. Animation(); da. From = Kép. Szélesség; da. To = Kép. Szélesség + d. Sz; da. Duration=new Duration(ts); Double. Animation db=new Double. Animation(); db. From = Kép. Magasság; db. To = Kép. Magasság + d. M; db. Duration = new Duration(ts); im. Kép. Begin. Animation(Width. Property, da); im. Kép. Begin. Animation(Height. Property, db); Dr. Johanyák Zsolt Csaba: Vizuális programozás (c) 2016

Beállítási lehetőségek From To By Duration Acceleration. Ratio Deceleration. Ratio Speed. Ratio Auto. Reverse Begin. Time Repeat. Behavior Fill. Behavior Esemény: Completed Dr. Johanyák Zsolt Csaba: Vizuális programozás (c) 2016

Demo Kep. Meretvaltoztato Teglalap. Meretvalto Dr. Johanyák Zsolt Csaba: Vizuális programozás (c) 2016

Útvonal alapú animáció Dr. Johanyák Zsolt Csaba: Vizuális programozás (c) 2016

Dr. Johanyák Zsolt Csaba: Vizuális programozás (c) 2016

A felület <Dock. Panel> <Tool. Bar Dock. Panel. Dock="Top" Height="30" Name="to. Eszköztár"> <Button Name="bt. Indít" Click="bt. Indít_Click" Content="Indít"/> </Tool. Bar> <Canvas Name="cv. Lap" Dock. Panel. Dock="Top"> <Rectangle Name="rc. Négyzet" Width="10" Fill="Indian. Red" Height="10" /> </Canvas> </Dock. Panel> Dr. Johanyák Zsolt Csaba: Vizuális programozás (c) 2016

Az útvonal megadása Útvonalgeometria (Path. Geometry) Útvonalalak (Path. Figure) Szegmens (Arc. Segment, Bezier. Segment, Poly. Bezier. Segment, Line. Segment, Poly. Quadratic. Bezier. Segment, Quadratic. Bezier. Segment) Szegmens … Útvonalalak … … Dr. Johanyák Zsolt Csaba: Vizuális programozás (c) 2016

Animáció Külön az x és y koordinátára Double. Animation. Using. Path dax. Animáció = new Double. Animation. Using. Path(); dax. Animáció. Path. Geometry = pgÚtvonal; dax. Animáció. Duration = Time. Span. From. Seconds(10); dax. Animáció. Source = Path. Animation. Source. X; dax. Animáció. Auto. Reverse = true; rc. Négyzet. Begin. Animation(Canvas. Top. Property, dax. Animáció); Dr. Johanyák Zsolt Csaba: Vizuális programozás (c) 2016