WPF中圖形表示語法詳解(Path之Data屬性語法)

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之家:http://www.wpf123.com
 
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用來關閉路徑。

如下圖:
 wpf之家:http://www.wpf123.com


(圖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)
 wpf之家:http://www.wpf123.com


細心的讀者可能會發現,有點怪怪的感覺,因爲我故意將下面的三角形的代碼放在前面了,這樣,似乎不太符合習慣。事實上,上面的代碼與這個結果完全一樣:
<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屬性)及不同顏色以示區分。

wpf之家:http://www.wpf123.com

 

(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代碼表達方式。


wpf之家:http://www.wpf123.com

發佈了37 篇原創文章 · 獲贊 4 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章