基于WPF的交互式繪圖系統的開發

李成剛，馮 靜，凌 玲

（華中科技大學 機械科學與工程學院，湖北 武漢430074）

交互式繪圖系統是指能為用戶提供交互式操作支持，使用戶通過鼠標、鍵盤和手寫筆等在圖形終端上輸入數據和圖形信息，進行繪圖，并對生成的圖形進行修改、編輯等操作，設計完成后，保存設計結果，最終在顯示屏或其他外部設備上進行圖形輸出的一整套設計及其應用軟件，在CAD、辦公自動化和其他領域得到了非常廣泛的應用?，F有繪圖軟件繪制復雜圖形時會占用大量CPU，消耗大量內存，從而導致界面失去響應。WPF是一個新的編程模型，與傳統GDI/GDI+繪圖模型相比，WPF將CPU和GPU分開來利用，由于GPU的浮點計算能力遠高于CPU,從而保證了大量計算的優先性，同時也能最小化CPU使用率。WPF以DirectX作為核心繪圖函數，DirectX繪圖速度高于GDI/GDI+，能產生更好的視覺效果。對于需要大量浮點運算的圖形圖像來說，WPF是一個很好的選擇。本文介紹了在VS2008環境下，以WPF為平臺，用C#編寫開發的一個交互式圖形系統。

1 交互式繪圖系統的設計

1.1 系統的功能設計

基于WPF的交互式繪圖系統主要由輸入單元、基本繪圖單元、圖元編輯單元、圖元修改單元、屬性設置單元、輸出單元組成。系統模塊結構圖如圖1所示。

本系統實現了以下功能：

圖1 系統模塊結構圖

(1)基本圖形元素（點、直線、折線、圓形、圓弧、橢圓、矩形、多邊形、B樣條、閉合B樣條）以及文本的動態繪制與生成功能；

(2)編輯修改功能：對象的拾取、刪除、復制、鏡像、陣列、移動、旋轉、填充、裁剪，平移縮放視圖，測量封閉區域的面積；

(3)屬性的設置：包括對圖元的圖層、線型、線寬、顏色；系統的背景色，文字的高度等屬性進行設置；

(4)圖形數據文件的讀取、保存、打印等操作。

1.2 開發平臺的選擇

目前Windows環境下的圖形程序接口主要有GDI/GDI+、Direct3D、OpenGL、WPF 四種。 GDI/GDI+通常是一個靜態的顯示系統，只有有限的動畫支持，此外GDI/GDI+只支持二維圖形開發。OpenGL是一個開放的三維圖形軟件包，由于它是圖形的底層圖形庫，沒有提供幾何實體圖元，不能直接用以描述場景。Direct3D以COM接口形式提供，所以較為復雜，穩定性差。WPF是微軟新一代圖形系統，運行在.NET Framework 3.0架構下。WPF的核心是一個與分辨率無關并且基于向量的呈現引擎，旨在利用現代圖形硬件的優勢來最小化 CPU使用率。在WPF中，底層的圖形技術不再是GDI/GDI+，而是DirectX。

WPF在圖形與界面開發方面,主要有以下幾個優勢[1]：

(1)豐富的繪圖模型與文本模型。不同于以往的逐個像素的繪制，在WPF中可以直接處理基本形狀、文本框以及其他UI元素。

(2)獨立的圖形解析。WPF圖形系統的基本度量單位是與設備無關的像素，它等于1英寸的 1/96。不管實際的屏幕分辨率是多少，每個與設備無關的像素都會自動縮放，以符合呈現該像素的系統上的每英寸點數(dpi)設置。

2 交互式繪圖系統的實現

2.1 系統的功能界面

交互式繪圖系統的界面窗口主要由標題欄、菜單欄、工具欄、繪圖區、工具箱、消息框和狀態欄組成，如圖2所示。

2.2 系統的功能實現

2.2.1 系統的窗口框架

WPF包含兩個相互關聯的編程接口，通常使用可擴展應用程序標記語言 (XAML)標記實現應用程序的外觀，而使用托管編程語言(代碼隱藏)實現其行為。WPF中的 Menu控件、ToolBar控件、StatusBar控件、GroupBox控件、TextBox控件以及Canvas面板[2]分別構成了應用程序主窗口頂端的菜單欄、工具欄、底端的狀態欄與客戶區左邊的工具箱、下方的消息框以及繪圖區。系統使用鼠標和鍵盤輸入來繪制圖形，Canvas面板是用于創建復雜繪圖的特別理想的選擇，因為它支持對其子對象的絕對定位?？蚣艽翱诘倪壿嫎浜唸D如圖3所示。

圖3 框架窗口的邏輯樹

2.2.2 圖形的繪制與編輯功能

WPF提供了Shapes庫來顯示矢量圖，WPF中的基本圖形類主要位于System.Windows.Shapes命名空間。Shape類是所有圖形類的基類,它定義了Stroke、StrokeThickness、Fill等通用屬性，用來繪制形狀輪廓的顏色、粗細以及形狀的內部填充。具體的圖形元素類（Line、Path、Polygon、Polyline、Ellipse、Rectangle）都由其派生而來。2D相關類型的層次結構圖如圖4所示。

