基礎教學圖形繪制系統的設計與實現

祁少杰

摘要：隨著現代化教育背景下新型電教設備的興起以及交互式電子黑板逐漸普及，現有的圖形繪制系統因其依賴輸入設備、繪制方式煩瑣等問題，無法滿足課堂教學應用場景中存在的諸多需求。為了解決此現狀，開發基礎教學圖形繪制系統，從程序設計到應用開發的角度闡述此系統的細節與創新，改善現代化教學中圖形教學的現狀，提升課堂教學質量。

關鍵詞：現代化教育;電教設備;交互式電子黑板;圖形繪制;課堂教學

中圖分類號：TP311.1;TP399? ? ? 文獻標識碼：A

文章編號：1009-3044（2022）12-0007-03

開放科學（資源服務）標識碼（OSID）：

1 引言

當前，隨著計算機網絡及顯示設備的快速發展，交互式電子黑板以其圖文并茂、簡單易用等優點在教育教學中逐漸被廣泛地應用。而圖形繪制作為傳統教學中不可或缺的一環，它在電子黑板應用中的表現也尤為重要[1-2]。隨著電子黑板的普及以及教師對于電子黑板應用的深入，市場與用戶對電子黑板繪圖功能也提出來更多更高的要求。一方面是對于各類幾何圖形的繪制，如何更加快速精確、節約時間，另一方面是如何滿足實際教學場景的繪制需求。

一個符合老師使用習慣、符合數學邏輯、操作簡便快捷的圖形繪制系統，可以大大減少教師在圖形繪制時花費的時間，提升板書的整潔程度，大大提升學生在課堂上知識接受。

2 系統功能設計

2.1 需求分析

1）電子黑板輸入方式單一，圖形繪制僅依靠觸摸筆，為此通過垂直位移判定和停頓時間判定，實現一次落筆繪制。

2）圖形繪制點位刻畫不清，繪制方式單一，不合數學邏輯，為此采用多種繪制方式，位置刻畫圖形，特征點控制。

3）教師為多個班級教課，教學內容重復，圖形反復繪制，為此提供圖形保存與打開功能，一次繪制，反復使用。

2.2 系統目標功能

實現一款基于位圖的圖形選擇移動及多方式繪制的圖形繪制系統，系統功能包含：日常教學圖形的多種方式的繪制，圖形選擇及移動，已繪制圖形的保存，對已有圖片資源的加載呈現[3]。

3 系統功能實現

3.1 圖形繪制

圖形繪制作為理科類課程重要的教學內容，如何快速準確繪制所需圖形是至關重要的。本節主要討論日常教學所涉及圖形的各自的繪制方式及其實現方案，使圖形繪制過程合乎數學原理、靈活、簡單快捷，符合教師繪制習慣;可以繪制出各種比例角度的圖形;圖形美觀、精確，滿足教師的日常圖形教學[4]。

1）實時繪制思路

通過異或處理，使得同一位置的重復繪制會相互抵消，顯示為空。以此為起點，如圖1所示，讓鼠標或畫筆的每一次移動，都去抵消舊圖，記錄點位，繪制新圖，以此來達到實時繪制的效果[5]。

通過實時繪制，可以保證教師在繪制過程中時刻通過調整畫筆來修改所繪制的圖形，圖形實時更新，每一次移動，都可以精確地控制圖形的成像，方式簡單快捷，對圖形的繪制控制直觀。

2）點位固定方式

傳統的繪制方法例如Word中的形狀繪制和Windows自帶畫圖應用中的諸多圖形繪制，均是采用單次點擊加滑動的方式，來實現使用鼠標簡單繪制圖形的需求。這種繪制方式的優點在于繪制圖形簡單便捷，不需要提前學習便可快速上手，對于對圖形細節、精度要求較低的使用場景而言，較為合適。

而在實際的教學應用場景中，教師更加希望圖形繪制方式便捷，符合教學需求，并且繪制出的圖形靈活多樣。而這種需求在缺乏除畫筆之外的輸入設備的條件下，則對日常教學圖形的繪制方式。提出了較高要求。如何在有限且又盡可能少的操作內完成繪制，點位的固定方式是必須要討論的問題。為此提出了兩種新的點位固定方式。

