WPF 使用 Expression Design 畫圖匯出及使用 Path 畫圖
目錄 WPF 使用 Expression Design 畫圖匯出及使用 Path 畫圖 一、軟體介紹 二、Microsoft Expression Design 使用 三、微語言和 Path 繪圖 1、"注釋" 圖形（中括號） 2、"并行模式" 圖形（平行線） 3、"頁面內參考" 圖形（圓形）獨立觀察員 2020 年 11 月 21 日
一、軟體介紹
最近接觸到一個流程圖畫圖軟體，基本功能都有，但是不確定其中的提供的流程圖完不完整，于是到在線畫圖網站 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 像素：
這就完成啦，可以匯出了，選擇檔案 -- 匯出，會彈出匯出視窗，具體可參考微軟的說明：
https://docs.microsoft.com/zh-cn/previous-versions/visualstudio/design-tools/expression-studio-4/cc294753(v=expression.40)
匯出格式可選項中和 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="https://www.cnblogs.com/weiliuhong/p/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/]
微信公眾號轉載請註明出處，本文鏈接：https://www.uj5u.com/net/226024.html
標籤：WPF