1、武漢理工大學(xué)面向?qū)ο蟪绦蛟O(shè)計(jì)課程設(shè)計(jì)說明書目錄1. 基本功能描述12. 設(shè)計(jì)思路13. 軟件設(shè)計(jì)33.1 設(shè)計(jì)步驟33.2 界面設(shè)計(jì)83.3 關(guān)鍵功能的實(shí)現(xiàn)94. 結(jié)論與心得體會(huì)105. 思考題106. 附錄116.1 調(diào)試報(bào)告116.2 測(cè)試結(jié)果116.3 關(guān)鍵源代碼12簡(jiǎn)單畫圖程序1. 基本功能描述簡(jiǎn)單畫圖程序?qū)崿F(xiàn)了常見圖形的繪制、圖形屬性的設(shè)置和圖形數(shù)據(jù)的暫存等功能。該程序的具體功能模塊包括以下幾項(xiàng)：1) 圖形繪制模塊。該模塊實(shí)現(xiàn)直線段、橢圓、矩形等圖形的繪制功能。在鼠標(biāo)移動(dòng)的過程中能實(shí)時(shí)顯示當(dāng)前繪制的圖形。2) 圖形屬性設(shè)置模塊。該模塊實(shí)現(xiàn)繪圖線條的線寬，線色，圖形填充色等屬性設(shè)置功能

2、。3) 圖形數(shù)據(jù)暫存模塊。該模塊實(shí)現(xiàn)直線段、橢圓、矩形等圖形數(shù)據(jù)暫存功能，涉及圖形的坐標(biāo)、線寬、線色、填充色等數(shù)據(jù)。2. 設(shè)計(jì)思路1) 對(duì)需要用到的變量進(jìn)行初始化。2) 選擇相應(yīng)的圖形之后就響應(yīng)相應(yīng)的消息處理函數(shù)，給shape賦對(duì)應(yīng)的值。選擇不同的線寬，線色與填充色，即可改變畫筆或畫刷的屬性。3) 鼠標(biāo)的按下響應(yīng)函數(shù)OnLButtonDown()，捕捉鼠標(biāo)當(dāng)前位置得到起點(diǎn)的坐標(biāo)，鼠標(biāo)的拖動(dòng)響函數(shù)OnMouseMove()改變終點(diǎn)的坐標(biāo)，鼠標(biāo)的彈起響應(yīng)OnLButtonUp()，確定終點(diǎn)坐標(biāo)，刷新，得到繪制圖形。4) 選擇圖形或其它屬性，可進(jìn)行下一次繪制。5) 程序的流程圖如下：開始定義并初始化

3、變shape 線色m_ncolor 填充色 m_fcolor 畫筆pen畫刷brush繪圖起點(diǎn)opoint繪圖終點(diǎn)cpoint選擇線寬默認(rèn)值（W=1）改變畫筆屬性選擇線色默認(rèn)值（黑色）改變畫筆屬性選擇填充默認(rèn)值（白色）改變畫刷屬性橢圓矩形直線響應(yīng)函數(shù)OnLine()shape=1響應(yīng)函數(shù)OnEllipse()shape=3響應(yīng)函數(shù)OnRect()shape=2鼠標(biāo)左鍵按下 響應(yīng)函數(shù)OnLButtonDown()opoint=point鼠標(biāo)移動(dòng) 響應(yīng)函數(shù)OnMouseMove()epoint=point響應(yīng)OnPaint()，繪制圖形鼠標(biāo)左鍵彈起響應(yīng)函數(shù)OnLButtonUp()刷新，得到圖形結(jié)

