瞭解移動和繪製命令 (迷你語言),可用來將路徑幾何圖形指定為 XAML 屬性值。 許多設計和圖形工具都會使用移動和繪製指令,這些工具可以輸出向量圖形或圖形,做為序列化和交換格式。
使用 move 和 draw 指令字串的屬性
XAML 的內部型別轉換器支援移動和繪製命令語法,該轉換器會剖析命令並產生運行時圖形表示。 這種表示基本上是一組已準備好進行呈現的完成向量。 向量本身不會完成簡報細節;您仍然需要在元素上設定其他值。 針對 Path 物件,您也需要 Fill、 Stroke 和其他屬性的值,然後該 Path 必須以某種方式連線到視覺化樹狀結構。 針對 PathIcon 物件,請設定 Foreground 屬性。
Windows 執行階段中有兩個屬性可以使用字串來代表移動和繪製命令: Path.Data 和 PathIcon.Data。 如果您藉由指定 move 和 draw 命令來設定其中一個屬性,您通常會將它設定為 XAML 屬性值,以及該元素的其他必要屬性。 在不涉及細節的情況下,這是這樣的:
<Path x:Name="Arrow" Fill="White" Height="11" Width="9.67"
Data="M4.12,0 L9.67,5.47 L4.12,10.94 L0,10.88 L5.56,5.47 L0,0.06" />
透過移動和繪製命令與使用PathGeometry的比較
針對 Windows 執行階段 XAML,move 和 draw 命令會產生具有單一 PathFigure 物件的 PathGeometry,其屬性值為 Figures。 每個繪製命令都會在該單一 PathFigure 的 Segments 集合中產生 PathSegment 衍生類別,移動命令會變更 StartPoint,而關閉命令的存在會將 IsClosed 設定為 true。 如果您在執行時期檢查 Data 值,則可以將此結構作為物件模型導覽。
基本語法
移動和繪製命令的語法可以總結如下:
- 從可選的填充規則開始。 一般而言,只有在您不想要 EvenOdd 預設值時,才會指定此選項。 (稍後會詳細介紹 EvenOdd 。
- 只指定一個移動指令。
- 指定一個或多個繪製指令。
- 指定關閉命令。 您可以省略關閉命令,但這會導致您的圖形保持開啟狀態(這種情況並不常見)。
此語法的一般規則如下:
- 每個命令都只由一個字母表示。
- 該字母可以是大寫或小寫。 我們將解釋為什麼情況很重要。
- 除了 close 命令之外,每個命令通常後面都跟著一或多個數字。
- 如果命令有多個數字,請以逗號或空格分隔。
[填滿規則]移動指令繪製指令[繪製指令*][關閉指令]
許多繪製指令都使用點,您可以在其中提供 x,y 值。 每當您看到 *points 佔位符時,您都可以假設您為一個點的 x,y 值提供了兩個小數值。
當結果不模棱兩可時,通常可以省略空格。 事實上,如果您使用逗號作為所有數字集(點和大小)的分隔符,則可以省略所有空格。 例如,這種用法是合法的: F1M0,58L2,56L6,60L13,51L15,53L6,64z。 為了更清楚地顯示,通常會在命令之間加入空格。
不要使用逗號作為十進制數字的小數點,因為命令字串是由 XAML 解譯,它不會考慮與 en-us 地區語系設定中不同文化特性相關的數字格式慣例。
語法細節
填滿規則
選用填滿規則有兩個可能的值: F0 或 F1。 ( F 始終為大寫。 F0 是預設值;它會產生 EvenOdd 填滿行為,因此您通常不會指定它。 使用 F1 取得 非零 填滿行為。 這些填滿值會與 FillRule 列舉的值一致。
移動指令
指定新圖形的起點。
| 語法 |
|---|
M
起點 - 或 - m
起點 |
| 術語 | Description |
|---|---|
| 起點 |
點 新圖形的起點。 |
大寫 M 表示 startPoint 是絕對座標;小寫 m 表示 startPoint 是前一個點的偏移,如果沒有前一個點,則表示 (0,0)。
注意 在移動命令之後指定多個點是合法的。 會向這些點繪製一條線,就如同您使用了線指令。 然而,這不是推薦的風格;請改用專用線命令。
繪製指令
繪製指令可以包含數個形狀指令:直線、水平線、垂直線、立方貝塞爾曲線、二次貝塞爾曲線、平滑三次貝塞爾曲線、平滑二次貝塞爾曲線和橢圓弧。
對於所有繪製命令,大小寫很重要。 大寫字母表示絕對座標,小寫字母表示相對於上一個命令的座標。
線段的控制點相對於前一個線段的端點。 依序輸入多個相同類型的指令時,您可以省略重複的指令項目。 例如, L 100,200 300,400 相當於 L 100,200 L 300,400。
命令行
在目前點和指定終點之間建立一條直線。
l 20 30 和 L 20,30 是有效行命令的範例。 定義 LineGeometry 物件的等效物件。
| 語法 |
|---|
L
端點 - 或 - l
端點 |
| 術語 | Description |
|---|---|
| 端點 |
點 線條的終點。 |
水平線指令
在目前點與指定的 x 座標之間建立水平線。
H 90 是有效水平線指令的範例。
| 語法 |
|---|
H
x -或- h
x |
| 術語 | Description |
|---|---|
| x |
Double 線條端點的 x 座標。 |
垂直線指令
在目前點和指定的 y 座標之間建立一條垂直線。
v 90 是有效垂直線指令的範例。
| 語法 |
|---|
V
y -或- v
y |
| 術語 | Description |
|---|---|
| y |
雙 直線端點的 y 座標。 |
Cubic Bezier 曲線指令
使用兩個指定的控制點 (controlPoint1 和 controlPoint2) ,在目前點與指定終點之間建立三次貝塞爾曲線。
C 100,200 200,400 300,200 是有效曲線指令的範例。 定義等同於包含BezierSegment物件的PathGeometry物件。
| 語法 |
|---|
C
controlPoint1controlPoint2endPoint -或- c
controlPoint1controlPoint2endPoint |
| 術語 | Description |
|---|---|
| 控制點1 |
點 曲線的第一個控制點,決定曲線的起始切線。 |
| 控制點2 |
點 曲線的第二個控制點,決定曲線的結束切線。 |
| 端點 |
點 繪製至該點的曲線。 |
二次貝塞爾曲線指令
使用指定的控制點 (controlPoint) 在目前點與指定終點之間建立二次貝塞爾曲線。
q 100,200 300,200 是有效二次貝塞爾曲線指令的範例。 定義具有 QuadraticBezierSegment 的 PathGeometry 對等專案。
| 語法 |
|---|
Q
controlPoint endpoint -或- q
控制點 端點 |
| 術語 | Description |
|---|---|
| 控制點 |
點 曲線的控制點,決定曲線的起點和終點切線。 |
| 端點 |
點 曲線被繪製到的點。 |
平滑三次貝塞爾曲線指令
在目前點與指定終點之間建立立方貝塞爾曲線。 第一個控制點假設為前一個指令的第二個控制點相對於目前點的反射。 如果沒有上一個指令,或上一個指令不是三次貝塞爾曲線指令或平滑三次貝塞爾曲線指令,則假設第一個控制點與目前點重合。 第二個控制點 (曲線結點的控制點) 是由 controlPoint2 指定。 例如, S 100,200 200,300 是有效的平滑三次貝塞爾曲線指令。 此命令會定義具有 BezierSegment 的 PathGeometry 等效項目,其中有前一個曲線區段。
| 語法 |
|---|
S
controlPoint2endPoint -或- s
控制點2 端點 |
| 術語 | Description |
|---|---|
| 控制點2 |
點 曲線的控制點,決定曲線的結束切線。 |
| 端點 |
點 繪製曲線的點。 |
平滑二次貝塞爾曲線指令
在目前點與指定終點之間建立二次貝塞爾曲線。 假設控制點是前一個指令的控制點相對於目前點的反射。 如果沒有上一個指令,或上一個指令不是二次貝塞爾曲線指令或平滑二次貝塞爾曲線指令,則控制點與目前點重合。 此命令會定義具有 QuadraticBezierSegment 的 PathGeometry 等效項目,其中有前一個曲線區段。
| 語法 |
|---|
T
controlPointendPoint -或- t
controlPointendPoint |
| 術語 | Description |
|---|---|
| 控制點 |
點 曲線的控制點,決定曲線的起點和切線。 |
| 端點 |
點 繪製曲線的點。 |
橢圓弧指令
在目前點和指定終點之間建立橢圓弧。 定義 PathGeometry 等同於 ArcSegment。
| 語法 |
|---|
A
大小rotationAngleisLargeArcFlagsweepDirectionFlag端點 -或- a
大小rotationAngleisLargeArcFlagsweepDirectionFlag端點 |
| 術語 | Description |
|---|---|
| 大小 |
大小 弧的 x 半徑和 y 半徑。 |
| 旋轉角度 |
雙 橢圓的旋轉,以度為單位。 |
| isLargeArcFlag | 如果弧的角度應為 180 度或更大,則設定為 1;否則,請設定為 0。 |
| 掃過方向旗標 | 如果圓弧是沿正角度方向繪製的,則設定為 1;否則,請設定為 0。 |
| 端點 |
點 繪製弧線的點。 |
關閉命令
結束目前圖形,並建立一條線,將目前點連接至圖形的起點。 此指令會在圖的最後一個線段和第一個線段之間建立線連接 (轉角)。
| 語法 |
|---|
Z -或- z |
點語法
描述點的 x 座標和 y 座標。 另見 點。
| 語法 |
|---|
|
x,y -或- xy |
| 術語 | Description |
|---|---|
| x |
雙 點的 x 座標。 |
| y |
雙 點的 y 座標。 |
附加說明
除了標準數值,您還可以使用以下特殊值。 這些值區分大小寫。
- Infinity:代表 PositiveInfinity。
- -無限大:表示 負無窮大。
- NaN:代表 NaN。
您可以使用科學記數法來代替使用小數或整數。 例如, +1.e17 是有效值。
設計產生移動和繪製命令的工具
在 Blend for Microsoft Visual Studio 2015 中使用 [ 鋼筆 ] 工具和其他繪圖工具,通常會產生具有移動和繪製命令的 Path 物件。
您可能會在 Windows 執行階段 XAML 的預設控制項範本中看到一些控制部分的現有移動和繪製命令資料。 例如,某些控制項會使用 PathIcon ,其資料定義為移動和繪製命令。
有匯出工具或外掛程式可用於其他常用的向量圖形設計工具,這些工具可以以 XAML 形式輸出向量。 這些通常會在版面配置容器中建立 Path 物件,並使用 Path.Data 的移動和繪製命令。 XAML 中可能有多個 Path 元素,以便套用不同的筆刷。 其中許多匯出工具或外掛程式最初是針對 Windows Presentation Foundation (WPF) XAML 或 Silverlight 撰寫的,但 XAML 路徑語法與 Windows 執行階段 XAML 相同。 通常,您可以使用匯出工具中的 XAML 區塊,並將它們直接貼到 Windows 執行階段 XAML 頁面中。 (不過,如果 RadialGradientBrush 是轉換後 XAML 的一部分,您將無法使用,因為 Windows 執行階段 XAML 不支援該筆刷。