Transcript bemutató - johanyak.hu

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
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
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
C#
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
RectangleGeometry
LineGeometry
EllipseGeometry
PathGeometry
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
Shapes – Mikor használjuk?
Felhasználói interakció szükséges
– Egér input
– ToolTip
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
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
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
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
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
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
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
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
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
Kifestés – Brush
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
Transformations
TranslateTransform
RotateTransform
ScaleTransform
SkewTransform
MatrixTransform
TransformGroup
Demo
J.Zs.Cs.: Vizuális programozás (c) 2012
SkewTransform
http://msdn.microsoft.com/enus/library/ms746708.aspx
J.Zs.Cs.: Vizuális programozás (c) 2012
MatrixTransform
M11 M12 0
M21 M22 0
OfX OfY 1
X' = X*M11 + Y*M21 + OfX
Y' = X*M12 + Y*M22 + OfY
J.Zs.Cs.: Vizuális programozás (c) 2012
WPF animációk
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
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
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
A felület
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);
J.Zs.Cs.: Vizuális programozás (c) 2012
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
Demo
KepMeretvaltoztato
TeglalapMeretvalto
J.Zs.Cs.: Vizuális programozás (c) 2012
Útvonal alapú animáció
J.Zs.Cs.: Vizuális programozás (c) 2012
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
Az útvonal megadása
Útvonalgeometria (PathGeometry)
– Útvonalalak (PathFigure)
Szegmens
(ArcSegment,BezierSegment,PolyBezierSeg
ment, LineSegment, PolyLineSegment,
PolyQuadraticBezierSegment,
QuadraticBezierSegment)
Szegmens …
– Útvonalalak …
…
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
Előredefiniált értéksor
Demo
J.Zs.Cs.: Vizuális programozás (c) 2012