4、束圖1 程序流程圖3. 軟件設(shè)計(jì)3.1 設(shè)計(jì)步驟1) 創(chuàng)建單文檔創(chuàng)建一個(gè)MFC AppWizardexe工程，命名為“LiYuJing”，如圖1所示，并創(chuàng)建單文檔，如圖2所示。創(chuàng)建成功后，系統(tǒng)自動(dòng)生成相應(yīng)的類，如圖3所示。圖2 創(chuàng)建工程圖3 創(chuàng)建單文檔圖4 生成類2) 編輯菜單添加需要的菜單項(xiàng)，如圖4所示；并在菜單的屬性中設(shè)定好所對(duì)應(yīng)的ID，如圖5所示，各項(xiàng)菜單對(duì)應(yīng)的ID如表1所示（其中線寬菜單為彈出菜單，只需在菜單項(xiàng)目屬性中的彈出選項(xiàng)前打勾即可，分隔線亦只需在菜單項(xiàng)目屬性中選中分隔符選項(xiàng)即可）。圖5 添加菜單項(xiàng)圖6 設(shè)置菜單ID表1 對(duì)應(yīng)菜單ID菜單名ID菜單名ID直線ID_LINE線寬1I

5、D_W1矩形ID_RECT線寬2ID_W2橢圓ID_ELLIPSE線寬3ID_W3顏色I(xiàn)D_COLOR線寬4ID_W4填充色I(xiàn)D_FILLCOLOR線寬5ID_W5建立類向?qū)?，在視圖類CLiYuJingView中，對(duì)各菜單項(xiàng)添加對(duì)應(yīng)的COMMAND消息處理函數(shù)，部分菜單項(xiàng)還添加對(duì)應(yīng)的UPDATE_COMMAND_UI消息函數(shù)，如圖7所示。圖7 建立類向?qū)?) 創(chuàng)建工具欄在插入處選擇資源，新建工具欄，如圖8所示；圖8 新建工具欄在工具欄上添加相應(yīng)的按鈕，在屬性處更改其ID，如圖9所示。圖9 編輯工具欄4) 添加鼠標(biāo)消息處理函數(shù)添加鼠標(biāo)消息處理函數(shù)OnLButtonDown()、OnMouseMo

6、ve()、OnLButtonUp()，利用橡皮筋技術(shù)實(shí)時(shí)顯示繪制圖形，并繪制最終圖形，具體源代碼參看附錄。添加過程為：選擇View菜單下的ClassWizard菜單項(xiàng)打開類向?qū)?，在類列表中選擇CLiYuJingView類，在消息列表框中選擇WM_LBUTTONDOWN消息并用鼠標(biāo)左鍵雙擊，此時(shí)類向?qū)ё詣?dòng)在成員函數(shù)列表框中添加該消息的處理函數(shù)。然后再用同樣方法添加WM_MOUSEMOVE消息和WM_LBUTTONUP消息的處理函數(shù)，如圖10所示。圖10 添加相應(yīng)代碼3.2 界面設(shè)計(jì)各控件名稱，類型，屬性以及相關(guān)變量如表2所示。表2 界面控件表控件名稱控件類型屬性相關(guān)變量繪圖下拉式菜單無無直線菜單

7、項(xiàng)工具欄按鈕ID_LINEint shape矩形菜單項(xiàng)工具欄按鈕ID_RECTint shape橢圓菜單項(xiàng)工具欄按鈕ID_ELLIPSEint shape線寬彈出式菜單無int w顏色（線色）菜單項(xiàng)工具欄按鈕ID_COLORCOLORREF m_nColor填充色菜單項(xiàng)工具欄按鈕ID_FILLCOLORCOLORREF m_fColor整體界面如圖11所示。圖11 整體界面顯示3.3 關(guān)鍵功能的實(shí)現(xiàn)1) 選擇要繪制的圖形在直線、矩形以及橢圓的消息處理函數(shù)里為shape分別賦值為1,2,3，在OnPaint()函數(shù)里添加3個(gè)if語句的代碼來這實(shí)現(xiàn)這三個(gè)圖形的繪制：當(dāng)選擇畫直線時(shí)，shape=1，

