I sidste blogindlæg om silverlight nåede jeg lige kort at berøre Path elementet, som har en Path.Data collection bestående af Geometry elementer som tegnes.
Der findes 4 basale typer geometry elementer som er:
-
RectangleGeometry
-
EllipseGeometry
-
LineGeometry
-
PathGeometry
De 3 første fungerer på samme måde som de tilsvarende elemeter jeg gennemgik i sidste blogindlæg, og RectangleGeometry blev ligeledes berørt i eksemplet på at bruge Path.
PathGeometry
PathGeometry er et meget komplekst element der kan bestå af en række segmenter, som findes i 7 forskellige typer:
Disse elementer kan tilføjes til et PathFigure element - som der så igen kan være flere af i et PathGeometry element.
PathFigure har en StartPoint property som beskriver hvor der tegnes fra og derefter tegnes de tilføjede segmenter efter hinanden. Som altid siger et eksempel mere end 1000 ord.
<Canvas Name="Canvas1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="640" Height="480">
<Path Name="Car" Stroke="Green" Canvas.Left="100" Canvas.Top="100" StrokeThickness="1">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="50,50">
<LineSegment Point="100,100" />
<ArcSegment Point="150,150" Size="20,20" />
<BezierSegment Point1="250,300" Point2="200,50" Point3="0,0" />
<ArcSegment Point="50,50" Size="20,20" />
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
</Canvas>
Som det fremgår kan man tegne virkeligt komplekse ting med meget enkle midler.
Geometri elementer som strenge
En smart feature er at Geometries kan beskrives som strenge, hvilket tillader en væsentligt mere kompakt syntaks. Læsevenligheden kan man tilgengæld godt stille spørgsmålstegn ved, men det kan være det bliver lettere når man bliver lidt mere rutineret.
Jeg vil undgå at gennemgå alle kommandoer, da der alligevel allerede findes omfattende sites hvor man kan slå den slags ting op, men vil da give et eksempel på nogen af de mest brugte ved at tegne den ovenstående figur igen ved hjælp af en kommandostreng.
M angiver StartPoint og er derved altid angivet. Ved at slutte med Z kan man iøvrigt sørge for at figuren lukkes - dette svarer til at sætte propertien IsClosed="True" på PathFigure.
L angiver at der skal tegnes en linie hen til et punkt.
A angiver at der skal tegnes en arc ud fra formlen "A radiusX radiusY grader IsLargeArc Clockwise x,y".
C angiver at der skal tegnes et beziersegment ud fra formlen "C punkt1X,punkt1Y punkt2X,punkt2Y x,y".
Alle kommandoer kan desuden skrives som lowercase hvilket bevirker at de fortolkes relativt til nuværende punkt frem for som absolute koordinater.
For at tegne den figur vi havde tidligere kan vi derfor gøre følgende.
<Path Name="Car" Stroke="Green" Canvas.Left="100" Canvas.Top="100"
Data="M 50,50 L 100,100 A 20,20 0 0 0 150,150 C 250,300 200,50 0,0 A 20,20 0 0 0 50,50" StrokeThickness="1" />
Dette virker nok knap så intuitivt at læse, men da man nok oftest vil arbejde med et værktøj som expression blend er det smart at have en kompakt syntaks, da man derved også begrænser hvor meget ens XAML skal fylde.
Clipping ved hjælp af Geometries
Geometries kan ikke kun bruges til at tegne elementer, men også til at beskære andre elementer. Dette gøres ved at sætte et hvilket som helst elements Clip element til et Geometry element. For eksempel kan en Ellipse beskæres af en anden ellipse således.
<Ellipse Width="250" Height="150" Fill="Orange" Stroke="Black" StrokeThickness="3">
<Ellipse.Clip>
<EllipseGeometry RadiusX="150" RadiusY="200" />
</Ellipse.Clip>
</Ellipse>
Dette giver især spændende muligheder hvis man f.eks arbejder med billeder eller video, hvor det også er muligt at benytte denne teknik. Derved kan man lade en film afspille i hvilken som helst form man kan tænke sig, eller man kan lade alle billeder på ens side blive beskåret ens så der er endnu en måde at lave et custom design på.
Subscribe