Előadást letölteni
Az előadás letöltése folymat van. Kérjük, várjon
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
Hasonló előadás
© 2024 SlidePlayer.hu Inc.
All rights reserved.