8、則執(zhí)行繪制直線代碼，當(dāng)選擇畫矩形時(shí)，shape =2,則執(zhí)行繪制矩形的代碼，當(dāng)性選擇畫橢圓時(shí),shape=3,則執(zhí)行繪制橢圓的代碼。2) 改變線寬在OnPaint()創(chuàng)建的畫筆中，pen.CreatePen(PS_SOLID,w, m_nColor)，線寬處用w表示，則改變w的值即改變了畫筆的粗細(xì)。選擇菜單繪圖線寬選擇劃線寬度值，此時(shí)所選的線寬值就賦給線寬變量w。若不選擇線寬值，則w=1(即默認(rèn)線寬值為1)。3) 改變線色在OnPaint()創(chuàng)建的畫筆中，pen.CreatePen(PS_SOLID,w, m_nColor)，線的顏色處用m_nColor表示，則改變m_nColor即改變了畫筆

9、的顏色。選擇菜單繪圖顏色，會(huì)彈出通過WM_COLORREF從系統(tǒng)中引入的顏色選擇對(duì)話框，選擇顏色后，點(diǎn)擊確定則相應(yīng)顏色值就賦給變量m_nColor，此時(shí)畫筆的顏色就會(huì)發(fā)上變化。若不選擇顏色，則默認(rèn)（線）顏色為黑色。4) 改變填充色在OnPaint()創(chuàng)建的畫刷中，brush.CreateSolidBrush(m_fColor)，顏色就是用m_fColor表示的，改變m_fColor即改變了畫刷的顏色。選擇菜單繪圖填充色，會(huì)彈出通過WM_COLORREF從系統(tǒng)中引入的顏色選擇對(duì)話框，選擇顏色后，點(diǎn)擊確定則相應(yīng)顏色值就賦給變量m_fColor，此時(shí)畫刷的顏色就會(huì)發(fā)上變化。若不選擇顏色，則默認(rèn)填充色

10、為白色。5) 橡皮筋技術(shù)實(shí)現(xiàn)鼠標(biāo)實(shí)時(shí)繪圖利用橡皮筋技術(shù)可以實(shí)現(xiàn)在鼠標(biāo)拖拽作圖時(shí)，實(shí)時(shí)顯示當(dāng)前繪圖的情況。這樣，我們就要在鼠標(biāo)移動(dòng)的消息處理函數(shù)中添加相應(yīng)的代碼。在鼠標(biāo)左鍵按下的時(shí)候，記錄下圖元起始點(diǎn)；在鼠標(biāo)移動(dòng)的時(shí)候，獲取鼠標(biāo)當(dāng)前位置，繪制出新的圖形，同時(shí)，將上一次繪制的圖形擦除，這就是橡皮筋技術(shù)。在OnMouseMove()函數(shù)中調(diào)用SetROP2()函數(shù)將繪圖模式設(shè)置為NOTXORPEN（同或）模式，使用同或模式繪圖就可以畫上真實(shí)的圖形，并擦除上次繪制的圖形。在OnLButtonDown()函數(shù)中調(diào)用SetCapture()函數(shù)捕捉鼠標(biāo)，OnLButtonUp()函數(shù)中調(diào)用ReleaseC

11、apture()函數(shù)釋放鼠標(biāo)。整個(gè)繪圖過程就是在鼠標(biāo)左鍵按下時(shí)確定繪圖起點(diǎn)，移動(dòng)鼠標(biāo)實(shí)時(shí)顯示繪制的圖形，鼠標(biāo)左鍵彈起即完成圖形的繪制的過程。4. 結(jié)論與心得體會(huì)這次課設(shè)我成功地完成了設(shè)計(jì)要求，能用鼠標(biāo)拖動(dòng)繪制直線段、橢圓、矩形等基本圖形；能控制所繪制圖形的線寬、線色、填充色等。經(jīng)過程序調(diào)試，該簡(jiǎn)單畫圖程序能夠繪制指定線寬、線色、填充色的圖形，在鼠標(biāo)移動(dòng)的過程中能實(shí)時(shí)顯示當(dāng)前繪制的圖形。在拿到任務(wù)書后，我通過查閱資料，不斷編程調(diào)試，以及請(qǐng)教同學(xué)，最終實(shí)現(xiàn)繪圖程序的要求。我學(xué)會(huì)了鼠標(biāo)消息的分類，鼠標(biāo)消息處理函數(shù)的常見編程方法，以及捕捉鼠標(biāo)SetCapture()函數(shù)，釋放鼠標(biāo)ReleaseCapt

