流程設計器是編輯流程模版的工具，可視化的流程設計器能直觀的編輯流程模版，所見即所得，如下圖是我們要做的流程設計器：
流程模版存放流程流轉所需要的信息，使用流程設計器來管理流程模版是比較常見的方式，我見過一些流程系統使用表格的形式來管理，那樣很不直觀。也許是因為技術的原因，該篇就介紹如何制作這樣的流程設計器，用到的技術GDI+繪圖，數據庫存取。要了解GDI+繪圖技術的可以先看一下http://www.cnblogs.com/stg609/archive/2008/03/16/1108333.html 這個博客的介紹，比較基礎。
在開始之前，先介紹一下目前市場上流程設計器的幾種形式，無非就是兩種形式一種是B/S的，一種是C/S，我個人感覺這兩種形式沒必要苛求那一種，各有優缺點，B/S的安裝方便一些，不用安裝直接使用，但操作靈活性比不上C/S的，B/S的流程設計器目前有幾種技術可以實現，一種是js，一種是Silverlight或者FLex，還有一種是用ActiveX插件。流程設計器一般是管理員、實施人員使用，用戶群體比較單一固定，但使用要求比較高，必須方便靈活，所以我們的流程設計器采用C/S的方式，結合我們前面提供的WCF遠程數據服務，可以實現遠程流程模版管理，絕對不亞於B/S的流程設計器。
該篇內容比較多，先看一下要介紹的內容：
1、流程模版分類管理
2、如何使用GDI+畫流程圖
3、流程任務節點類型和屬性
4、流程模版的導入導出
下面詳細介紹每一部分：
1、流程模版分類管理
按照業務對流程模版進行分類，建立一個樹形結構的分類機制，不限級數，如下圖：
每個分類上可以配置管理界面，如下圖：可以配置兩種形式的管理界面，一種是web頁面，一種是winform的窗體。這些管理界面是在業務平台上使用。
2、如何使用GDI+畫流程圖
GDI+：Graphics Device Interface Plus是2D圖形處理的技術,在C#.NET中，使用GDI+處理二維（2D）的圖形和圖像，使用DirectX處理三維（3D）的圖形圖像,圖形圖像處理用到的主要命名空間是System . Drawing：提供了對GDI+基本圖形功能的訪問，主要有Graphics類、Bitmap類、從Brush類繼承的類、Font類、Icon類、Image類、Pen類、Color類等。
了解了GDI+基本概念后，再來了解2D圖像處理的原理，在窗體或者控件上顯示圖形或者圖像必須使用OnPaint事件，把成像的代碼放到該事件里，在窗體重畫時才會保持顯示狀態，如果不放在該事件里，那么在窗體重畫時圖像就無法顯示，所以OnPaint事件是圖像顯示的重要事件，每個窗體和窗體上的控件都是利用該事件來顯示的，做過控件開發的應該很了解這個機制。
根據以上原理，流程圖的原理也就很簡單了，就是在畫布上把表示各種類型的任務節點畫出來，再用帶箭頭的連線把他們連接起來，把這個過程放到畫布的OnPaint事件里面，這樣流程圖就可以展現出來，同時選中的節點畫上選中標志。要實現可視化操作還需要解決一下問題：
a、讀取流程模版
從數據庫中把流程模版中的所有任務節點和連線讀出來，放到全局的數組中，在OnPaint事件中把TaskItems 數組和LineItems數組中的圖像畫出來。如下圖數組定義：
/// <summary>
/// 流程模板所有節點列表
/// </summary>
public ArrayList TaskItems = new ArrayList();
/// <summary>
/// 流程模板所有連線列表
/// </summary>
public ArrayList LineItems=new ArrayList();
由於重畫事件執行頻率比較高，所以該過程內的代碼都是操作內存對象，讀寫數據庫的代碼不要放到這里面。
詳細代碼參見HF.WorkFlow.Component項目的WorkPlace.cs
b、如何選中任務節點和多選節點。
選中節點的原理是通過圖像坐標來判斷的，每個圖形或者圖像都有一個Rectangle區域，該區域記錄着節點x，y軸坐標和長度寬度，只要鼠標落點在這個區域內視為選中該節點。這里有個處理技巧，一般任務節點的尺寸是實際看到的圖片尺寸，但是在選中的時候鼠標點中圖標周圍也算選中，這是一種模糊處理的概念，很好用，如果不這么處理，點選任務節點的時候會很別扭，非得點中圖片內才算選中。也可以這么理解，任務節點的有效區域范圍是圖片本身的尺寸加上一個邊框，只要在邊框內都算點中。我們在OnPaint事件中把選中的節點的邊框以毛邊的形式顯示出來，並加上8個方向的方塊句柄，這樣選擇的節點就很形象了。如下圖：
判斷節點是否選中的函數：
/// <summary>
/// 判斷給定坐標是否在組件的邊界矩形內
/// </summary>
/// <param name="thePoint">給定坐標</param>
/// <returns>是否選中</returns>
public bool Contains(Point thePoint)
{
if(!Selected)//沒有選中
return bounds.Contains(thePoint);
else
{
Rectangle selectionRect=bounds;//節點圖像的尺寸區域
selectionRect.Inflate(SystemInformation.FrameBorderSize);//通過各方向的給定值增加矩形的尺寸，加上選擇邊框
return selectionRect.Contains(thePoint);
}
}
然后把選中的節點添加到一個全局的數組中，供拖動或者刪除使用。
/// <summary>
/// 選中的節點列表
/// </summary>
public SelectedItems SelectedItems = new SelectedItems();
多選的處理原理是判斷所有節點的坐標是否在鼠標經過的區域內，如果在該區域內添加到SelectedItems 數組中，畫布重畫的時候會自動給SelectedItems數組的節點畫上選中標志，即毛邊和抓取句柄。下圖是鼠標圈選時滑過的矩形橡皮圈，鼠標抬起時在該區域內的節點都添加到選中數組中。
c、如何移動選中的節點。
前面介紹了如何選中節點，移動節點就是改變選中節點的坐標，只要配合鼠標移動事件和鼠標抬起事件就可以。在鼠標移動時畫出移動的軌跡很關鍵，這樣更直觀一些，如下圖：
方框為移動經過時留下的軌跡，當鼠標抬起時確定選中節點的坐標。重新激活重畫事件OnPaint，重畫事件會重新在界面上畫出任務節點和連線。這就達到了移動的目的。
d、保存流程模版
我們在讀取模版的時候把任務節點和連線都存放到數組中，那么在保存的時候把數組中的任務節點和連線寫入到數據庫中即可。
上面是流程設計器的主要原理，下面來用代碼實現一個簡單的設計器。
a、先定義一個任務節點的基類
首選要確定有多少種類型的節點，每種類型的節點的功能是什么，使用什么樣式的圖標等，后面會介紹節點類型，這里我們先定義一個節點的基類BaseComponent，所有節點類型都繼承該類。
基類的屬性字段包括節點的坐標、圖片、字體、名稱、類型等基本屬性。
基類的方法包括畫節點的方法，選中節點的方法。
代碼比較多復制到這里也不方便，具體代碼參見BaseComponent.cs。
b、如何畫節點的毛邊和抓取句柄
前面見過毛邊是任務節點圖像周圍的邊框，詳細定義參見Bounds.cs，八個方向的抓取句柄參見GrabHandles.cs。
c、如何對齊節點
節點的對齊操作參見Dragger.cs
d、如何定義一個多選時的橡皮圈
定義圈選時的橡皮圈軌跡，參見Rubberband.cs。
以上代碼中都有詳細的注釋。
下一篇我們介紹節點類型和節點屬性。