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

路徑

路徑（Path）能夠用來定義任意形狀的曲線和幾何圖形，固然這種任意性也帶來了複雜性。爲了方便的繪製幾何圖形，微軟在Visual Studio 2012安裝包中爲程序開發者提供了免費的Blend for Visual Studio設計工具，利用這個界面設計工具能夠方便的繪製圖形。

而對於開發者而言，有必要掌握的是如何經過編寫代碼的方式實現應用界面的開發，並能夠輕鬆地閱讀這些已經繪製好的圖形代碼。本節將介紹有關路徑繪圖的相關知識，幫助讀者理解Path與PathGeometry的繪圖原理。

8.2.1 Path

Path使用一種緊湊的字符串語法來描述幾何形狀的路徑，這種語法能夠稱爲路徑標記語法。經過使用路徑標記語法定義Data屬性能實現幾何圖形的繪製。下面列出了路徑標記語法所支持的經常使用命令，並對這些命令進行簡單的介紹。

• 移動命令，指定新圖形的起點StartPoint，用字母M或m表示，大寫的M表示起始點的絕對值，小寫的m表示起始點相對於前一個點的偏移量。在Data屬性中能夠同時存在兩個M或m命令。
• 繪製命令，它是一個指令集合，用於描述幾何圖形的形狀，例如直線、水平線和三次方貝塞爾曲線命令，將在下面對經常使用的繪製命令進行介紹。
• 關閉命令，該指令的做用是結束當前繪製圖形的操做，並繪製一條鏈接起始點和結束點的線，使用字母Z表示。

下面經過繪製一段曲線來演示如何使用Path，這段曲線由一條貝賽爾曲線和兩條線段組成。在一個打開的Windows應用商店項目中新建一個空白頁，並命名爲PathPage，雙擊打開此頁面的PathPage.xaml文件，在Grid元素中添加以下代碼。

<Path Stroke="DarkGoldenRod" StrokeThickness="3" Data="M 10,10 C 20,100 40,250 200,175 H 280 Z"/>

運行此頁面，效果如圖8-7所示。

圖8-7 path 圖形運行效果圖

在上面的代碼中，首先定義Path的Stroke 屬性爲DarkGoldenRod、StrokeThickness屬性爲3，以便Path能呈現。接着定義Path的Data屬性，這是決定圖形的關鍵部分，使用M命令開始，指定此路徑起點爲（10，10）。

接着使用C命令繪製一段三次方貝塞爾曲線，經過定義四個點來建立一個三次方貝塞爾曲線，這四個點是起點、終點及兩個控制點。其中起點能夠理解爲M命令指定的點或上一個路徑片斷的終點。三次方貝塞爾曲線的兩個控制點的做用像磁鐵同樣，朝着自身的方向吸引本應爲直線的部分，從而造成一條曲線。第一個控制點影響曲線的開始部分，第二個控制點影響曲線的結束部分。本示例的三次方貝塞爾曲線由起點 (10，10)、終點(200，175)以及兩個控制點 (20，100) 、 (40，250) 繪製而成。

接着使用命令H，該命令從點（200，175）水平繪製到X軸座標爲280的點。最後使用命令Z鏈接此路徑的結束點與起始點。

經過上面的示例相信讀者對繪製命令有了一個初步的認識，下面列出幾個經常使用的繪製命令。

• L（直線），表示繪製一條線的命令，例如"L100,100"或"L100 100"。
• H（水平直線），表示在當前點與指定的X軸座標之間繪製一條水平直線，其中當前點能夠理解爲M命令指定的起點或上一個路徑片斷的終點。
• V（豎直直線），表示在當前點與指定的Y軸座標之間繪製一條豎直線。
• C（三次方貝塞爾曲線命令），經過指定兩個控制點來繪製由當前點到指定結束點間的三次方程貝塞爾曲線，例如"C20,100 40,250 200,175"，其中點（20，100）表示第一個控制點，點（40，250）表示第二個控制點，最後一個點（200，175）表示結束點。