一種基于可視化界面繪制圖形自動生成C語言代碼軟件的設計與實現

宋雅娟 馮 萍

1(蘇州市職業大學計算機工程學院 江蘇 蘇州 215104)2(長春大學計算機科學技術學院 吉林 長春 130022)

0 引 言

C語言是一門被廣泛開設，普遍使用的計算機程序設計語言，但由于C語言自身特點以及教師教學方法和學生基礎等各方面因素導致C語言課程在教學過程中存在很多問題，制約著課程教學質量[1]。教學一線的教師為了提高課程教學質量，進行了種種教學改革。從教學內容的改革[2]到教學手段的改革[3-4]都做了大量的實踐。Internet上也提供大量的教學資源供學生學習下載。盡管如此，學生長期反復地學習基礎知識和經典算法，雖然可以讀懂和編寫簡單的程序，但很難形成對編程的興趣，也沒有自主思維和實踐創新的意識[5]。圖形動畫和動畫游戲一直是青年學生的最愛，如果在C語言的教學中從編寫圖形動畫或者動畫游戲入手，讓學生可以用C語言設計出自己的圖形動畫或者是動畫程序[6]，一定會激發學生學習C語言程序的極大興趣。EasyX圖形庫[7]融合了Visual C++開發平臺和簡單的繪圖功能，可以幫助C語言初學者快速上手圖形和游戲編程[8]。EasyX可以從網上下載，安裝簡單。為了更好地幫助學生快速學會EasyX來制作圖形程序，掌握EasyX開發圖形程序的方法，筆者結合教學實踐開發了一個C語言圖形化程序開發輔助軟件。軟件提供了可視化界面，借鑒Windows自帶畫筆的繪圖功能。學生啟動軟件后只要在界面上使用提供的繪圖工具欄中的繪圖工具即可在畫板上畫出自己需要的組合圖形，軟件自動根據學生繪制的圖形位置、大小、顏色生成對應的基于EasyX庫C語言代碼，并可直接運行該代碼獲得其在C語言環境中的運行效果。學生可以通過此軟件，快速掌握C語言程序框架，EasyX函數庫的具體使用方法。在掌握C語言基本的圖形程序方法后，學生可自主學習C語言語法知識，開發更復雜的動畫程序。

1 軟件功能簡介

軟件提供了一個集繪圖工具欄、繪圖畫板、代碼面板為一體的可視化界面，如圖1所示。

圖1 代碼自動生成器軟件運行效果圖

軟件左側是仿Windows自帶畫筆程序的繪圖工具欄，其中有基本圖形工具如直線、矩形、橢圓等，線條粗細選擇工具欄及顏色設置工具欄。中間為繪圖界面，學生可選擇左側工具欄上的工具按鈕后在繪圖界面使用鼠標自由繪圖。在繪圖過程中，右側的代碼面板會自動生成對應的C語言程序代碼。學生可以邊繪制，邊體會C語言繪圖功能，為了感受語言程序的運行效果，學生可以把生成的代碼復制到自己的Visual C++環境中運行，也可以點擊圖1中的運行按鈕直接在軟件中查看實際的運行效果，如圖2所示。

圖2 中自動生成代碼點擊運行后的實際運行效果

2 軟件功能實現

2.1 總體功能設計

軟件的總體架構圖如圖3所示。

圖3 系統總體架構圖

2.2 繪圖工具欄與EasyX庫函數

用戶進行繪圖首先需要在繪圖工具欄點選提供的基本圖形，如矩形、橢圓、直線、多邊形、三角形等，以單選按鈕方式實現。繪圖工具欄中提供了部分EasyX庫中有直接函數實現的基本圖形如直線、橢圓、矩形、圓角矩形及多邊形。三角形、菱形等圖形沒有直接直觀的對應函數，但在繪圖中又比較常見，所以也在工具欄上加以表示，這樣更有助于學生掌握EasyX中多邊形函數的功能。圖形工具與EasyX圖形庫函數的對應關系如表1所示。

表1 ToolPanel中的繪圖基本組件

續表1

軟件主要完成的是當用戶選擇繪圖面板上的具體圖形進行繪畫時，根據鼠標經過途徑獲取相應坐標值，生成對應的EasyX函數及參數。以圖形出現的先后順序安排代碼以順序結構形式展現。