12、ure()函數(shù)。同時(shí)，利用橡皮筋技術(shù)實(shí)現(xiàn)鼠標(biāo)繪圖的實(shí)時(shí)顯示是我最大的收獲。我在調(diào)試程序時(shí)，發(fā)現(xiàn)繪制直線時(shí)鼠標(biāo)左鍵彈起直線并沒有繪制結(jié)束，而再次單擊鼠標(biāo)左鍵，又以上次繪制的直線段終點(diǎn)作為起點(diǎn)繪制直線，即繪制出的直線段是一段連著一段的。在自己檢查數(shù)遍并未發(fā)現(xiàn)錯(cuò)誤之處后，我求助了同學(xué)，在OnLButtonDown()函數(shù)中添加了一句cpoint=opoint=point0之后問題得以解決。通過這次課程設(shè)計(jì)，我學(xué)到了很多與計(jì)算機(jī)繪圖相關(guān)的基礎(chǔ)知識(shí)，并進(jìn)一步體會(huì)到面向?qū)ο蟮某绦蛟O(shè)計(jì)的強(qiáng)大，以及Windows應(yīng)用程序用戶界面統(tǒng)一、友好，獨(dú)立于設(shè)備的圖形操作特點(diǎn)。這次的課程設(shè)計(jì)雖只是做了一個(gè)簡(jiǎn)單的繪圖工具，

13、但是也讓我從設(shè)計(jì)者的角度了解了設(shè)計(jì)一個(gè)程序的過程，看似一個(gè)很簡(jiǎn)單的工具，其制作的背后工作是繁瑣的。哪怕是平時(shí)我們使用的很順手的一個(gè)小工具，其開發(fā)的一切步驟都不可小覷，所以，關(guān)于編程還有太多的東西等著我們?nèi)チ私猓瑢W(xué)習(xí)。5. 思考題1) 說明直線、橢圓、矩形繪制使用的函數(shù)，及其參數(shù)含義？答：直線、橢圓、矩形繪制使用的函數(shù)是OnPaint()。函數(shù)里面定義和創(chuàng)建了繪圖的畫筆pen和填充圖形的畫刷brush，3種圖形本身對(duì)應(yīng)的消息處理函數(shù)里分別賦給shape3個(gè)不同的值：1，2，3，在OnPaint()里有3個(gè)if語句，用來這實(shí)現(xiàn)這三個(gè)圖形的繪制：當(dāng)選擇畫直線時(shí)，shape=1，則執(zhí)行繪制直線代碼，當(dāng)

14、選擇畫矩形時(shí)，shape =2,則執(zhí)行繪制矩形的代碼，當(dāng)性選擇畫橢圓時(shí),shape=3,則執(zhí)行繪制橢圓的代碼。2) 如何控制菜單項(xiàng)的狀態(tài)，使用的消息類型？答：通過添加UPDATE_COMMAND_UI消息函數(shù)，在生成的函數(shù)里添加相關(guān)代碼來控制菜單項(xiàng)的狀態(tài)及使用的消息類型。如選擇直線時(shí)，使shape=1，則OnUpdateLine里添加pCmdUI->SetCheck(shape=1)，那么當(dāng)shape的值為1時(shí)，即代表選擇了直線項(xiàng)，此時(shí)菜單中的直線選項(xiàng)前就打勾了，代表選中。矩形和橢圓類似。3) 如何設(shè)置菜單和工具欄按鈕的快捷鍵操作？答：切換到資源視圖，選擇Accelerator資源類型，

