《電子技術(shù)應(yīng)用》
您所在的位置:首頁 > 嵌入式技術(shù) > 設(shè)計應(yīng)用 > 基于WPF的交互式繪圖系統(tǒng)的開發(fā)
基于WPF的交互式繪圖系統(tǒng)的開發(fā)
來源:微型機(jī)與應(yīng)用2011年第6期
李成剛, 馮 靜, 凌 玲
(華中科技大學(xué) 機(jī)械科學(xué)與工程學(xué)院, 湖北 武漢430074)
摘要: 開發(fā)了一個VS2008環(huán)境下,基于WPF平臺的交互式繪圖系統(tǒng)。該系統(tǒng)利用計算機(jī)圖形學(xué)的基本原理、圖論知識和Windows表現(xiàn)層基礎(chǔ)類庫,實現(xiàn)了基本圖形元素的繪制、編輯與修改,以及圖形文件的打開、保存、打印等操作,并提供了自定義的圖形數(shù)據(jù)文件格式與DXF格式相互轉(zhuǎn)換的功能。
關(guān)鍵詞: 軟件 圖形 WPF 系統(tǒng)
Abstract:
Key words :

摘  要: 開發(fā)了一個VS2008環(huán)境下,基于WPF平臺的交互式繪圖系統(tǒng)。該系統(tǒng)利用計算機(jī)圖形學(xué)的基本原理、圖論知識和Windows表現(xiàn)層基礎(chǔ)類庫,實現(xiàn)了基本圖形元素的繪制、編輯與修改,以及圖形文件的打開、保存、打印等操作,并提供了自定義的圖形數(shù)據(jù)文件格式與DXF格式相互轉(zhuǎn)換的功能。
關(guān)鍵詞: 圖形; WPF; 系統(tǒng)

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

    基于WPF的交互式繪圖系統(tǒng)主要由輸入單元、基本繪圖單元、圖元編輯單元、圖元修改單元、屬性設(shè)置單元、輸出單元組成。系統(tǒng)模塊結(jié)構(gòu)圖如圖1所示。

    本系統(tǒng)實現(xiàn)了以下功能:
    (1)基本圖形元素(點、直線、折線、圓形、圓弧、橢圓、矩形、多邊形、B樣條、閉合B樣條)以及文本的動態(tài)繪制與生成功能;
    (2)編輯修改功能:對象的拾取、刪除、復(fù)制、鏡像、陣列、移動、旋轉(zhuǎn)、填充、裁剪,平移縮放視圖,測量封閉區(qū)域的面積;
    (3)屬性的設(shè)置:包括對圖元的圖層、線型、線寬、顏色;系統(tǒng)的背景色,文字的高度等屬性進(jìn)行設(shè)置;
    (4)圖形數(shù)據(jù)文件的讀取、保存、打印等操作。
1.2 開發(fā)平臺的選擇
    目前Windows環(huán)境下的圖形程序接口主要有GDI/GDI+、Direct3D、OpenGL、WPF四種。GDI/GDI+通常是一個靜態(tài)的顯示系統(tǒng),只有有限的動畫支持,此外GDI/GDI+只支持二維圖形開發(fā)。OpenGL是一個開放的三維圖形軟件包,由于它是圖形的底層圖形庫,沒有提供幾何實體圖元,不能直接用以描述場景。Direct3D以COM接口形式提供,所以較為復(fù)雜,穩(wěn)定性差。WPF是微軟新一代圖形系統(tǒng),運(yùn)行在.NET Framework 3.0架構(gòu)下。WPF 的核心是一個與分辨率無關(guān)并且基于向量的呈現(xiàn)引擎,旨在利用現(xiàn)代圖形硬件的優(yōu)勢來最小化 CPU 使用率。在WPF中,底層的圖形技術(shù)不再是GDI/GDI+,而是DirectX。
    WPF在圖形與界面開發(fā)方面,主要有以下幾個優(yōu)勢[1]:
    (1)豐富的繪圖模型與文本模型。不同于以往的逐個像素的繪制,在WPF中可以直接處理基本形狀、文本框以及其他UI元素。
    (2)獨(dú)立的圖形解析。WPF 圖形系統(tǒng)的基本度量單位是與設(shè)備無關(guān)的像素,它等于1英寸的 1/96。不管實際的屏幕分辨率是多少,每個與設(shè)備無關(guān)的像素都會自動縮放,以符合呈現(xiàn)該像素的系統(tǒng)上的每英寸點數(shù) (dpi) 設(shè)置。
