WPF 使用 Expression Design 畫圖導出及使用 Path 畫圖
一、軟件介紹
最近接觸到一個流程圖畫圖軟件，基本功能都有，但是不確定其中的提供的流程圖完不完整，於是到在線畫圖網站 ProcessOn 上看了下。
果然是缺少了幾項，比如這個 "注釋"：
那么在 WPF 中如何添加圖形呢？一種自然是使用圖片，另一種則是使用 WPF 的 Xaml 語法生成圖形，之前提到的軟件是使用后者，本文探討的也是這種。
使用代碼（Xaml）生成圖形畢竟也不是那么容易的，所以有沒有什么簡單的方法呢？畢竟 Xaml 的設計初衷之一就是讓設計人員能夠有方法按照其原有的工作方式進行設計，然后能生成相應的 WPF 或其它程序能使用的界面數據。眾所周知，和 Visual Studio 同一家族的，還有個 Blend for Visual Studio，這個是用於做界面設計的，它能對界面效果做的設置項確實比 Visual Studio 多，但是如何使用它進行繪圖設計，本人還是不得要領。
有沒有像 PhotoShop 一樣能繪制圖形，然后又能導出 Xaml 數據的軟件呢？還真有，叫做 Microsoft Expression Design，可以從 MSDN, 我告訴你 網站下載 Expression Studio 4，里面包含了這個。（附 Ultimate 版激活碼：6WDDQ-K7D4F-GQGF4-2VYBJ-8K6MB）。另外，微軟已經放棄支持這套軟件了，不過不影響我們使用它。
二、Microsoft Expression Design 使用
下面來看看如何使用 Expression Design 4 來繪制之前說的注釋流程圖標志。
首先打開軟件，新建一個 60*50 的畫布（黑線框住的部分），然后拖一些標尺線來輔助定位：
在左邊的工具欄選擇 折線 工具：
在如下圖的 1、2、3、4 四個點依次點擊，然后按 ESC 鍵，就形成了目標圖形，然后把線的寬度改為 5 像素：
這就完成啦，可以導出了，選擇文件 -- 導出，會彈出導出窗口，具體可參考微軟的說明：
導出格式可選項中和 WPF 有關的一個是 XAML WPF 畫布：
還有一個是 XAML WPF 資源字典：
畫布導出的是 Path 元素數據，資源字典導出的是畫刷資源數據，不過可以看到兩者的關鍵數據（對於畫布來說就是 Path 的 Data 數據）是一致的：
注意：本文探討的是使用畫布導出的這種數據形式，也就是使用 Path 元素來繪制圖形，其 Data 中的字符串數據是一種被稱為 微語言 的簡便表示方式。
言歸正傳，大家可以看到之前我們選擇 "要導出的項" 時選的是 "選定對象"，這就導致圖形沒有了邊距，所以我們可以選擇 "整個文檔" 來避免這種問題：
這樣微語言數據中就體現出邊距了：
至此，導出的數據可以任君使用了。這種純粹的 Xaml 文件還可以直接在瀏覽器中打開：
三、微語言和 Path 繪圖
先看看《WPF 編程寶典》中關於微語言圖形命令的列舉：
1、"注釋" 圖形（中括號）
我們拿出之前導出數據的 Data 值：
F1 M 20,7.5625L 7.5,7.5625L 7.5,42.5L 20,42.5
F 命令設為 1 時具有穿透效果，此處可省略；太精細的小數位數可去除；所以可優化如下：
M 20,7.5 L 7.5,7.5 L 7.5,42.5 L 20,42.5
M 表示起點，L 表示直線，對應到圖上則如下：
以上所示實際上是通過把線條加粗來形成圖形，所以無法再有描邊了，設置非透明填充后效果如下：
而一般是要用細線條圍出圖形，這樣既有描邊又有填充。Path 的 Data 數據如下：
M 20,5 L5,5 L5,45 L20,45 L20,40 L10,40 L10,10 L20,10 Z
這里多出個 Z 命令，表示終點和起點相連形成封閉圖形。所以各命令和坐標對應到圖形上就是：
效果如下：
2、"並行模式" 圖形（平行線）
經過上一小節繪制 "注釋" 的過程可以看出，實際上熟練了之后，我們確實不需要使用 Expression Design 來導出數據，只需要一個畫圖軟件來輔助確定一下坐標就行了。甚至再熟練一點，我們在腦海中就能確定坐標了，哈哈。
這一小節我們來畫下面這個 "並行模式"，實際上就是兩條平行線：
直接使用截圖軟件來畫圖了，確定下坐標：
這個圖形需要兩個起點，所以微語言命令中出現了兩個 M：
M5,5 L55,5 L55,10 L5,10 Z M5,40 L55,40 L55,45 L5,45 Z
效果如下（改變了漸變方向）：
3、"頁面內引用" 圖形（圓形）
頁面內引用 使用一個圓形來表示：
圓形需要使用畫圓弧的命令 A 來繪制，具體可參考網上的文章《WPF 使用 PATH 來畫圓》，以下為要點摘錄：
Data="M 300,300 A 100,100 0 1 1 300,299 Z"
M 300,300 表示起始坐標，字母 M 為 Move, 意思是將畫筆移到 300,300 處；
A 100,100 0 1 1 300,299 這是圓弧的書寫語法，詳細格式如下：
A 表示 Arc 圓弧，
100,100 表示圓弧的 x, y 值，表示橢圓時表示大小半徑，圓是兩值相同；
0 表示圖形的旋轉角度；
1 當圖形設置了旋轉角度，並且大於 180 度時，才會生效，1 表示取大圓弧，0 表示取小圓弧；
1 表示畫圓時筆畫是是順時針畫，需要逆時針時設置為 0；
300,299 表示終止坐標。Z 表示路徑閉合。
我們這里將起點設為上邊的中間位置（30,0），半徑為 25，終止坐標不能和起點重合，所以做個微小的偏移（29,1），最后使用 Z 命令閉合，所以微語言命令如下：
M 30,0 A 25,25 0 1 1 29,1 Z
最終效果如下：
好了，就先到這里吧，算是拋磚引玉。
原創文章，轉載請注明： 轉載自 獨立觀察員・博客
本文鏈接地址: WPF 使用 Expression Design 畫圖導出及使用 Path 畫圖 [http://dlgcy.com/wpf-expression-design-path-picture/]