15、雙擊IDR_MAINFRAME加速鍵資源，打開加速鍵編輯窗口。在ID下拉列表框中選擇相應(yīng)菜單項(xiàng)的ID，在Key一欄中輸入相應(yīng)鍵值（比如L），選擇Ctrl復(fù)選框和VirtKey單選按鈕，關(guān)閉加速鍵編輯窗口，即可完成加速鍵設(shè)置，如圖12所示。圖12 快捷鍵設(shè)置6. 附錄6.1 調(diào)試報(bào)告1) 一開始我并沒有添加刷新函數(shù)Invalidate()，這就使程序運(yùn)行之后，無論鼠標(biāo)左鍵按下時(shí)如何移動(dòng)無法繪圖，這是因?yàn)楫?dāng)一個(gè)窗口內(nèi)鍵入內(nèi)容其實(shí)就是將窗口刷新了，相當(dāng)于更新了窗口，故必須有刷新函數(shù)。2) 在調(diào)試程序時(shí)，發(fā)現(xiàn)繪制直線時(shí)鼠標(biāo)左鍵彈起直線并沒有繪制結(jié)束，而再次單擊鼠標(biāo)左鍵，又以上次繪制的直線段終點(diǎn)作為起點(diǎn)

16、繪制直線，即繪制出的直線段是一段連著一段的。在OnLButtonDown()函數(shù)中添加了一句cpoint=opoint=point0之后問題得以解決。這是因?yàn)橐o初始坐標(biāo)和終止坐標(biāo)賦個(gè)0值，不然系統(tǒng)無法判斷坐標(biāo)位置。6.2 測(cè)試結(jié)果編譯、連接、運(yùn)行程序后，在窗口中繪制不同線寬，不同線色，不同填充色的圖形后窗口如圖13所示。圖13 繪制各個(gè)圖形6.3 關(guān)鍵源代碼1) 在“MainFrm.h”中，在class CMainFrame : public CFrameWnd里的protected下定義：CToolBar m_drawToolBar; /工具欄2) 在“MainFrm.cpp”中，在CMa

17、inFrame:OnCreate(LPCREATESTRUCT lpCreateStruct)里添加以下代碼：if (!m_drawToolBar.Create(this) |!m_drawToolBar.LoadToolBar(IDR_DRAW)TRACE0("Failed to create status barn");return -1; 3) 在“LiYuJingView.h”中，在class CLiYuJingiew : public CView里的public下定義相關(guān)變量：CLiYuJingDoc* GetDocument(); COLORREF m_nCol

18、or; COLORREF m_fColor; CPoint cpoint; CPoint opoint; BOOL m_Down; int w; int shape;HCURSOR m_Cursor;/光標(biāo)資源句柄 4) 在“LiYuJingViewView.cpp”中，添加如下函數(shù)及代碼：CLiYuJingView:CLiYuJingView()/ TODO: add construction code here w=1; /初始線寬默認(rèn)為1 shape=0;m_fColor=RGB(255,255,255);/初始填充色為白色m_Cursor=AfxGetApp()->LoadSta

19、ndardCursor(IDC_CROSS);void CLiYuJingView:OnW5() w=5; /令線寬為5 void CLiYuJingView:OnW1() w=1; /令線寬為1void CLiYuJingView:OnW2() w=2; /令線寬為2void CLiYuJingView:OnW3() w=3; /令線寬為3void CLiYuJingView:OnW4() w=4; /令線寬為4void CLiYuJingView:OnUpdateW1(CCmdUI* pCmdUI) pCmdUI->SetRadio(w=1); /當(dāng)線寬為1時(shí)，此選項(xiàng)前標(biāo)有圓點(diǎn)voi

20、d CLiYuJingView:OnUpdateW2(CCmdUI* pCmdUI) pCmdUI->SetRadio(w=2); /當(dāng)線寬為2時(shí)，此選項(xiàng)前標(biāo)有圓點(diǎn)void CLiYuJingView:OnUpdateW3(CCmdUI* pCmdUI) pCmdUI->SetRadio(w=3); /當(dāng)線寬為3時(shí)，此選項(xiàng)前標(biāo)有圓點(diǎn)void CLiYuJingView:OnUpdateW4(CCmdUI* pCmdUI) pCmdUI->SetRadio(w=4); void CLiYuJingView:OnUpdateW5(CCmdUI* pCmdUI) pCmdUI-&g

