Rajzolás WPF alkalmazásokban

Az előadások a következő témára: "Rajzolás WPF alkalmazásokban"— Előadás másolata:

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

2 2D rajzolás Retained-mode graphics – a WPF gondoskodik a perzisztenciáról Rajzolási lehetőségek - szintek Shapes Drawings & Geometries Visuals Közös eszközök Ecsetek, tollak, Transzformációs objektumok A GDI+-ban immediate mode graphics volt, azaz a programozó kellett gondoskodjon a perzisztenciáról és frissítésről, ld. Eltűnő kép probléma

3 J.Zs.Cs.: Vizuális programozás (c) 2012
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,PolyLine, Rectangle, Path) Megvalósítható: XAML-ben és C#-ban J.Zs.Cs.: Vizuális programozás (c) 2012

4 J.Zs.Cs.: Vizuális programozás (c) 2012
XAML Egyszerűen leírható XAML-ben: <Ellipse Width="40" Height="50" Stroke="Green" StrokeThickness="2" Fill="LightGreen" Canvas.Left="25" Canvas.Top="30" Name="elLomb" MouseDown="elLomb_MouseDown" MouseMove="elLomb_MouseMove" /> J.Zs.Cs.: Vizuális programozás (c) 2012

5 J.Zs.Cs.: Vizuális programozás (c) 2012
Double TetőMagasság=30; Rectangle rcHáz = new Rectangle(); rcHáz.Width=110; rcHáz.Height=80; rcHáz.Stroke = Brushes.DarkRed; rcHáz.StrokeThickness = 2; rcHáz.Fill = Brushes.LightCoral; rcHáz.SetValue(Canvas.LeftProperty, (double)(100)); rcHáz.SetValue(Canvas.TopProperty, (double)(100+TetőMagasság)); cvLap.Children.Add(rcHáz); J.Zs.Cs.: Vizuális programozás (c) 2012

6 J.Zs.Cs.: Vizuális programozás (c) 2012
RectangleGeometry LineGeometry EllipseGeometry PathGeometry J.Zs.Cs.: Vizuális programozás (c) 2012

7 J.Zs.Cs.: Vizuális programozás (c) 2012
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). J.Zs.Cs.: Vizuális programozás (c) 2012

8 Shapes – Mikor használjuk?
Felhasználói interakció szükséges Egér input ToolTip J.Zs.Cs.: Vizuális programozás (c) 2012

9 J.Zs.Cs.: Vizuális programozás (c) 2012
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. DrawingImage, DrawingBrush, DrawingVisual) Több kód szükséges Fontosabb osztályok: GeometryDrawing, ImageDrawing J.Zs.Cs.: Vizuális programozás (c) 2012

10 J.Zs.Cs.: Vizuális programozás (c) 2012
Felhasnálói interakció csak jelentős kódolás árán oldható meg Megvalósítható: XAML-ben és C#-ban J.Zs.Cs.: Vizuális programozás (c) 2012

11 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 J.Zs.Cs.: Vizuális programozás (c) 2012

12 J.Zs.Cs.: Vizuális programozás (c) 2012
Visuals System.Windows.Media.Visual leszármazottai 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: DrawingVisual, Viewport3DVisual, ContainerVisual J.Zs.Cs.: Vizuális programozás (c) 2012

13 J.Zs.Cs.: Vizuális programozás (c) 2012
Visuals Legkisebb erőforrásigény  Legjobb teljesítmény Valamilyen hoszt objektumban kell elhelyezni (pl. DrawingImage, DrawingBrush, DrawingVisual) 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ó) J.Zs.Cs.: Vizuális programozás (c) 2012

14 J.Zs.Cs.: Vizuális programozás (c) 2012
Visuals Az új objektumot el kell helyezni a logikai és a vizuális fában Át kell definiálni a VisualChildrenCount virtuális tulajdonságot Át kell definiálni a GetVisualChild virtuális metódust Mikor használjuk? Nagy mennyiségű adat gyors megjelenítésére J.Zs.Cs.: Vizuális programozás (c) 2012