圖4 2D圖形類的層次結構

Canvas是頂級布局控件，Canvas面板類似傳統的圖形環境，利用坐標位置指定對象的擺放地點。Canvas的左上角為原點，X坐標向右，Y坐標向下。而一般的圖形系統的坐標原點設定在繪圖區的左下角，X坐標水平向右，Y坐標豎直向上，因此可利用WPF的Transform類，通過設定Canvas的RenderTransform來實現[3]。為了使圖元大小根據窗口的大小進行縮放，可以將Canvas放在Viewbox內。以下是實現坐標變換的XAML片段：

圖形元素的編輯與修改功能主要依靠計算機圖形學的基本原理以及Windows表現層基礎類庫(WPF)來實現。WPF的System.Printing命名空間下的PrintDialog類主要用來實現打印單頁或多頁文件的功能，PrintDialog類顯示一個打印對話框，與用戶交互操作來完成打印功能。

2.2.3 曲線曲面造型功能

曲線曲面造型[4]是計算機輔助幾何設計(CAGD)的核心，也是計算機圖形學的一項重要內容。三次B樣條曲線是曲線學中一個重要部分，它不但保留了Bezier曲線的優點，而且克服了其不具備局部性質的缺點，能更好地表示與設計自由型曲線曲面，通過幾個控制點的移動能形成不同的曲線。系統提供了繪制B樣條曲線與閉合B樣條曲線的功能。繪制圖形如圖5所示。

動態生成B樣條曲線的實現步驟如下：

(1)設定一個點集合 List＜Point>mousepts保存鼠標左鍵所按下的序列點;

(2)在鼠標移動過程中把鼠標的當前位置作為B樣條曲線的臨時終點，加入點集合mousepts;

(3)由點集合mousepts中的這些序列點反求B樣條曲線的控制頂點[5];

(4)利用求出的B樣條曲線的控制頂點得到B樣條曲線上的序列離散點;

(5)將序列離散點依次加入多段線Polyline的Points集合，從而生成B樣條曲線。

3 圖形數據文件的存儲與讀取

系統圖形數據文件的輸出包含JPG和DXF兩種格式。由于AutoCAD在全世界應用非常廣泛，它的數據文件格式DXF已經成為事實上的一種標準，因此系統提供了自定義的圖形數據文件格式與DXF格式相互轉換的功能。DXF文件本質上由代碼及關聯值對組成。代碼（通常稱為組碼）表明其后的值的類型。使用這些組碼和值對，可以將 DXF文件組織到由記錄組成的區域中，這些記錄由組碼和數據項目組成。在 DXF文件中，每個組碼和值都各占一行。DXF文件完整的結構[6]如圖6所示。

程序中設計了兩個基類ReadDXF和WriteDXF來分別讀取和寫入DXF文件。ReadDXF讀取 DXF文件，并且從給定段的給定對象中提取特定代碼和值。與讀取DXF文件相比，寫入DXF文件更困難一些，因為必須保持圖形的一致性，這樣 AutoCAD才能找到可接受的文件。AutoCAD允許省略 DXF文件中的很多項目，仍然能夠獲得可用的圖形，但文件結尾處必須存在 EOF項目。為了簡便，WriteDXF省略了整個 HEADER段、TABLES段和BLOCKS段，只包含 ENTITIES段。

圖6 DXF文件的完整層次結構

隨著計算機系統、圖形輸入、圖形輸出設備的發展，計算機圖形軟件系統也有了很大的發展[7]。本文詳細介紹了基于WPF的交互式繪圖系統的功能與設計，并探討了系統實現過程中的若干關鍵技術。該系統實現了其他圖形軟件具有的基本操作，并提供了自定義的圖形數據文件格式與DXF格式相互轉換的功能，操作方便，靈活，具有可擴展性，經過改進還可以成為適用于其它行業的通用的圖形工具軟件。

[1]MACDONALD M.Pro WPF in C#2008:Windows Presentation Foundation with.NET 3.5[M].New York:Apress，2008.

[2]NATHAN A.WPF揭秘[M].瞿杰,譯.北京：人民郵電出版社，2008:109-111.

[3]PETZOLD C.Windows Presentation Foundation程序設計指南[M].蔡學鏞，譯.北京:電子工業出版社,2008:844-845.

[4]朱永強，魯聰達.自由曲線曲面造型技術的綜述[J].中國制造業信息化，2003，32(5):110-113.

[5]孫家廣，楊長貴.計算機圖形學[M].北京:清華大學出版社,1995.

[6]譚超，張群會.基于AutoCAD的DXF格式文件讀寫方法研究[J].計算機與網絡，2009,35(21):46-49.

[7]曾慶云.計算機繪圖技術的發展趨勢[J].機械研究與應用，1996(4):37-38.