21、t;SetRadio(w=5);void CLiYuJingView:OnLine() shape=1; /選擇直線，則令shape為1m_Cursor=AfxGetApp()->LoadStandardCursor(IDC_CROSS);void CLiYuJingView:OnRect() shape=2; /選擇矩形，則令shape為2m_Cursor=AfxGetApp()->LoadStandardCursor(IDC_CROSS); void CLiYuJingView:OnEllipse() shape=3; /選擇橢圓，則令shape為3m_Cursor=AfxGe

22、tApp()->LoadStandardCursor(IDC_CROSS); void CLiYuJingView:OnUpdateLine(CCmdUI* pCmdUI) pCmdUI->SetCheck(shape=1); /shape為1時(shí)，直線選項(xiàng)前打上勾void CLiYuJingView:OnUpdateRect(CCmdUI* pCmdUI) pCmdUI->SetCheck(shape=2); /shape為2時(shí)，矩形選項(xiàng)前打上勾void CLiYuJingView:OnUpdateEllipse(CCmdUI* pCmdUI) pCmdUI->SetC

23、heck(shape=3); /shape為3時(shí)，橢圓選項(xiàng)前打上勾void CLiYuJingView:OnColor() CColorDialog Color; / 創(chuàng)建顏色對(duì)話框 if(Color.DoModal() = IDOK) / 如果用戶點(diǎn)擊OK按鈕 m_nColor=Color.GetColor(); / 更改顏色,把顏色賦到m_nColorvoid CLiYuJingView:OnFillcolor() CColorDialog FullColor; / 創(chuàng)建顏色對(duì)話框 if(FullColor.DoModal() = IDOK) / 如果用戶點(diǎn)擊OK按鈕 m_fColor=F

24、ullColor.GetColor(); / 更改顏色,把顏色賦到m_fColorvoid CLiYuJingView:OnPaint() CPaintDC dc(this); / device context for painting CPen pen; /定義畫筆 CBrush brush; /定義畫刷 pen.CreatePen(PS_SOLID,w, m_nColor); /創(chuàng)建畫筆 brush.CreateSolidBrush(m_fColor); /創(chuàng)建畫刷 dc.SelectObject(&pen); /獲取畫筆 dc.SelectObject(&brush);

25、/獲取畫刷 if(shape=1) dc.MoveTo(opoint.x,opoint.y); dc.LineTo(cpoint.x,cpoint.y); /繪制直線,從opoint到cpoint連線 if(shape=2) dc.Rectangle(opoint.x,opoint.y,cpoint.x,cpoint.y); /繪制矩形 if(shape=3) dc.Ellipse(opoint.x,opoint.y,cpoint.x,cpoint.y);/繪制橢圓void CLiYuJingView:OnLButtonDown(UINT nFlags, CPoint point) / TOD

26、O: Add your message handler code here and/or call default m_Down=TRUE; /鼠標(biāo)按下 SetCapture(); /獲取坐標(biāo)cpoint=opoint=point; /把鼠標(biāo)所在坐標(biāo)賦給起點(diǎn)坐標(biāo)opoint ReleaseCapture(); /釋放坐標(biāo)CView:OnLButtonDown(nFlags, point);void CLiYuJingView:OnMouseMove(UINT nFlags, CPoint point) if(m_Down) /如果鼠標(biāo)按下SetCursor(m_Cursor);/設(shè)置使用光標(biāo)資源CClientDC dc(this);/構(gòu)造設(shè)備環(huán)境對(duì)象CPen newpen;/新畫筆CPen *oldpen;/老畫筆CBrush newbrush;/新畫刷CBrush *oldbrush;/老畫刷/創(chuàng)建指定寬度和線色的畫筆newpen.CreatePen(PS_SOLID, w,m_nColor); newbrush.CreateSolidBrush(m_fColor);/創(chuàng)建指定顏色的畫刷oldpen=dc.SelectObject(&newpen);/將創(chuàng)建的畫筆選入設(shè)備環(huán)境oldbrush=dc.SelectObject(&