1 / 36

Vizuális programozás

Vizuális programozás. Rajzolás WPF alkalmazásokban. 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. Shapes - Alakzatok.

lenka
Download Presentation

Vizuális programozás

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 2D rajzolás • Retained-modegraphics – 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

  3. 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. XAML • Egyszerűen leírható XAML-ben: <EllipseWidth="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. C# DoubleTetőMagasság=30; RectanglercHáz = newRectangle(); 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. RectangleGeometry • LineGeometry • EllipseGeometry • PathGeometry J.Zs.Cs.: Vizuális programozás (c) 2012

  7. 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. 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. 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. 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. 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. 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. 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="2 0.4 0.4 0.4" X1="130" Y1="30" X2="250" Y2="30" /> J.Zs.Cs.: Vizuális programozás (c) 2012

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

  19. Kifestés – Brush <EllipseFill="#FFC42D2D" Canvas.Left="10" Canvas.Top="100" Width="60" Height="60" /> <EllipseCanvas.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. Transformations • TranslateTransform • RotateTransform • ScaleTransform • SkewTransform • MatrixTransform • TransformGroup Demo J.Zs.Cs.: Vizuális programozás (c) 2012

  21. SkewTransform • http://msdn.microsoft.com/en-us/library/ms746708.aspx J.Zs.Cs.: Vizuális programozás (c) 2012

  22. MatrixTransform • M11 M12 0M21 M22 0OfXOfY1 • X' = X*M11 + Y*M21 + OfXY' = X*M12 + Y*M22 + OfY J.Zs.Cs.: Vizuális programozás (c) 2012

  23. WPF animációk

  24. Animáció • usingSystem.Windows.Media.Animation; • Vezérlő egy vagy több tulajdonságának változtatása • DependencyProperty kell legyen, pl. • WidthProperty • HeightProperty J.Zs.Cs.: Vizuális programozás (c) 2012

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

  28. Megvalósítás TimeSpants = TimeSpan.FromMilliseconds(500); DoubleAnimation da=newDoubleAnimation(); da.From = KépSzélesség; da.To = KépSzélesség + dSz; da.Duration=newDuration(ts); DoubleAnimation db=newDoubleAnimation(); db.From = KépMagasság; db.To = KépMagasság + dM; db.Duration = newDuration(ts); 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 J.Zs.Cs.: Vizuális programozás (c) 2012

  30. 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. A felület <DockPanel> <ToolBarDockPanel.Dock="Top" Height="30" Name="toEszköztár"> <ButtonName="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. 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. Animáció • Külön az x és y koordinátára DoubleAnimationUsingPathdaxAnimáció = newDoubleAnimationUsingPath(); 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

More Related