1. 程式人生 > >Win10系列:C#應用控制元件進階6

Win10系列:C#應用控制元件進階6

路徑

路徑(Path)可以用來定義任意形狀的曲線和幾何圖形,當然這種任意性也帶來了複雜性。為了方便的繪製幾何圖形,微軟在Visual Studio 2012安裝包中為程式開發者提供了免費的Blend for Visual Studio設計工具,利用這個介面設計工具可以方便的繪製圖形。

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

8.2.1 Path

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

  • 移動命令,指定新圖形的起點StartPoint,用字母Mm表示,大寫的M表示起始點的絕對值,小寫的m表示起始點相對於前一個點的偏移量。在Data屬性中可以同時存在兩個Mm命令。
  • 繪製命令,它是一個指令集合,用於描述幾何圖形的形狀,例如直線、水平線和三次方貝塞爾曲線命令,將在下面對常用的繪製命令進行介紹。
  • 關閉命令,該指令的作用是結束當前繪製圖形的操作,並繪製一條連線起始點和結束點的線,使用字母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",其中點(20100)表示第一個控制點,點(40250)表示第二個控制點,最後一個點(200175)表示結束點。