Windows Phone開發(fā)(32):路徑之PathGeometry
說起路徑這玩意兒,其實說的就是Path類,它藏在命名空間 System.Windows.Shapes下,應(yīng)該好找,它有一個很重要的屬性Data,你不妨在“對象瀏覽器”中把它抓出來看看,該屬性為 System.Windows.Media.Geometry類型,如果大家再查看一下,這個Geometry類是一個抽象類,就是因為它太抽象了,所以 不能被實例化。
然后,我們看看它有哪些派生類?
1、EllipseGeometry:好理解吧,一個幾何圖形,啥形狀的?圓 or 橢圓。
2、LineGeometry:這個家伙直來直去的,你更明白了,一條線的幾何圖形,兩點一線啊。
3、RectangleGeometry:這個也好說,二維矩形。
4、PathGeometry:這個東東就有些個復(fù)雜了,它可以由弧線,曲線、直線、橢圓、矩形等組成的復(fù)雜路徑。
5、GeometryGroup:如果上述幾何圖形滿足不了你貪婪的需求的話,不妨試試這個,它可以把上述的各種幾何圖形組合成一個幾何圖形。
平常人們總喜歡從易到難地去說明問題,那么今天我們何不反過來試試,從難到易地去學(xué)習(xí),如何?
在以上所列之圖形中,當(dāng)數(shù)PathGeometry最復(fù)雜,我們就拿它開刀,好不?只要把它干倒了,其實的就好學(xué)了。
首先,我們來看一看PathGeometry的結(jié)構(gòu)再說吧。它包含一個Figures 集合,而集合中每個元素都是一個PathFigure對象。然后,再往下拆,PathFigure類也有個集合屬性Segments,該集合中的每個元素 為PathSegment對象,但我們從“對象瀏覽器”中看到,PathSegment是一個抽象類,所以我們要繼續(xù)往下找到它的派生類。
PathSegment類的派生如下圖所示:
接下來,我們逐個演示一個它們的用法吧。
一、ArcSegment畫弧線
該類表示一個圓,IsLargeArc屬性指示圓弧是否大于180度,Point是圓弧的終點,Size是圓弧的大小……其實這些屬性不必要一個個介紹,大家有興趣自己玩一下就知道了,下面給出一個例子。
- <Grid>
- <Path HorizontalAlignment="Stretch"
- VerticalAlignment="Stretch"
- Stroke="{StaticResource grBrush}"
- StrokeThickness="12">
- <Path.Data>
- <PathGeometry>
- <PathFigure StartPoint="325,190">
- <ArcSegment IsLargeArc="True" Point="365,410" Size="100,200" />
- </PathFigure>
- </PathGeometry>
- </Path.Data>
- </Path>
- </Grid>
運行效果
二、三次貝塞爾曲線
BezierSegment類具有兩個控制點和一個終點,如下面例子:
- <Grid>
- <Path HorizontalAlignment="Stretch" VerticalAlignment="Stretch" StrokeThickness="8" Stroke="{StaticResource grBrush}">
- <Path.Data>
- <PathGeometry>
- <PathFigure StartPoint="28,17">
- <BezierSegment Point1="250,25" Point2="-100,245" Point3="300,450"/>
- </PathFigure>
- </PathGeometry>
- </Path.Data>
- </Path>
- </Grid>
運行效果如下圖所示。
三、兩點一線LineSegment
這個就更簡單了。
- <Grid>
- <Path HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stroke="{StaticResource grBrush}" StrokeThickness="8">
- <Path.Data>
- <PathGeometry>
- <PathFigure StartPoint="15,35">
- <LineSegment Point="120,245"/>
- <LineSegment Point="370,385"/>
- </PathFigure>
- </PathGeometry>
- </Path.Data>
- </Path>
- </Grid>
運行效果如下圖所示:
四、更復(fù)雜的三次貝賽爾曲線PolyBezierSegment
這個家伙與前面說的三次貝賽爾曲線相似,但可以定義一條或多條,Points集合中每三個點確定一段貝賽爾曲線。
- <Grid>
- <Path HorizontalAlignment="Stretch" VerticalAlignment="Stretch" StrokeThickness="8" Stroke="{StaticResource grBrush}">
- <Path.Data>
- <PathGeometry>
- <PathFigure StartPoint="250,38">
- <PolyBezierSegment>
- <PolyBezierSegment.Points>
- <Point X="16" Y="75"/>
- <Point X="300" Y="100"/>
- <Point X="92" Y="134"/>
- <Point X="45" Y="200"/>
- <Point X="23" Y="280"/>
- <Point X="358" Y="460"/>
- </PolyBezierSegment.Points>
- </PolyBezierSegment>
- </PathFigure>
- </PathGeometry>
- </Path.Data>
- </Path>
- </Grid>
運行效果如圖所示。
五、多線段集合PolyLineSegment
與前面所說的線不同的是,它可以包含多條線。
- <Grid>
- <Path HorizontalAlignment="Stretch" VerticalAlignment="Stretch" StrokeThickness="8" Stroke="{StaticResource grBrush}">
- <Path.Data>
- <PathGeometry>
- <PathFigure StartPoint="111,32">
- <LineSegment Point="79,133"/>
- <LineSegment Point="122,298"/>
- <LineSegment Point="365,277"/>
- <LineSegment Point="22,399"/>
- <LineSegment Point="380,458"/>
- </PathFigure>
- </PathGeometry>
- </Path.Data>
- </Path>
- </Grid>
運行效果如下圖所示。
六、復(fù)合二次貝賽爾曲線PolyQuadraticBezierSegment
該復(fù)合曲線可包含一或N多個二次貝賽爾曲線,由于二次貝賽爾曲線只有一個控制點和終點,故Points是每兩個點決定一條貝賽爾曲線。
- <Grid>
- <Path VerticalAlignment="Stretch" HorizontalAlignment="Stretch" StrokeThickness="8" Stroke="{StaticResource grBrush}">
- <Path.Data>
- <PathGeometry>
- <PathFigure StartPoint="20,25">
- <PolyQuadraticBezierSegment Points="96,111 137,60 220,250 330,420"/>
- </PathFigure>
- </PathGeometry>
- </Path.Data>
- </Path>
- </Grid>
運行效果如下圖所示。
七、兩點決定一條二次貝賽爾曲線QuadraticBezierSegment
這個相信比上面那個好理解。
- <Grid>
- <Path HorizontalAlignment="Stretch" VerticalAlignment="Stretch" StrokeThickness="8" Stroke="{StaticResource grBrush}">
- <Path.Data>
- <PathGeometry>
- <PathFigure StartPoint="200,25">
- <QuadraticBezierSegment Point1="10,300" Point2="385,435"/>
- </PathFigure>
- </PathGeometry>
- </Path.Data>
- </Path>
- </Grid>
運行效果如下圖所示。