大可山 [MSN:a3news(AT)hotmail.com] http://www.zpxp.com 蘿蔔鼠線上圖形影象處理--------------------------------------------------------------老規矩，看圖說話。

先看顯示效果：（圖1）XAML(程式碼A)：<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >  <Canvas><!--這是使用PathFigureCollection

WPF提供兩個類來描述路徑資料：一個是StreamGeometry，另一個是PathFigureCollection。類似：<Path Stroke="Black" Data="M 100,240 C 510,300 80,100 300,160 H40 v80" />的形式是StreamGeometry的XAML程式碼表示形式，也是最簡潔的表示形式。而類似：<Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">  <Path.Data>    <PathGeometry Figures="M 10,100 C 10,300 300,-160 300,100

這兩種方式都可以達至同一種顯示效果，那麼，什麼時候使用StreamGeometry，什麼時候使用PathFigureCollection方式呢？一般地，當你建立路徑後，不再需要修改時，可使用StreamGeometry方式，如果還需要對路徑數值進行修改，則使用PathFigureCollection方式（這裡就是PathGeometry）。

Data屬性的表示語法：(1)StreamGeometry方式： [填充規則] 外形描述[外形描述]*(2)PathFigureCollection方式： 外形描述[外形描述]*注：(1)上面語法中，[...]表示可選，*代表任意個。(2)“填充規則”中，有EvenOdd和Nonzero兩種。XAML中為了簡潔，使用“F0”表示EvenOdd，“F1”表示Nonzero。(3)“外形描述”的語法：moveCommand drawCommands [closeCommand]其中：移動指令（moveCommand），繪製指令（drawCommands），關閉指令（closeCommand）。(4)moveCommand指定起始點，使用一個drawingCommand描述外形輪廓的內容描述，closeCommand用來關閉路徑。如下圖：

（圖2）下面來解釋一下“M 100,240 C510,300 80,100 300,160 H40 v80”這樣字串的意義。分為四種情況來解釋：1. 移動指令：Move Command（M）：M 起始點  或者：m 起始點比如：M 100,240或m 100,240使用大寫M時，表示絕對值; 使用小寫m時; 表示相對於前一點的值，如果前一點沒有指定，則使用(0,0)。

2. 繪製指令(Draw Command):我們可以繪製以下形狀：(1) 直線:Line(L)(2) 水平直線: Horizontal line(H)(3) 垂直直線: Vertical line(V)(4) 三次方程式貝塞爾曲線: Cubic Bezier curve(C)(5) 二次方程式貝塞爾曲線: Quadratic Bezier curve(Q)(6) 平滑三次方程式貝塞爾曲線: Smooth cubic Bezier curve(S)(7) 平滑二次方程式貝塞爾曲線: smooth quadratic Bezier curve(T)(8) 橢圓圓弧: elliptical Arc(A) 上面每種形狀後用括號括起的英文字母為命令簡寫的大寫形式，但你也可以使用小寫。使用大寫與小寫的區別是：大寫是絕對值，小寫是相對值。比如：L 100, 200 L 300,400表示從絕對座標點(100,200)到另一絕對座標點(300,400)的一條直線。而l 100, 200 l 300,400則表示相對上一點（如果未指定，則預設為(0,0)座標點）開始計算的座標點(100,200)到座標點為(300,400)的一條直線。當我們重複使用同一種類型時，就可以省略前面的命令。比如：L 100, 200 L 300,400簡寫為：L 100, 200 300,400。

下圖是以下XAML程式碼的繪製效果（為了方便你比較，我加了背景格子，每小格為10畫素）：XAML（程式碼B）：<Path Stroke="Black" StrokeThickness="1" Data="M 10,100 L 100,100 100,50 Z M 10,10 100,10 100,40 Z" />（圖3）

細心的讀者可能會發現，有點怪怪的感覺，因為我故意將下面的三角形的程式碼放在前面了，這樣，似乎不太符合習慣。事實上，上面的程式碼與這個結果完全一樣：<Path Stroke="Black" StrokeThickness="1" Data="M 10,10 100,10 100,40 Z M 10,100 L 100,100 100,50 Z" />這裡有一個你暫時還沒見過的Z指令，它就是一個關閉指令（close Command），表示封閉指定形狀，即將首尾點連線起來形成封閉的區域。

