Win10系列：C#應用控件進階7

PathGeometry

前面介紹了Path的使用方法，接下來介紹PathGeometry類。PathGeometry提供了描繪由弧線、曲線和直線組成的多個複雜圖形的方法。PathGeometry的核心是PathFigure對象集合，PathFigure自身由一個或多個PathSegment子類對象組成，每一個子類對象均描繪幾何圖形的一個片斷。下面列出了PathFigure對象集合中經常使用的線段類型。

• LineSegment，在兩個點之間建立一條直線。
• BezierSegment，在兩個點之間建立一條三次方貝塞爾曲線，由起點（前一條線段的終點）、終點以及兩個控制點構成。
• ArcSegment，在兩個點之間建立一條橢圓弧線，經過設置Size屬性肯定X軸半徑和Y軸半徑的大小，定義Point屬性能夠設置橢圓弧的終點。只有Size和Point屬性並不能徹底肯定弧線的形狀，ArcSegment 還有SweepDirection和IsLargeArc兩個屬性，分別設置以順時針或逆時針方向繪製弧線和弧線的弧度是否應大於180度。
• PolyLineSegment，經過設置Points屬性能建立一系列直線。
• PolyBezierSegment，經過設置Points屬性能建立一系列三次方貝塞爾曲線。
• QuadraticBezierSegment ，經過設置Point1、Point2屬性能建立一條二次貝塞爾曲線。
• PolyQuadraticBezierSegment，經過設置Points屬性能建立一系列二次貝塞爾曲線。

接下來使用PathGeometry類繪製一個稍微複雜的圖形，PathGeometry並不會自我繪製，須要經過Path類輔助其呈現。下面的示例使用BezierSegment、LineSegment以及ArcSegment 來繪製幾何圖形。在一個打開的Windows應用商店項目中新建一個空白頁，並命名爲PathGeometryPage，雙擊打開此頁面的PathGeometryPage.xaml文件，在Grid元素中添加以下代碼。

<Path Stroke="Blue" StrokeThickness="1" >

<Path.Data>

<PathGeometry>

<PathGeometry.Figures>

<PathFigure StartPoint="0,100">

<PathFigure.Segments>

<BezierSegment Point1="100,200" Point2="200,100" Point3="300,0"/>

<LineSegment Point="400,100" />

<ArcSegment Size="100,100" IsLargeArc="True" SweepDirection="Clockwise" Point="300,100"/>

</PathFigure.Segments>

</PathFigure>

</PathGeometry.Figures>

</PathGeometry>

</Path.Data>

</Path>

上面的代碼首先定義一個Path控件並設置Stroke屬性爲藍色（Blue）、StrokeThickness屬性爲1。接着在Path.Data中添加一個PathGeometry，並向PathGeometry.Figures中定義PathFigure對象集合，設置它的StartPoint屬性爲（0，100）。經過給BezierSegment定義三個點來建立一個三次方貝塞爾曲線，這三個點是終點及兩個控制點。三次方貝塞爾曲線的兩個控制點的做用像磁鐵同樣，朝着自身的方向吸引本應爲直線的部分，從而造成一條曲線。第一個控制點影響曲線的開始部分，第二個控制點影響曲線的結束部分。緊接着添加一個LineSegment，這個線段從BezierSegment的終點繪製到由LineSegment類的Point屬性所指定的點（400，100）。再定義一個ArcSegment，並用Size屬性設置此曲線的X軸半徑和Y軸半徑都爲100，使用Point屬性指定終點爲（300，100），最後定義ArcSegment的SweepDirection和IsLargeArc屬性分別爲Clockwise、True，以便使圓弧順時針繪製而且弧度大於180度。

運行此頁面，PathGeometry繪製複雜圖形的運行效果如圖8-8所示。

圖8-8 PathGeometry繪製的圖形

接下來使用後臺代碼繪製一個與前臺同樣的幾何圖形，具體代碼以下所示：

public PathGeometryPage()

{

this.InitializeComponent();

//實例化Path對象

Windows.UI.Xaml.Shapes.Path mypath = new Windows.UI.Xaml.Shapes.Path();

mypath.Stroke = new SolidColorBrush(Colors.Blue);

mypath.StrokeThickness = 1;

//實例化PathFigure對象以容納多個Segment

PathFigure pathFigure = new PathFigure();

//設置起始點

pathFigure.StartPoint = new Point(0, 100);

//建立一條三次方貝塞爾曲線 ，前兩個是控制點，最後一個是終點

BezierSegment bezierSegment = new BezierSegment();

bezierSegment.Point1 = new Point(100, 200);

bezierSegment.Point2 = new Point(200, 100);

bezierSegment.Point3 = new Point(300, 0);

//實例化LineSegment類的對象

LineSegment lineSegment = new LineSegment();

lineSegment.Point = new Point(400, 100);

//建立一條橢圓弧線

ArcSegment arcSegment = new ArcSegment();

arcSegment.Size = new Size(100, 100);

arcSegment.RotationAngle = 45;

arcSegment.IsLargeArc = true;

arcSegment.Point = new Point(300, 100);

/*枚舉類型可選值有Clockwise(順時針)與Counterclockwise（逆時針），

用於指定畫弧時的順時針或逆時針方向*/

arcSegment.SweepDirection = SweepDirection.Clockwise;

pathFigure.Segments.Add(bezierSegment);

pathFigure.Segments.Add(lineSegment);

pathFigure.Segments.Add(arcSegment);

//實例化Geometry對象

PathGeometry pathGeometry = new PathGeometry();

pathGeometry.Figures.Add(pathFigure);

//爲Path.Data屬性賦值

mypath.Data = pathGeometry;

MyShow.Children.Add(mypath);

}

值得注意的是，對於命名空間Windows.UI.XAML.Shapes.Path與System.IO.Path產生衝突的狀況，解決辦法是在類前面加上命名空間，如Windows.UI.Xaml.Shapes.Path mypath = new Windows.UI.Xaml.Shapes.Path()。

前面介紹了繪製路徑幾何圖形的基本原理，掌握了這些知識將會對之後的開發工做帶來幫助。在實際的繪製圖形的過程當中，爲了提高開發效率，讀者能夠根據自身的需求選擇使用Blend for Visual studio開發工具，有關這個開發工具的知識能夠查看相關書籍進行學習。