1. 程式人生 > >Windows Phone開發(32):路徑之PathGeometry

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是圓弧的大小……其實這些屬性不必要一個個介紹,大家有興趣自己玩一下就知道了,下面給出一個例子。

[html] view plaincopyprint?
  1. <Grid>
  2.     <PathHorizontalAlignment="Stretch"
  3.           VerticalAlignment="Stretch"
  4.           Stroke=
    "{StaticResource grBrush}"
  5.           StrokeThickness="12">
  6.         <Path.Data>
  7.             <PathGeometry>
  8.                 <PathFigureStartPoint="325,190">
  9.                     <ArcSegmentIsLargeArc="True"Point="365,410"Size="100,200"/>
  10.                 </PathFigure>
  11.             </PathGeometry>
  12.         </Path.Data>
  13.     </Path>
  14. </Grid>

執行效果


 

 二、三次貝塞爾曲線

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

[html] view plaincopyprint?
  1. <Grid>
  2.     <PathHorizontalAlignment="Stretch"VerticalAlignment="Stretch"StrokeThickness="8"Stroke="{StaticResource grBrush}">
  3.         <Path.Data>
  4.             <PathGeometry>
  5.                 <PathFigureStartPoint="28,17">
  6.                     <BezierSegmentPoint1="250,25"Point2="-100,245"Point3="300,450"/>
  7.                 </PathFigure>
  8.             </PathGeometry>
  9.         </Path.Data>
  10.     </Path>
  11. </Grid>


 執行效果如下圖所示。

三、兩點一線LineSegment

這個就更簡單了。

[html] view plaincopyprint?
  1. <Grid>
  2.     <PathHorizontalAlignment="Stretch"VerticalAlignment="Stretch"Stroke="{StaticResource grBrush}"StrokeThickness="8">
  3.         <Path.Data>
  4.             <PathGeometry>
  5.                 <PathFigureStartPoint="15,35">
  6.                     <LineSegmentPoint="120,245"/>
  7.                     <LineSegmentPoint="370,385"/>
  8.                 </PathFigure>
  9.             </PathGeometry>
  10.         </Path.Data>
  11.     </Path>
  12. </Grid>


執行效果如下圖所示:

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

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

[html] view plaincopyprint?
  1. <Grid>
  2.     <PathHorizontalAlignment="Stretch"VerticalAlignment="Stretch"StrokeThickness="8"Stroke="{StaticResource grBrush}">
  3.         <Path.Data>
  4.             <PathGeometry>
  5.                 <PathFigureStartPoint="250,38">
  6.                     <PolyBezierSegment>
  7.                         <PolyBezierSegment.Points>
  8.                             <PointX="16"Y="75"/>
  9.                             <PointX="300"Y="100"/>
  10.                             <PointX="92"Y="134"/>
  11.                             <PointX="45"Y="200"/>
  12.                             <PointX="23"Y="280"/>
  13.                             <PointX="358"Y="460"/>
  14.                         </PolyBezierSegment.Points>
  15.                     </PolyBezierSegment>
  16.                 </PathFigure>
  17.             </PathGeometry>
  18.         </Path.Data>
  19.     </Path>
  20. </Grid>


執行效果如圖所示。

五、多線段集合PolyLineSegment

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

[html] view plaincopyprint?
  1. <Grid>
  2.     <PathHorizontalAlignment="Stretch"VerticalAlignment="Stretch"StrokeThickness="8"Stroke="{StaticResource grBrush}">
  3.         <Path.Data>
  4.             <PathGeometry>
  5.                 <PathFigureStartPoint="111,32">
  6.                     <LineSegmentPoint="79,133"/>
  7.                     <LineSegmentPoint="122,298"/>
  8.                     <LineSegmentPoint="365,277"/>
  9.                     <LineSegmentPoint="22,399"/>
  10.                     <LineSegmentPoint="380,458"/>
  11.                 </PathFigure>
  12.             </PathGeometry>
  13.         </Path.Data>
  14.     </Path>
  15. </Grid>


執行效果如下圖所示。

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

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

[html] view plaincopyprint?
  1. <Grid>
  2.     <PathVerticalAlignment="Stretch"HorizontalAlignment="Stretch"StrokeThickness="8"Stroke="{StaticResource grBrush}">
  3.         <Path.Data>
  4.             <PathGeometry>
  5.                 <PathFigureStartPoint="20,25">
  6.                     <PolyQuadraticBezierSegmentPoints="96,111 137,60 220,250 330,420"/>
  7.                 </PathFigure>
  8.             </PathGeometry>
  9.         </Path.Data>
  10.     </Path>
  11. </Grid>


執行效果如下圖所示。

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

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

[html] view plaincopyprint?
  1. <Grid>
  2.     <PathHorizontalAlignment="Stretch"VerticalAlignment="Stretch"StrokeThickness="8"Stroke="{StaticResource grBrush}">
  3.         <Path.Data>
  4.             <PathGeometry>
  5.                 <PathFigureStartPoint="200,25">
  6.                     <QuadraticBezierSegmentPoint1="10,300"Point2="385,435"/>
  7.                 </PathFigure>
  8.             </PathGeometry>
  9.         </Path.Data>
  10.     </Path>
  11. </Grid>

執行效果如下圖所示。