2交互式繪圖系統(tǒng)的實現(xiàn)
2.1 系統(tǒng)的功能界面

    交互式繪圖系統(tǒng)的界面窗口主要由標(biāo)題欄、菜單欄、工具欄、繪圖區(qū)、工具箱、消息框和狀態(tài)欄組成,如圖2所示。

2.2 系統(tǒng)的功能實現(xiàn)
2.2.1 系統(tǒng)的窗口框架

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

2.2.2 圖形的繪制與編輯功能
    WPF提供了Shapes庫來顯示矢量圖,WPF中的基本圖形類主要位于System.Windows.Shapes命名空間。Shape類是所有圖形類的基類,它定義了Stroke、StrokeThickness、Fill等通用屬性,用來繪制形狀輪廓的顏色、粗細(xì)以及形狀的內(nèi)部填充。具體的圖形元素類(Line、Path、Polygon、Polyline、Ellipse、Rectangle)都由其派生而來。2D相關(guān)類型的層次結(jié)構(gòu)圖如圖4所示。

    Canvas 是頂級布局控件,Canvas面板類似傳統(tǒng)的圖形環(huán)境,利用坐標(biāo)位置指定對象的擺放地點。Canvas的左上角為原點,X坐標(biāo)向右,Y坐標(biāo)向下。而一般的圖形系統(tǒng)的坐標(biāo)原點設(shè)定在繪圖區(qū)的左下角,X坐標(biāo)水平向右,Y坐標(biāo)豎直向上,因此可利用WPF的Transform類,通過設(shè)定Canvas的RenderTransform來實現(xiàn)[3]。為了使圖元大小根據(jù)窗口的大小進(jìn)行縮放,可以將Canvas放在Viewbox內(nèi)。以下是實現(xiàn)坐標(biāo)變換的XAML片段:
    <Viewbox>
     <Canvas RenderTransformOrigin="0.5,0.5">
        <Canvas.RenderTransform>
  <TransformGroup >
  <ScaleTransform ScaleY="-1" />
        </TransformGroup>
  </Canvas.RenderTransform>
  </Canvas>
  </Viewbox>
  圖形元素的編輯與修改功能主要依靠計算機(jī)圖形學(xué)的基本原理以及Windows表現(xiàn)層基礎(chǔ)類庫(WPF)來實現(xiàn)。WPF的System.Printing命名空間下的PrintDialog類主要用來實現(xiàn)打印單頁或多頁文件的功能,PrintDialog類顯示一個打印對話框,與用戶交互操作來完成打印功能。
2.2.3 曲線曲面造型功能
 曲線曲面造型[4]是計算機(jī)輔助幾何設(shè)計(CAGD)的核心,也是計算機(jī)圖形學(xué)的一項重要內(nèi)容。三次B樣條曲線是曲線學(xué)中一個重要部分,它不但保留了Bezier曲線的優(yōu)點,而且克服了其不具備局部性質(zhì)的缺點,能更好地表示與設(shè)計自由型曲線曲面,通過幾個控制點的移動能形成不同的曲線。系統(tǒng)提供了繪制B樣條曲線與閉合B樣條曲線的功能。繪制圖形如圖5所示。

    動態(tài)生成B樣條曲線的實現(xiàn)步驟如下:
  (1)設(shè)定一個點集合List<Point> mousepts保存鼠標(biāo)左鍵所按下的序列點;
  (2)在鼠標(biāo)移動過程中把鼠標(biāo)的當(dāng)前位置作為B樣條曲線的臨時終點,加入點集合mousepts;
  (3)由點集合mousepts中的這些序列點反求B樣條曲線的控制頂點[5];
  (4)利用求出的B樣條曲線的控制頂點得到B樣條曲線上的序列離散點;
    (5)將序列離散點依次加入多段線Polyline的Points集合,從而生成B樣條曲線。
