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?- <Grid>
- <PathHorizontalAlignment="Stretch"
- VerticalAlignment="Stretch"
- Stroke=
- StrokeThickness="12">
- <Path.Data>
- <PathGeometry>
- <PathFigureStartPoint="325,190">
- <ArcSegmentIsLargeArc="True"Point="365,410"Size="100,200"/>
- </PathFigure>
- </PathGeometry>
- </Path.Data>
- </Path>
- </Grid>
執行效果
二、三次貝塞爾曲線
BezierSegment類具有兩個控制點和一個終點,如下面例子:
[html] view plaincopyprint?- <Grid>
- <PathHorizontalAlignment="Stretch"VerticalAlignment="Stretch"StrokeThickness="8"Stroke="{StaticResource grBrush}">
- <Path.Data>
- <PathGeometry>
- <PathFigureStartPoint="28,17">
- <BezierSegmentPoint1="250,25"Point2="-100,245"Point3="300,450"/>
- </PathFigure>
- </PathGeometry>
- </Path.Data>
- </Path>
- </Grid>
執行效果如下圖所示。
三、兩點一線LineSegment
這個就更簡單了。
[html] view plaincopyprint?- <Grid>
- <PathHorizontalAlignment="Stretch"VerticalAlignment="Stretch"Stroke="{StaticResource grBrush}"StrokeThickness="8">
- <Path.Data>
- <PathGeometry>
- <PathFigureStartPoint="15,35">
- <LineSegmentPoint="120,245"/>
- <LineSegmentPoint="370,385"/>
- </PathFigure>
- </PathGeometry>
- </Path.Data>
- </Path>
- </Grid>
執行效果如下圖所示:
四、更復雜的三次貝賽爾曲線PolyBezierSegment
這個傢伙與前面說的三次貝賽爾曲線相似,但可以定義一條或多條,Points集合中每三個點確定一段貝賽爾曲線。
[html] view plaincopyprint?- <Grid>
- <PathHorizontalAlignment="Stretch"VerticalAlignment="Stretch"StrokeThickness="8"Stroke="{StaticResource grBrush}">
- <Path.Data>
- <PathGeometry>
- <PathFigureStartPoint="250,38">
- <PolyBezierSegment>
- <PolyBezierSegment.Points>
- <PointX="16"Y="75"/>
- <PointX="300"Y="100"/>
- <PointX="92"Y="134"/>
- <PointX="45"Y="200"/>
- <PointX="23"Y="280"/>
- <PointX="358"Y="460"/>
- </PolyBezierSegment.Points>
- </PolyBezierSegment>
- </PathFigure>
- </PathGeometry>
- </Path.Data>
- </Path>
- </Grid>
執行效果如圖所示。
五、多線段集合PolyLineSegment
與前面所說的線不同的是,它可以包含多條線。
[html] view plaincopyprint?- <Grid>
- <PathHorizontalAlignment="Stretch"VerticalAlignment="Stretch"StrokeThickness="8"Stroke="{StaticResource grBrush}">
- <Path.Data>
- <PathGeometry>
- <PathFigureStartPoint="111,32">
- <LineSegmentPoint="79,133"/>
- <LineSegmentPoint="122,298"/>
- <LineSegmentPoint="365,277"/>
- <LineSegmentPoint="22,399"/>
- <LineSegmentPoint="380,458"/>
- </PathFigure>
- </PathGeometry>
- </Path.Data>
- </Path>
- </Grid>
執行效果如下圖所示。
六、複合二次貝賽爾曲線PolyQuadraticBezierSegment
該複合曲線可包含一或N多個二次貝賽爾曲線,由於二次貝賽爾曲線只有一個控制點和終點,故Points是每兩個點決定一條貝賽爾曲線。
[html] view plaincopyprint?- <Grid>
- <PathVerticalAlignment="Stretch"HorizontalAlignment="Stretch"StrokeThickness="8"Stroke="{StaticResource grBrush}">
- <Path.Data>
- <PathGeometry>
- <PathFigureStartPoint="20,25">
- <PolyQuadraticBezierSegmentPoints="96,111 137,60 220,250 330,420"/>
- </PathFigure>
- </PathGeometry>
- </Path.Data>
- </Path>
- </Grid>
執行效果如下圖所示。
七、兩點決定一條二次貝賽爾曲線QuadraticBezierSegment
這個相信比上面那個好理解。
[html] view plaincopyprint?- <Grid>
- <PathHorizontalAlignment="Stretch"VerticalAlignment="Stretch"StrokeThickness="8"Stroke="{StaticResource grBrush}">
- <Path.Data>
- <PathGeometry>
- <PathFigureStartPoint="200,25">
- <QuadraticBezierSegmentPoint1="10,300"Point2="385,435"/>
- </PathFigure>
- </PathGeometry>
- </Path.Data>
- </Path>
- </Grid>
執行效果如下圖所示。