15 J.Zs.Cs.: Vizuális programozás (c) 2012
Vonalrajzolás - Pen Legtöbbször nem kell közvetlenül előállítani, az egyes alakzatok vonaltulajdonságainak megadásával definiálhatjuk jellemzőit J.Zs.Cs.: Vizuális programozás (c) 2012

16 Vonaljellemzők megadása
<Line Stroke="Black" StrokeEndLineCap="Triangle" StrokeStartLineCap="Round" StrokeThickness="15" X1="30" Y1="30" X2="100" Y2="30" /> <Line Stroke="Black" StrokeThickness="10" StrokeDashArray=" " X1="130" Y1="30" X2="250" Y2="30" /> A szaggatott vonalat a StrokeDashArray segítségével definiáljuk. A megadott minta fog ismétlődni. Itt 2 egység vonal 0.4 egység szünet, 0.4 egység rövid vonal, 0,4 egység szünet. A tényleges hosszúság a vonalvastagság függvénye (2x10=20 pont). J.Zs.Cs.: Vizuális programozás (c) 2012

17 J.Zs.Cs.: Vizuális programozás (c) 2012
Brush SolidColorBrush LinearGradientBrush RadialGradientBrush ImageBrush DrawingBrush – kifestés egy olyan objektummal, ami a Drawing leszármazottja VisualBrush - kifestés egy olyan objektummal, ami a Visual leszármazottja J.Zs.Cs.: Vizuális programozás (c) 2012

18 J.Zs.Cs.: Vizuális programozás (c) 2012
Kifestés – Brush Egyenletes kifestés és sugár irányú gradiens színváltós kifestés beállítása J.Zs.Cs.: Vizuális programozás (c) 2012

19 J.Zs.Cs.: Vizuális programozás (c) 2012
Kifestés – Brush <Ellipse Fill="#FFC42D2D" Canvas.Left="10" Canvas.Top="100" Width="60" Height="60" /> <Ellipse Canvas.Left="100" Canvas.Top="100" Width="60" Height="60"> <Ellipse.Fill> <RadialGradientBrush> <GradientStop Color="Blue" Offset="0" /> <GradientStop Color="Red" Offset="1" /> </RadialGradientBrush> </Ellipse.Fill> </Ellipse> J.Zs.Cs.: Vizuális programozás (c) 2012

20 J.Zs.Cs.: Vizuális programozás (c) 2012
Transformations TranslateTransform RotateTransform ScaleTransform SkewTransform MatrixTransform TransformGroup Demo A transzformációt követően is tárolva marad az eredeti helyzet, és ha megadunk egy új transzformációt, akkor az az eredetei helyzethez képes értelmeződik. Ld. Példaprogram: hajtsuk végre egymás után az eltolást és a forgatást. J.Zs.Cs.: Vizuális programozás (c) 2012

21 J.Zs.Cs.: Vizuális programozás (c) 2012
SkewTransform J.Zs.Cs.: Vizuális programozás (c) 2012

22 J.Zs.Cs.: Vizuális programozás (c) 2012
MatrixTransform M11 M M21 M OfX OfY 1 X' = X*M11 + Y*M21 + OfX Y' = X*M12 + Y*M22 + OfY J.Zs.Cs.: Vizuális programozás (c) 2012

23 WPF animációk

24 J.Zs.Cs.: Vizuális programozás (c) 2012
Animáció using System.Windows.Media.Animation; Vezérlő egy vagy több tulajdonságának változtatása DependencyProperty kell legyen, pl. WidthProperty HeightProperty Az adott DependencyProperty egy hagyományos tulajdonságot képvisel csak olvasható módon J.Zs.Cs.: Vizuális programozás (c) 2012

25 J.Zs.Cs.: Vizuális programozás (c) 2012
Animáció típusok Lineáris (egyenletes) változtatás két érték között: AdattípusAnimation (DoubleAnimation, ColorAnimation, ByteAnimation, stb.) Útvonal alapú: AdattípusAnimationUsingPath (DoubleAnimationUsingPath) Előredefiniált értéksor váltogatása: AdattípusAnimationUsingKeyFrames J.Zs.Cs.: Vizuális programozás (c) 2012

26 J.Zs.Cs.: Vizuális programozás (c) 2012
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 DoubleAnimation From To Duration Vezérlő.BeginAnimation J.Zs.Cs.: Vizuális programozás (c) 2012