2.3 線條選擇與顏色設置

繪制圖形時，如果不特別選擇，則自動選擇最細的線條進行各種圖形的繪制。線條選擇面板只提供了四種尺寸的線條，可供學生了解線條的設置方法，之后便可以根據此規律自行修改代碼以使用其他尺寸的線條，更有助于學生自行設計自己的線條設置程序。

上述四種線條在EasyX的設置函數調用分別是：

(1) setlinestyle(PS_SOLID,1);

(2) setlinestyle(PS_SOLID,3);

(3) setlinestyle(PS_SOLID,7);

(4) setlinestyle(PS_SOLID,11)。

調色板面板是以不同顏色塊為圖形的按鈕集合，用于選擇線條顏色和填充顏色。如果填充顏色按鈕被按下則點選顏色作為填充顏色，否則作為線條顏色。顏色以按鈕方式展示常用的顏色，沒有提供自定義顏色是為了讓學生了解EasyX的設置顏色方法后自行修改代碼來完成其他顏色的設計。

顏色設置的EasyX函數為setcolor();對應填充顏色的圖形繪制方法有專門的函數，見表2。

表2 EasyX使用特定填充色繪制填充圖形的函數

2.4 代碼自動生成及真實環境運行

本部分面板有兩部分構成，一個部分是JTextArea控件來存放生成的代碼，學生也可在此部分直接修改代碼，通過運行按鈕來查看運行結果，從而加深自己對EasyX圖形庫中函數及參數的理解。

代碼生成時機在圖形繪制結束之時，安排在鼠標事件MouseReleased之中，生成代碼流程見圖4。

圖4 C語言程序生成過程流程圖

為了能夠直接在軟件中感受到程序的實際運行效果，特設計實現了調用C語言環境運行C程序的功能，主要包括將生成代碼編譯成可執行文件和執行可執行文件兩部分。

C語言程序的編譯使用的是對應的編譯器cl.exe，因此使用下述語句來調用Visual C++的動態鏈接庫來編譯生成的C語言源程序，形成可執行文件。

Process p=run.exec(″cl /defaultlib:

kernel32.lib user32.lib gdi32.lib

winspool.lib comdlg32.lib advapi32.lib shell32.lib ole32.lib oleaut32.lib uuid.lib odbc32.lib odbccp32.lib ″+filename+″.cpp″);

調用Process q=run.exec(filename)來運行生成的可執行文件。

2.5 橢圓C語言代碼自動生成的實現

為了完成不同基礎圖形的代碼自動生成的統一調用，程序中定義了基礎抽象類MyShape，類中設計抽象方法getCode。在不同類中重寫getCode方法，本節以橢圓為例來介紹重寫后的getCode方法。步驟如下：

(1) 生成StringBuffer對象。

(2) 提取橢圓對象的線條RGB顏色lR,lG,lB，并根據顏色值生成EasyX庫代碼：setcolor(RGB(″+lR+″,″+lG+″,″+lB+″))。

(3) 提取橢圓對象的線條粗細成員變量lineWidth，并生成C函數：

setlinestyle(PS_SOLID,″+lineWidth+″)

(4) 提取橢圓對象外接矩形的左上角坐標left,top與右下角坐標right和bottom,并生成C代碼：

ellipse(″+Math.min(left, right)+″,″+Math.min(top, bottom)+″,″+(Math.min(left, right)+Math.abs(left-right))+″,″+(Math.min(top, bottom)+Math.abs(top-bottom))+″)

(5) 將代碼按順序append入StringBuffer對象并設置入CodePanel中的JTextArea中。

3 結 語

隨著計算機的發展，計算機編程語言的學習已經越來越普及，目前不只大學生學習計算機語言，中小學生的計算機編程課堂也越來越活躍。設計合適的教學方法，提高學生學習興趣并激發創作欲望是目前程序教學的最大需求。在研究基于EasyX圖形庫的C語言教學案例的應用后，特開發了本軟件用以輔助學生方便快速地掌握EasyX庫的圖形開發方法。學生在可視化界面中使用鼠標輕松繪圖，根據自動生成的C語言程序來自主學習。目前軟件還只能用來開發圖形程序，后續會繼續完善軟件，增加C語言程序結構邏輯、動畫圖形及游戲的可視化開發，幫助學生更加深入地掌握C語言功能。