|
大可山 [MSN:a3news(AT)hotmail.com]
http://www. 蘿卜鼠在線圖形圖像處理
--------------------------------------------------------------
老規矩，看圖說話。 先看顯示效果：
（圖1）
XAML(代碼A)：
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<Canvas>
<!--這是使用PathFigureCollection的表示方法-->
<Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
<Path.Data>
<PathGeometry Figures="M 10,100 C 10,300 300,-160 300,100" />
</Path.Data>
</Path>
<!--這是使用StreamGeometry的表示方法-->
<Path Stroke="Black" Data="M 100,240 C 510,300 80,100 300,160 H40 v80" />
</Canvas>
</Page>
請留意上面加粗及紅色文字部分。 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" />
</Path.Data>
</Path>
這樣的方式是使用PathFigureCollection的XAML代碼表示方式。 這兩種方式都可以達至同一種顯示效果，那么，什么時候使用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有所了解，你會發現它們是驚人的相似。
|