3 圖形數(shù)據(jù)文件的存儲與讀取
    系統(tǒng)圖形數(shù)據(jù)文件的輸出包含JPG和DXF兩種格式。由于AutoCAD在全世界應(yīng)用非常廣泛,它的數(shù)據(jù)文件格式DXF已經(jīng)成為事實上的一種標(biāo)準(zhǔn),因此系統(tǒng)提供了自定義的圖形數(shù)據(jù)文件格式與DXF格式相互轉(zhuǎn)換的功能。DXF 文件本質(zhì)上由代碼及關(guān)聯(lián)值對組成。代碼(通常稱為組碼)表明其后的值的類型。使用這些組碼和值對,可以將 DXF 文件組織到由記錄組成的區(qū)域中,這些記錄由組碼和數(shù)據(jù)項目組成。在 DXF 文件中,每個組碼和值都各占一行。DXF文件完整的結(jié)構(gòu)[6]如圖6所示。

    程序中設(shè)計了兩個基類ReadDXF和WriteDXF來分別讀取和寫入DXF文件。ReadDXF讀取 DXF 文件,并且從給定段的給定對象中提取特定代碼和值。與讀取 DXF 文件相比,寫入DXF文件更困難一些,因為必須保持圖形的一致性,這樣 AutoCAD 才能找到可接受的文件。AutoCAD 允許省略 DXF 文件中的很多項目,仍然能夠獲得可用的圖形,但文件結(jié)尾處必須存在 EOF 項目。為了簡便,WriteDXF省略了整個HEADER段、TABLES 段和BLOCKS 段,只包含 ENTITIES 段。
    隨著計算機(jī)系統(tǒng)、圖形輸入、圖形輸出設(shè)備的發(fā)展,計算機(jī)圖形軟件系統(tǒng)也有了很大的發(fā)展[7]。本文詳細(xì)介紹了基于WPF的交互式繪圖系統(tǒng)的功能與設(shè)計,并探討了系統(tǒng)實現(xiàn)過程中的若干關(guān)鍵技術(shù)。該系統(tǒng)實現(xiàn)了其他圖形軟件具有的基本操作,并提供了自定義的圖形數(shù)據(jù)文件格式與DXF格式相互轉(zhuǎn)換的功能,操作方便,靈活,具有可擴(kuò)展性,經(jīng)過改進(jìn)還可以成為適用于其它行業(yè)的通用的圖形工具軟件。
參考文獻(xiàn)
[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程序設(shè)計指南[M].蔡學(xué)鏞,譯. 北京:電子工業(yè)出版社, 2008:844-845.     
[4] 朱永強(qiáng),魯聰達(dá). 自由曲線曲面造型技術(shù)的綜述[J].中國制造業(yè)信息化,2003,32(5):110-113.
[5] 孫家廣,楊長貴.計算機(jī)圖形學(xué)[M]. 北京:清華大學(xué)出版社, 1995.
[6] 譚超,張群會.基于AutoCAD 的DXF格式文件讀寫方法研究[J].計算機(jī)與網(wǎng)絡(luò),2009,35(21):46-49.
[7] 曾慶云. 計算機(jī)繪圖技術(shù)的發(fā)展趨勢[J]. 機(jī)械研究與應(yīng)用,1996(4):37-38.

此內(nèi)容為AET網(wǎng)站原創(chuàng),未經(jīng)授權(quán)禁止轉(zhuǎn)載。