基于HTML5的凸輪廓線圖解法App教學軟件研究
2019-12-06 06:33:25武照云魚鵬飛朱紅瑜李廣玉孟逵
中國教育信息化·基礎教育 2019年11期
武照云 魚鵬飛 朱紅瑜 李廣玉 孟逵
摘 要：為了適應教育信息化的發(fā)展需求以及解決凸輪廓線圖解法設計的教學難題，文章以對心直動尖頂推桿凸輪機構為對象，基于HTML5技術設計并開發(fā)了一個凸輪廓線圖解法App教學軟件。闡述了運用圖解法設計凸輪廓線的反轉(zhuǎn)法原理，對基于HTML5的App教學軟件設計原理進行了詳細論述，包括坐標點的旋轉(zhuǎn)變換與軟件設計步驟。通過Cordova平臺，將HTML5頁面進行編譯并生成App。最后通過兩個實際案例，對開發(fā)的對心直動尖頂推桿凸輪廓線圖解法App教學軟件的有效性進行了說明。
關鍵詞：機械原理;凸輪廓線;HTML5;圖解法
中圖分類號：G434 ? ? ? 文獻標志碼：A ? ? ? ? ? 文章編號：1673-8454（2019）22-0085-05
一、引言
近年來，我國大力提倡發(fā)展教育信息化，陸續(xù)發(fā)布了《教育信息化“十三五”規(guī)劃》《教育信息化2.0行動計劃》等政策文件，推動教育教學與信息技術的深度融合成為了當前教育教學改革的熱點方向[1]。隨著在線開放課程、網(wǎng)絡學習空間、翻轉(zhuǎn)課堂、智慧教育、移動學習等新型教育模式應用規(guī)模的逐漸擴大[2-6]，對教學視頻、在線題庫等優(yōu)質(zhì)數(shù)字化教學資源的需求量越來越大，對面向課程知識點的專用教學軟件的要求也越來越高。在此新形勢下，過去傳統(tǒng)的計算機輔助教學（CAI）軟件由于技術原因而無法有效地與上述新型教育模式有機結合起來，所以逐漸面臨著應用面越來越小， “被弱化”甚至“被淘汰”的局面。因此，采用新技術（尤其是面向移動互聯(lián)網(wǎng)的信息技術）對CAI軟件進行全新設計與升級換代是當前的迫切需求。
《機械原理》是工科院校機械類專業(yè)的一門重要專業(yè)基礎課程，該課程中的“凸輪廓線圖解法設計”是一個重要的知識點，也是一個教學難點。只有通過圖文并茂并配以動畫的方式，才能全面展示凸輪機構中的相對運動原理與反轉(zhuǎn)法繪圖步驟，否則學生在學習過程中會遇到很大困難。為了有效解決該問題以及滿足現(xiàn)代化的教學需求，本文基于HTML5技術，設計開發(fā)了一個凸輪廓線圖解法App教學軟件，能夠在手機端形象生動、清晰直觀地展示凸輪廓線圖解法的設計步驟，極大地提升了課程的信息化教學水平。
二、反轉(zhuǎn)法設計原理
凸輪的輪廓曲線形狀是凸輪機構的關鍵與核心要素，它直接決定了從動推桿的運動規(guī)律輸出。根據(jù)基本的結構參數(shù)與從動推桿的運動規(guī)律，設計出滿足要求的凸輪輪廓曲線是最常見也是最基本的一項要求。根據(jù)設計方式的不同，凸輪廓線的設計方法可分為解析法與圖解法，二者各有優(yōu)缺點。運用圖解法設計凸輪廓線主要是依據(jù)反轉(zhuǎn)法原理[7]，該原理的操作步驟與流程如圖1所示。
依據(jù)不同的分類方法，凸輪機構可分為多種類型，如圖2所示。在直動推桿凸輪機構中，根據(jù)推桿與凸輪回轉(zhuǎn)中心的位置關系，又可分為對心直動與偏置直動兩種類型。在上述眾多的凸輪機構類型中，對心直動尖頂推桿凸輪機構是最簡單同時也是最重要的一種類型，因為它是其他類型凸輪機構設計的基礎?；诖耍疚倪x取對心直動尖頂推桿凸輪機構為對象，對其凸輪廓線的圖解法演示原理進行研究。
三、基于HTML5的軟件設計原理
1.HTML5概述
HTML5是HTML最新的修訂版本，在繼承原有HTML部分特征的同時，又新增了很多新的特性：如語義特性、本地存儲特性、設備兼容特性、網(wǎng)頁多媒體特性等。對于網(wǎng)絡應用開發(fā)而言，HTML5不再僅是一種標記語言，它為Web開發(fā)提供了全新的平臺和框架，能夠輕松實現(xiàn)類似桌面程序的應用體驗。而且，HTML5還具有支持跨平臺、自適應網(wǎng)頁布局等獨特優(yōu)勢[8][9]。
眾所周知，目前智能移動終端大多以Android和iOS為主流的操作系統(tǒng)，而且彼此的技術體系差異較大，給移動App的兼容性設計造成了很大麻煩。而HTML5的出現(xiàn)，為跨平臺App的應用開發(fā)提供了全新的途徑。通過HTML5可以制作出同時適用于Android和iOS的跨平臺App，還具有兼容性好、速度快、成本低等特點。因此，本文采用HTML5技術對凸輪廓線圖解法App軟件進行研究與設計。
2.坐標點的旋轉(zhuǎn)變換
在凸輪廓線的反轉(zhuǎn)法設計過程中，將頻繁涉及到幾何線條的旋轉(zhuǎn)操作，因而坐標點的旋轉(zhuǎn)變換是一個非常重要的基礎問題。根據(jù)計算機圖形學理論可知[10]，如果平面內(nèi)的一個點以坐標系原點為中心逆時針轉(zhuǎn)過 角，原坐標記為（x，y），旋轉(zhuǎn)后的坐標記為（x'，y'），則有：
利用公式1或公式2可以很方便地得到推桿反轉(zhuǎn)過程中相關幾何要素的旋轉(zhuǎn)坐標，是展示凸輪廓線圖解法設計步驟的一個重要理論依據(jù)[11][12]。
3.凸輪廓線圖解法App教學軟件的設計
基于HTML5的凸輪廓線圖解法App教學軟件的設計步驟如下：
（1）步驟一
首先，在HTML5頁面中設置若干個標簽及
向HTML5頁面添加
var canvas = document.getElementById（"canvas"）;
var context = canvas.getContext（"2d"）;
（2）步驟2
在canvas繪圖區(qū)域中，初始坐標系如圖3（a）所示。為了繪圖更加習慣與方便，需要對該坐標系進行變換，如圖3（b）所示。
實現(xiàn)坐標系變換的JavaScript代碼如下：
context.translate（200，200）; ?//將原點平移到區(qū)域中心
context.scale（1，-1）; //變換y軸的正方向（向上）
（3）步驟3
在canvas繪圖區(qū)域內(nèi)，調(diào)用context對象的moveTo、lineTo、arc、fill等方法，分別繪制x軸、y軸、基圓以及推桿的初始位置。為了使顯示效果更好，為每個對象都設置了不同的線條顏色與粗細等屬性，如圖4所示。
（4）步驟4，劃分凸輪運動周期
在凸輪的一個運動周期內(nèi)，包括推程、遠休止、回程和近休止4個階段，對應的凸輪轉(zhuǎn)角分別為angle1、angle2、angle3和angle4。將初始位置的尖頂推桿末端記為A點，以順時針反轉(zhuǎn)為例，轉(zhuǎn)過angle2角后，再與原點連線，即為推程段結束邊界。以此類推，可逐一得到遠休止段、回程段和近休止段的邊界線，如圖5所示。實現(xiàn)該操作的JavaScript代碼如下：
繪制推程段的邊界線
varpoint_b=RotatePoint（point_a[0]，point_a[1]，angle1）;
context.moveTo（0，0）;
context.lineTo（point_b[0]，point_b[1]）;
計算點的坐標-順時針旋轉(zhuǎn)變換
functionRotatePoint（x，y，angle）
{var Points = new Array（2）;
Points[0]=x*Math.cos（angle*Math.PI/180）+y*Math.sin（angle*Math.PI/180）;
Points[1]=-x*Math.sin（angle*Math.PI/180）+y*Math.cos（angle*Math.PI/180）;
return Points;}
（5）步驟5
由于推桿要滿足對心要求，因此推桿在反轉(zhuǎn)過程中，其位置延長線始終通過凸輪回轉(zhuǎn)中心。令初始位置的尖頂推桿最高點為M點，將推桿的初始位置線OM順時針每隔10°旋轉(zhuǎn)一次，同時推桿末端A點也是順時針每隔10°旋轉(zhuǎn)一次，就可得到推桿在推程段反轉(zhuǎn)過程中的各個位置線，如圖6所示。實現(xiàn)該操作的JavaScript代碼如下：
for （var i = 10; i <= angle1; i = i + 10）
{varpoint_mi=RotatePoint（point_m[0]，point_m[1]，i）;
context.moveTo（0，0）;
context.lineTo（point_mi[0]，point_mi[1]）;
varpoint_ai=RotatePoint（point_a[0]，point_a[1]，i）;
context.moveTo（point_ai[0]，point_ai[1]）;
context.arc（point_ai[0]，point_ai[1]，2.5，0，2*Math.PI， true）;
context.fillStyle="red";
context.fill（）;}
（6）步驟6
由于推桿在繞凸輪反轉(zhuǎn)的同時，還要按照預期運動規(guī)律在導軌內(nèi)移動，因此需要在推程段的各推桿位置線上標記出推桿末端所處的坐標點。推桿的運動規(guī)律種類較多，常見的主要有多項式運動規(guī)律（一次、二次、五次等）和三角函數(shù)運動規(guī)律（正弦加速度、余弦加速度等），為了在程序中方便調(diào)用，將每個運動規(guī)律中的位移計算函數(shù)都寫成JavaScript中的Function函數(shù)。以余弦加速度運動規(guī)律為例，首先通過函數(shù)S_yx_t（）計算出第一個反轉(zhuǎn)角10°時的推桿位移s，然后令初始位置的推桿末端A點升高位移s，得到點At，再將At點順時針旋轉(zhuǎn)10°，在該坐標處描繪一個代表推桿尖頂末端的實心圓點，這樣就得到了推桿末端在10°位置線上實際應該所處的坐標點。以此類推，在推程段的所有推桿位置線上都進行標記，如圖7所示。實現(xiàn)該操作的JavaScript代碼如下：
for （var i = 10; i <= angle1; i = i + 10）
{var s=S_yx_t（i）;
varpoint_at=new Array（point_a[0]，point_a[1]+s）;
varpoint_ati=RotatePoint（point_at[0]，point_at[1]，i）;
context.moveTo（point_ati[0]，point_ati[1]）;
context.arc（point_ati[0]，point_ati[1]，3，0，2*Math.PI， true）;
context.fillStyle="red";
context.fill（）;}
（7）步驟7，畫推程段的凸輪廓線
在上述步驟中，推桿尖頂末端每隔10°的分布位置過于稀疏，不利于描點作圖。因此，按照步驟6的操作方法，每隔1°重新計算推桿尖頂末端的坐標點并連線，就可以得到相對比較平滑精確的凸輪廓線，如圖8所示。
（8）步驟8，畫遠休止段的凸輪廓線
凸輪廓線在遠休止段為圓弧曲線，因此以凸輪回轉(zhuǎn)中心（坐標原點）為圓心，以（r0+h）為半徑，調(diào)用context對象的arc方法直接畫圓弧即可（如圖9所示）。遠休止段的起始位置線與推桿初始位置（y軸正向）的夾角為angle1，所以在以水平向右為x軸正向的坐標系內(nèi)，遠休止段的起始角度應為（-angle1+90°），相應的終止角度為（-angle1-angle2+90°）。實現(xiàn)該操作的JavaScript代碼如下：
context.arc（0，0，r0+h，（-angle1+90）*Math.PI/180，（-angle1-angle2+90）*Math.PI/180， true）;
（9）步驟9，畫回程段與近休止段的凸輪廓線
回程段的凸輪廓線畫法與推程段類似，近休止段的凸輪廓線畫法與遠休止段類似，以正弦加速度運動規(guī)律（回程）為例，最終完整的凸輪廓線如圖10所示。
四、App教學軟件生成與應用
基于上述實現(xiàn)原理，采用HTML5完成了凸輪廓線圖解法教學軟件頁面與程序代碼的設計與開發(fā)，然后基于Cordova平臺，將其發(fā)布成手機端App。Cordova是一個面向移動應用開發(fā)的開源框架，它提供了一組與設備相關的API，使得移動應用能夠通過JavaScript調(diào)用原生的設備功能，并且能夠方便地將HTML5頁面編譯、打包并發(fā)布為跨平臺App（支持Android、iOS等系統(tǒng)）[14] [15]。Cordova界面是命令行窗口形式，將HTML5頁面發(fā)布到Android平臺的命令是“cordova run android”，如圖11所示。
現(xiàn)以兩個凸輪廓線設計的具體案例為例，對本文開發(fā)的對心直動尖頂推桿凸輪廓線圖解法App教學軟件的應用效果進行說明。為了更好地體現(xiàn)區(qū)別與差異性，在案例1與案例2中，其基圓半徑、推桿行程、凸輪運動角以及推桿運動規(guī)律等參數(shù)各不相同，具體如表2所示，相應的App軟件界面及凸輪廓線設計結果如圖12（a）、圖12（b）所示。
本文以基于HTML5的凸輪廓線圖解法App教學軟件為對象，研究了基于坐標點旋轉(zhuǎn)變換的實現(xiàn)原理與基于Canvas繪圖對象的設計方法。開發(fā)的App教學軟件能夠形象生動地展示出凸輪廓線的形成過程，使用方便，靈活性強，極大地提高了學生的學習效果，進一步豐富了《機械原理》課程的信息化輔助教學手段。
參考文獻：
[1]王飛，顧小清，胡夢華，等.教育信息化服務何以滿足學校需求——來自學校和企業(yè)的調(diào)研[J].電化教育研究，2018，39（11）：21-28.
[2]王曉紅.高校在線開放課程建設與優(yōu)化方法研究[J].高教學刊，2018（12）：153-154+157.
[3]張躍東.“網(wǎng)絡學習空間”建設機制與應用模式探索[J].中國職業(yè)技術教育，2018（4）：56-62.
[4]董浩斌，葛健.“虛擬儀器”課程翻轉(zhuǎn)課堂教學探索[J].教育教學論壇，2018（51）：145-146.
[5]馬建軍，乜勇.國內(nèi)智慧教育的研究熱點與發(fā)展趨勢——基于多維尺度和社會網(wǎng)絡分析的方法[J].現(xiàn)代教育技術，2018，28（10）：42-48.
[6]張濤.智慧校園背景下移動學習App的應用模式研究[J].中國教育信息化，2018（21）：86-90.
[7]孫桓.機械原理[M].北京：高等教育出版社，2013.
[8]彭燦華，楊呈永，張玉斌.基于HTML5與物聯(lián)網(wǎng)技術的大數(shù)據(jù)中心機房智能管理系統(tǒng)[J].實驗室研究與探索，2018，37（4）：140-144.
[9]王開宇，趙海博，秦曉梅，等.基于FPGA+HTML5動畫的數(shù)碼管虛擬仿真教學實驗設計[J].實驗技術與管理，2018，35（8）：119-120+124.
[10]何援軍.計算機圖形學[M].北京：機械工業(yè)出版社，2016.
[11]刁彥飛，王艷飛，李立全.應用反轉(zhuǎn)法及坐標旋轉(zhuǎn)變換設計凸輪廓線及Matlab仿真[J].應用科技，2006（5）：1-3.
[12]郭攀成，安美玲.凸輪廓線設計中的坐標旋轉(zhuǎn)變換[J].蘭州工業(yè)高等?？茖W校學報，2003（2）：40-42.
[13]李鑫.基于HTML5的個性化教學系統(tǒng)平臺設計與研究[J].自動化應用，2017（11）：37-38+44.
[14]季耀君.基于Apache Cordova的高校門戶系統(tǒng)跨平臺移動開發(fā)框架研究與實現(xiàn)[J].九江學院學報（自然科學版），2018，33（3）：48-51.
[15]畢波，季耀君，許靜.基于Apache Cordova的高校學生服務系統(tǒng)移動接口研究與設計[J].赤峰學院學報（自然科學版），2018，34（4）：62-63.
（編輯：魯利瑞）
猜你喜歡
中國教育信息化(2019年22期)2019-12-20 07:31:26
科技視界(2016年25期)2016-11-25 21:59:39
價值工程(2016年30期)2016-11-24 16:42:50
大學教育(2016年11期)2016-11-16 20:10:54
工程建設與設計(2016年2期)2016-08-22 09:12:48
發(fā)明與創(chuàng)新(2016年5期)2016-08-21 13:42:52
鍛壓裝備與制造技術(2016年3期)2016-06-05 09:36:12
科技視界(2016年7期)2016-04-01 09:06:25