①垂直位移判定

垂直位移判定方法通過判定鼠標的垂直位移距離，當超過某個閾值后，即可固定點位與圖形。垂直位移判定方法適用于一些有水平或垂直線段的圖形繪制過程中，實現簡單但應用卻極為方便，擴展了圖形的繪制思路。

②時間停頓判定

時間停頓判定則是通過停頓的方式來固定點位，當畫筆停頓滿足一定時間后，即可固定點位，判定流程如圖2所示。時間停頓的方法突破了垂直位移判定中水平或垂直的限制，使一次落筆所能繪制的圖形更加豐富，搭配垂直位移判定方法，也使圖形的多樣化繪制成為可能。

3）簡單平面圖形繪制方案

平面圖形繪制是圖形繪制的基礎功能，雖然圖形構成簡單，但日常使用仍有許多需求，這些使用最為頻繁的圖形，往往被人忽略了其繪制方式的多樣性以及在日常教學中的繪制需求。

以三角形為例，在設計過程中將三角形大致歸為了兩類，一類為三邊中任意一邊平行于橫向坐標軸，這類三角形在實際場景中的使用和出現頻率最高;另一類為任意三角形，它包含第一類三角形。

根據第一類三角形的一邊平行于橫向坐標軸的特性，使用垂直位移判定的方法，以落筆點為平行邊的起始端點，平行移動至此邊的另一端點，這個過程中圖形以一條直線呈現。而后上下移動，使畫筆的垂直位移量超出一定閾值，三角形的第二個端點被固定，三角形開始呈現，此時的畫筆控制三角形的最后一個端點，直至抬筆，圖形固定，三角形繪制成功。如果對底邊的固定不滿意，可以使畫筆靠近底邊一定范圍內，重新確定第二個端點，或是在此時抬筆，則直線消失，圖形繪制的痕跡消除，此時可以快速重新開始繪制。

當繪制的三角形要求為任意角度的三角形時，那么可以采用第二種繪制方式，相較于通過垂直位移判定來固定第二個點位，時間停頓判定的方法所固定的第二個點位更加地靈活，通過在指定位置停頓一段時間，即可固定第二個點，打破了第二個點只能在水平方向上的限制，實現三角形的任意角度繪制。

4）函數圖形繪制方案

函數圖形作為中學中出現最為頻繁的教學圖形，也是程序設計中的重要一環。

[C=（yd-ym）1（xm-xd）]? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（1）

指數函數的繪制通過兩點來確定，分別為指數函數的特殊點（0，1）點和函數上任意一點，對應落筆點[xd]與抬筆點[xm]。根據繪制過程中記錄的特征點，為圖形繪制劃分區域，在區域內通過橫向坐標不斷累加計數參數，將參數代入函數公式，實現計數參數在縱坐標上的函數投影，形成諸多點位，如公式（2）與（3）所示，使相鄰點位相連，此時圖像由多段線段組成，圖形呈現。隨著點數的增多，圖像會逐漸光滑，且連續性良好。對于控制點位的選取，時刻遵循控制點位于函數圖形上，且與函數的數學特性點相關聯。

[xi=xd-β*（xm-xd）+i*（2β+1）*（xm-xd）/α? ? ?0≤i≤α]

（2）

[yi=（xi-xd）|xi-xd|C（xi-xd）+yd]? ? ? ? ? ? ? ? ? ? ? ? ? ? （3）

公式（2）中的均分參數[α]為繪制時函數顯示的分割精度，[α]越大，函數越光滑，但計算量也越大，控制參數[β]為繪制時畫筆的控制程度和函數的顯示范圍，[β]越大，代表繪制函數時控制的函數段越小，顯示的函數越多，[β]越小，則反之。通過調整[α]均分參數和[β]控制參數，可以達到最合適的函數圖形繪制效果。

5）立體圖形繪制方案

立體圖形繪制時，主要需要解決的問題包括為了嚴格按照一次落筆完成繪制的原則而對立體圖形繪制時的繪制方式進行探索與設計;以及同一圖形的不同方向不同階段繪制導致的圖像虛實線問題。

