Windows Phone開(kāi)發(fā)(32):路徑之PathGeometry
說(shuō)起路徑這玩意兒,其實(shí)說(shuō)的就是Path類,它藏在命名空間 System.Windows.Shapes下,應(yīng)該好找,它有一個(gè)很重要的屬性Data,你不妨在“對(duì)象瀏覽器”中把它抓出來(lái)看看,該屬性為 System.Windows.Media.Geometry類型,如果大家再查看一下,這個(gè)Geometry類是一個(gè)抽象類,就是因?yàn)樗橄罅耍?不能被實(shí)例化。
然后,我們看看它有哪些派生類?
1、EllipseGeometry:好理解吧,一個(gè)幾何圖形,啥形狀的?圓 or 橢圓。
2、LineGeometry:這個(gè)家伙直來(lái)直去的,你更明白了,一條線的幾何圖形,兩點(diǎn)一線啊。
3、RectangleGeometry:這個(gè)也好說(shuō),二維矩形。
4、PathGeometry:這個(gè)東東就有些個(gè)復(fù)雜了,它可以由弧線,曲線、直線、橢圓、矩形等組成的復(fù)雜路徑。
5、GeometryGroup:如果上述幾何圖形滿足不了你貪婪的需求的話,不妨試試這個(gè),它可以把上述的各種幾何圖形組合成一個(gè)幾何圖形。
平常人們總喜歡從易到難地去說(shuō)明問(wèn)題,那么今天我們何不反過(guò)來(lái)試試,從難到易地去學(xué)習(xí),如何?
在以上所列之圖形中,當(dāng)數(shù)PathGeometry最復(fù)雜,我們就拿它開(kāi)刀,好不?只要把它干倒了,其實(shí)的就好學(xué)了。
首先,我們來(lái)看一看PathGeometry的結(jié)構(gòu)再說(shuō)吧。它包含一個(gè)Figures 集合,而集合中每個(gè)元素都是一個(gè)PathFigure對(duì)象。然后,再往下拆,PathFigure類也有個(gè)集合屬性Segments,該集合中的每個(gè)元素 為PathSegment對(duì)象,但我們從“對(duì)象瀏覽器”中看到,PathSegment是一個(gè)抽象類,所以我們要繼續(xù)往下找到它的派生類。
PathSegment類的派生如下圖所示:
接下來(lái),我們逐個(gè)演示一個(gè)它們的用法吧。
一、ArcSegment畫(huà)弧線
該類表示一個(gè)圓,IsLargeArc屬性指示圓弧是否大于180度,Point是圓弧的終點(diǎn),Size是圓弧的大小……其實(shí)這些屬性不必要一個(gè)個(gè)介紹,大家有興趣自己玩一下就知道了,下面給出一個(gè)例子。
- <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>
運(yùn)行效果
二、三次貝塞爾曲線
BezierSegment類具有兩個(gè)控制點(diǎn)和一個(gè)終點(diǎn),如下面例子:
- <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>
運(yùn)行效果如下圖所示。
三、兩點(diǎn)一線LineSegment
這個(gè)就更簡(jiǎn)單了。
- <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>
運(yùn)行效果如下圖所示:
四、更復(fù)雜的三次貝賽爾曲線PolyBezierSegment
這個(gè)家伙與前面說(shuō)的三次貝賽爾曲線相似,但可以定義一條或多條,Points集合中每三個(gè)點(diǎn)確定一段貝賽爾曲線。
- <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>
運(yùn)行效果如圖所示。
五、多線段集合PolyLineSegment
與前面所說(shuō)的線不同的是,它可以包含多條線。
- <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>
運(yùn)行效果如下圖所示。
六、復(fù)合二次貝賽爾曲線PolyQuadraticBezierSegment
該復(fù)合曲線可包含一或N多個(gè)二次貝賽爾曲線,由于二次貝賽爾曲線只有一個(gè)控制點(diǎn)和終點(diǎn),故Points是每?jī)蓚€(gè)點(diǎn)決定一條貝賽爾曲線。
- <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>
運(yùn)行效果如下圖所示。
七、兩點(diǎn)決定一條二次貝賽爾曲線QuadraticBezierSegment
這個(gè)相信比上面那個(gè)好理解。
- <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>
運(yùn)行效果如下圖所示。