Windows Phone開發（32）：路徑之PathGeometry

說起路徑這玩意兒，其實說的就是Path類，它藏在命名空間System.Windows.Shapes下，應該好找，它有一個很重要的屬性Data，你不妨在“物件瀏覽器”中把它抓出來看看，該屬性為System.Windows.Media.Geometry類型，如果大家再查看一下，這個Geometry類是一個抽象類別，就是因為它太抽象了，所以不能被執行個體化。

然後，我們看看它有哪些衍生類別？

1、EllipseGeometry：好理解吧，一個幾何圖形，啥形狀的？圓 or 橢圓。

2、LineGeometry：這個傢伙直來直去的，你更明白了，一條線的幾何圖形，兩點一線啊。

3、RectangleGeometry：這個也好說，二維矩形。

4、PathGeometry：這個東東就有些個複雜了，它可以由弧線，曲線、直線、橢圓、矩形等組成的複雜路徑。

 5、GeometryGroup：如果上述幾何圖形滿足不了你貪婪的需求的話，不妨試試這個，它可以把上述的各種幾何圖形組合成一個幾何圖形。

 

平常人們總喜歡從易到難地去說明問題，那麼今天我們何不反過來試試，從難到易地去學習，如何？

在以上所列之圖形中，當數PathGeometry最複雜，我們就拿它開刀，好不？只要把它幹倒了，其實的就好學了。

首先，我們來看一看PathGeometry的結構再說吧。它包含一個Figures集合，而集合中每個元素都是一個PathFigure對象。然後，再往下拆，PathFigure類也有個集合屬性Segments，該集合中的每個元素為PathSegment對象，但我們從“物件瀏覽器”中看到，PathSegment是一個抽象類別，所以我們要繼續往下找到它的衍生類別。

PathSegment類的派生如所示：

接下來，我們逐個示範一個它們的用法吧。

 

一、ArcSegment畫弧線

 該類表示一個圓，IsLargeArc屬性指示圓弧是否大於180度，Point是圓弧的終點，Size是圓弧的大小……其實這些屬性不必要一個個介紹，大家有興趣自己玩一下就知道了，下面給出一個例子。

<Grid><br /> <Path HorizontalAlignment="Stretch"<br /> VerticalAlignment="Stretch"<br /> Stroke="{StaticResource grBrush}"<br /> StrokeThickness="12"><br /> <Path.Data><br /> <PathGeometry><br /> <PathFigure StartPoint="325,190"><br /> <ArcSegment IsLargeArc="True" Point="365,410" Size="100,200" /><br /> </PathFigure><br /> </PathGeometry><br /> </Path.Data><br /> </Path><br /> </Grid><br />

 

運行效果

 

 

 二、三次貝茲路徑

BezierSegment類具有兩個控制點和一個終點，如下面例子：

<Grid><br /> <Path HorizontalAlignment="Stretch" VerticalAlignment="Stretch" StrokeThickness="8" Stroke="{StaticResource grBrush}"><br /> <Path.Data><br /> <PathGeometry><br /> <PathFigure StartPoint="28,17"><br /> <BezierSegment Point1="250,25" Point2="-100,245" Point3="300,450"/><br /> </PathFigure><br /> </PathGeometry><br /> </Path.Data><br /> </Path><br /> </Grid><br />

 運行效果如所示。

 

 

三、兩點一線LineSegment

這個就更簡單了。

<Grid><br /> <Path HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stroke="{StaticResource grBrush}" StrokeThickness="8"><br /> <Path.Data><br /> <PathGeometry><br /> <PathFigure StartPoint="15,35"><br /> <LineSegment Point="120,245"/><br /> <LineSegment Point="370,385"/><br /> </PathFigure><br /> </PathGeometry><br /> </Path.Data><br /> </Path><br /> </Grid><br />

運行效果如所示：

 

 

四、更複雜的三次貝賽爾曲線PolyBezierSegment

這個傢伙與前面說的三次貝賽爾曲線相似，但可以定義一條或多條，Points集合中每三個點確定一段貝賽爾曲線。

<Grid><br /> <Path HorizontalAlignment="Stretch" VerticalAlignment="Stretch" StrokeThickness="8" Stroke="{StaticResource grBrush}"><br /> <Path.Data><br /> <PathGeometry><br /> <PathFigure StartPoint="250,38"><br /> <PolyBezierSegment><br /> <PolyBezierSegment.Points><br /> <Point X="16" Y="75"/><br /> <Point X="300" Y="100"/><br /> <Point X="92" Y="134"/><br /> <Point X="45" Y="200"/><br /> <Point X="23" Y="280"/><br /> <Point X="358" Y="460"/><br /> </PolyBezierSegment.Points><br /> </PolyBezierSegment><br /> </PathFigure><br /> </PathGeometry><br /> </Path.Data><br /> </Path><br /> </Grid><br />

運行效果。

 

 

五、多線段集合PolyLineSegment

與前面所說的線不同的是，它可以包含多條線。

<Grid><br /> <Path HorizontalAlignment="Stretch" VerticalAlignment="Stretch" StrokeThickness="8" Stroke="{StaticResource grBrush}"><br /> <Path.Data><br /> <PathGeometry><br /> <PathFigure StartPoint="111,32"><br /> <LineSegment Point="79,133"/><br /> <LineSegment Point="122,298"/><br /> <LineSegment Point="365,277"/><br /> <LineSegment Point="22,399"/><br /> <LineSegment Point="380,458"/><br /> </PathFigure><br /> </PathGeometry><br /> </Path.Data><br /> </Path><br /> </Grid><br />

運行效果如所示。

 

 

 

六、複合二次貝賽爾曲線PolyQuadraticBezierSegment

該複合曲線可包含一或N多個二次貝賽爾曲線，由於二次貝賽爾曲線只有一個控制點和終點，故Points是每兩個點決定一條貝賽爾曲線。

<Grid><br /> <Path VerticalAlignment="Stretch" HorizontalAlignment="Stretch" StrokeThickness="8" Stroke="{StaticResource grBrush}"><br /> <Path.Data><br /> <PathGeometry><br /> <PathFigure StartPoint="20,25"><br /> <PolyQuadraticBezierSegment Points="96,111 137,60 220,250 330,420"/><br /> </PathFigure><br /> </PathGeometry><br /> </Path.Data><br /> </Path><br /> </Grid><br />

運行效果如所示。

 

 

 

七、兩點決定一條二次貝賽爾曲線QuadraticBezierSegment

這個相信比上面那個好理解。

<Grid><br /> <Path HorizontalAlignment="Stretch" VerticalAlignment="Stretch" StrokeThickness="8" Stroke="{StaticResource grBrush}"><br /> <Path.Data><br /> <PathGeometry><br /> <PathFigure StartPoint="200,25"><br /> <QuadraticBezierSegment Point1="10,300" Point2="385,435"/><br /> </PathFigure><br /> </PathGeometry><br /> </Path.Data><br /> </Path><br /> </Grid><br />

運行效果如所示。