以四棱柱為例，四棱柱第一階段通過垂直位移判定繪制出平行四邊形，對應四棱柱的底面，第二階段為停頓等待圖形消失，而后任意移動確定四棱柱的高度。而虛實線的判定則需要結合繪制過程中點位信息從而對不同情況做出判定，以此決定點位間的虛實情況。圖5為實際的繪制過程。

3.2 圖形選定

為實現圖形的移動，首先需要解決的問題是如何選中圖形，以及通過怎樣的邏輯來判定選中。

針對圖形的選定問題，當圖形繪制成功后，會為每個圖形確定一個矩形范圍，如圖6所示。這個范圍會用最小的矩形面積來將圖形全部包裹在內，如圖6所示。當點擊移動功能并落筆在圖形的矩形范圍內時，即可選定圖形。這種方式不僅操作簡單直觀，且所需的計算與存儲代價都極小。

3.3 圖形移動

圖形移動包括了圖形選定、移動、數據存儲和數據更新等一系列的操作，當經歷了圖形選定后，程序確定了唯一的圖形序號，這個序號指向了在內存中存儲的一系列點位。

通過捕捉鼠標的坐標輸入，采用記錄落筆點和計算畫筆移動距離，確定了圖形的移動距離。將內存中的點位信息讀取并與移動距離相加，便是此刻圖形的實際位置。將這些實際位置輸入到圖形的繪制函數中，對應不同的點位對圖形進行繪制-抵消-再次繪制的操作，每次鼠標的移動都是對數據的一次更改，以及對圖形序號對應的繪制函數的一次調用，直至抬筆瞬間，將更改后的數據更新至內存，整個圖形移動的過程結束。

3.4 數據存儲

存儲數據的載體，均選用了可變的二維數組，以最小的內存代價來實現對圖形的存儲。N表示目前已繪制的圖形總數，當新的圖形被繪制時，數組大小動態改變，確保內存空間的有效利用。

圖8為數據存儲結構圖，其中：tuxid[N]用來標記圖形序號并記錄圖形的繪制順序。tuxcshu1[2，N]至tuxcshu4[2，N]四個數組用來記錄圖形在繪制過程中生成的關鍵點位。tuxcshu5[2，N]和tuxcshu6[2，N]兩個數組用來在抬筆時記錄每個圖形的最小矩形范圍。tuxcshu7[2，N]數組用來為每一個圖形定義一個特征點，在圖形移動時的選定判定使用。

3.5 圖形保存與打開

點擊保存文件即可自動將繪制好的圖形保存至桌面，點擊打開圖標并在文件選擇界面選擇圖片后，通過在指定位置點擊以確定圖片將要呈現在板面上的中心位置，而后移動來調整圖片的大小呈現，從而實現圖片打開功能，以支持的可打開并呈現在板面上的圖片類型包括BMP格式和JPG格式。

通過對圖形保存和打開功能的相互配合使用，較為合適地解決了教師在多個教室反復繪制相同的問題，使教師可以在一次繪制后，多處使用，節約了教師教學時間的同時，也讓優秀教學資源的分享變得更為方便快捷。

4 結束語

看似簡單的基礎教學圖形繪制系統，要想讓其在新興電教設備中加以應用，真正被教師所使用被學生所接受，仍然有許多問題需要解決。一款實用性強的教學圖形繪制系統，在克服傳統黑板繪制圖形煩瑣、耗時、依賴教具等問題的同時，更加速了交互式電子黑板的推廣與應用，推動智慧教室建設以及現代化教學的腳步。

參考文獻：

[1] 李新宇.課堂教學中交互白板的應用層次分析[J].中國電化教育，2005（3）：51-54.

[2] 郭娟.數字圖像在多媒體課件中的應用研究[D].濟南：山東師范大學，2006.

[3] 張曉東，耿南平，許福東.計算機圖形學與計算機繪圖──機械CAD技術的理論（方法）與實踐（二）[J].石油機械，1997，25（7）：50-53.

[4] 吳敏.交互式電子白板系統軟件的設計與實現[D].武漢：華中師范大學，2014.

[5] 李俊杰.基于位圖格式圖形繪制和撤銷的方法研究與實現[D].太原：山西大學，2020.

【通聯編輯：謝媛媛】