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