繪製指令格式語法:

(1) 直線:Line(L)格式：L 結束點座標 或: l 結束點座標。比如：L 100,100 或 l 100 100。座標值可以使用x,y（中間用英文逗號隔開）或x y（中間用半形空格隔開）的形式。

(2) 水平直線  Horizontal line(H)：繪製從當前點到指定x座標的直線。格式：H x值 或 h x值(x為System.Double型別的值)比如：H 100或h 100，也可以是：H 100.00或h 100.00等形式。

(3) 垂直直線 Vertical line(V)：繪製從當前點到指定y座標的直線。格式：V y值 或 v y值(y為System.Double型別的值)比如：V 100或y 100，也可以是：V 100.00或v 100.00等形式。

(4) 三次方程式貝塞爾曲線 Cubic Bezier curve(C)：通過指定兩個控制點來繪製由當前點到指定結束點間的三次方程貝塞爾曲線。格式：C 第一控制點 第二控制點 結束點 或 c 第一控制點 第二控制點 結束點比如：C 100,200 200,400 300,200 或 c 100,200 200,400 300,200其中，點(100,200)為第一控制點，點(200,400)為第二控制點，點(300,200)為結束點。

(5) 二次方程式貝塞爾曲線 Quadratic Bezier curve(Q)：通過指定的一個控制點來繪製由當前點到指定結束點間的二次方程貝塞爾曲線。格式：Q 控制點 結束點 或 q 控制點 結束點比如：q 100,200 300,200。其中，點(100,200)為控制點，點(300,200)為結束點。

(6) 平滑三次方程式貝塞爾曲線: Smooth cubic Bezier curve(S)：通過一個指定點來“平滑地”控制當前點到指定點的貝塞爾曲線。格式：S 控制點 結束點 或 s 控制點 結束點比如：S 100,200 200,300

(7) 平滑二次方程式貝塞爾曲線 smooth quadratic Bezier curve(T)：與平滑三次方程貝塞爾曲線類似。格式：T 控制點 結束點 或 t 控制點 結束點比如：T 100,200 200,300關於第(6)種平滑三次方程式貝塞爾曲線與第(7)種平滑二次方程式貝塞爾曲線的比較：如下圖：XAML程式碼：<!-- 這是左邊平滑三次方程式貝塞爾曲線的程式碼 --><Path Stroke="Black" StrokeThickness="1"  Data="M 150,10 S 250,100 80,280" /><!--這是關鍵點的連線示意--><Path Stroke="Black" StrokeThickness="1"  Data="M 150,10 L 250,100 80,280" /><!-- 這是右邊平滑二次方程式貝塞爾曲線的程式碼 --><Path Stroke="Red" StrokeThickness="2" StrokeDashArray="1,1,1"   Data="M 150,10 T 250,100 80,280" />備註：為了方便比較，我使用了同一個控制點，座標均為：(250,100)，起始和結束點也一樣。另外，我使用了虛線（用了StrokeDashArray屬性）及不同顏色以示區分。(8) 橢圓圓弧: elliptical Arc(A) : 在當前點與指定結束點間繪製圓弧。A 尺寸 圓弧旋轉角度值 優勢弧的標記 正負角度標記 結束點或：a 尺寸 圓弧旋轉角度值 優勢弧的標記 正負角度標記 結束點尺寸(Size): System.Windows.Size型別，指定橢圓圓弧X,Y方向上的半徑值。旋轉角度（rotationAngle）：System.Double型別。圓弧旋轉角度值（rotationAngle）：橢圓弧的旋轉角度值。 優勢弧的標記（isLargeArcFlag）：是否為優勢弧，如果弧的角度大於等於180度，則設為1，否則為0。 正負角度標記（sweepDirectionFlag）：當正角方向繪製時設為1，否則為0。 結束點（endPoint）：System.Windows.Point型別。

3. 關閉指令(close Command):用以將圖形的首、尾點用直線連線，以形成一個封閉的區域。用Z或z表示。

如果你對SVG有所瞭解，你會發現它們是驚人的相似。

小結一下：本篇講述了在WPF中，圖形路徑的XAML程式碼表達方式。