27 J.Zs.Cs.: Vizuális programozás (c) 2012
A felület J.Zs.Cs.: Vizuális programozás (c) 2012

28 J.Zs.Cs.: Vizuális programozás (c) 2012
Megvalósítás TimeSpan ts = TimeSpan.FromMilliseconds(500); DoubleAnimation da=new DoubleAnimation(); da.From = KépSzélesség; da.To = KépSzélesség + dSz; da.Duration=new Duration(ts); DoubleAnimation db=new DoubleAnimation(); db.From = KépMagasság; db.To = KépMagasság + dM; db.Duration = new Duration(ts); imKép.BeginAnimation(WidthProperty,da); imKép.BeginAnimation(HeightProperty,db); private void imKép_MouseEnter(object sender, MouseEventArgs e) { // A vízszintes méretváltoztatást leíró animáció objektum. DoubleAnimation da=new DoubleAnimation(); // Kezdőméret. da.From = KépSzélesség; // Végső méret. da.To = KépSzélesség + dSz; // Az animáció időtartama. da.Duration=new Duration(ts); // A függőleges méretváltoztatást leíró animáció objektum. DoubleAnimation db = new DoubleAnimation(); db.From = KépMagasság; db.To = KépMagasság + dM; db.Duration = new Duration(ts); // A két animáció elindítása. imKép.BeginAnimation(WidthProperty,da); imKép.BeginAnimation(HeightProperty,db); } J.Zs.Cs.: Vizuális programozás (c) 2012

29 Beállítási lehetőségek
From To By Duration AccelerationRatio DecelerationRatio SpeedRatio AutoReverse BeginTime RepeatBehavior FillBehavior Esemény: Completed By - ennyivel változik a kezdőérték AutoReverse – a végrehajtás után csinálja meg visszafele is BeginTime – mennyi idő múlva kezdődjön – alap 0 (késleltetés) FillBehavior RepeatBehavior – ismétlődjön-e (db, végtelen, idő) J.Zs.Cs.: Vizuális programozás (c) 2012

30 J.Zs.Cs.: Vizuális programozás (c) 2012
Demo KepMeretvaltoztato TeglalapMeretvalto J.Zs.Cs.: Vizuális programozás (c) 2012

31 Útvonal alapú animáció
J.Zs.Cs.: Vizuális programozás (c) 2012

32 J.Zs.Cs.: Vizuális programozás (c) 2012

33 J.Zs.Cs.: Vizuális programozás (c) 2012
A felület <DockPanel> <ToolBar DockPanel.Dock="Top" Height="30" Name="toEszköztár"> <Button Name="btIndít" Click="btIndít_Click" Content="Indít"/> </ToolBar> <Canvas Name="cvLap" DockPanel.Dock="Top"> <Rectangle Name="rcNégyzet" Width="10" Fill="IndianRed" Height="10" /> </Canvas> </DockPanel> J.Zs.Cs.: Vizuális programozás (c) 2012

34 J.Zs.Cs.: Vizuális programozás (c) 2012
Az útvonal megadása Útvonalgeometria (PathGeometry) Útvonalalak (PathFigure) Szegmens (ArcSegment,BezierSegment,PolyBezierSegment, LineSegment, PolyLineSegment, PolyQuadraticBezierSegment, QuadraticBezierSegment) Szegmens … Útvonalalak … … J.Zs.Cs.: Vizuális programozás (c) 2012

35 J.Zs.Cs.: Vizuális programozás (c) 2012
Animáció Külön az x és y koordinátára DoubleAnimationUsingPath daxAnimáció = new DoubleAnimationUsingPath(); daxAnimáció.PathGeometry = pgÚtvonal; daxAnimáció.Duration = TimeSpan.FromSeconds(10); daxAnimáció.Source = PathAnimationSource.X; daxAnimáció.AutoReverse = true; rcNégyzet.BeginAnimation(Canvas.TopProperty, daxAnimáció); J.Zs.Cs.: Vizuális programozás (c) 2012

36 Előredefiniált értéksor
Demo J.Zs.Cs.: Vizuális programozás (c) 2012