基于HTML5的凸轮廓线图解法App教学软件研究

武照云 鱼鹏飞 朱红瑜 李广玉 孟逵

摘 要：为了适应教育信息化的发展需求以及解决凸轮廓线图解法设计的教学难题，文章以对心直动尖顶推杆凸轮机构为对象，基于HTML5技术设计并开发了一个凸轮廓线图解法App教学软件。阐述了运用图解法设计凸轮廓线的反转法原理，对基于HTML5的App教学软件设计原理进行了详细论述，包括坐标点的旋转变换与软件设计步骤。通过Cordova平台，将HTML5页面进行编译并生成App。最后通过两个实际案例，对开发的对心直动尖顶推杆凸轮廓线图解法App教学软件的有效性进行了说明。

关键词：机械原理;凸轮廓线;HTML5;图解法

中图分类号：G434       文献标志码：A           文章编号：1673-8454（2019）22-0085-05

一、引言

近年来，我国大力提倡发展教育信息化，陆续发布了《教育信息化“十三五”规划》《教育信息化2.0行动计划》等政策文件，推动教育教学与信息技术的深度融合成为了当前教育教学改革的热点方向[1]。随着在线开放课程、网络学习空间、翻转课堂、智慧教育、移动学习等新型教育模式应用规模的逐渐扩大[2-6]，对教学视频、在线题库等优质数字化教学资源的需求量越来越大，对面向课程知识点的专用教学软件的要求也越来越高。在此新形势下，过去传统的计算机辅助教学（CAI）软件由于技术原因而无法有效地与上述新型教育模式有机结合起来，所以逐渐面临着应用面越来越小， “被弱化”甚至“被淘汰”的局面。因此，采用新技术（尤其是面向移动互联网的信息技术）对CAI软件进行全新设计与升级换代是当前的迫切需求。

《机械原理》是工科院校机械类专业的一门重要专业基础课程，该课程中的“凸轮廓线图解法设计”是一个重要的知识点，也是一个教学难点。只有通过图文并茂并配以动画的方式，才能全面展示凸轮机构中的相对运动原理与反转法绘图步骤，否则学生在学习过程中会遇到很大困难。为了有效解决该问题以及满足现代化的教学需求，本文基于HTML5技术，设计开发了一个凸轮廓线图解法App教学软件，能够在手机端形象生动、清晰直观地展示凸轮廓线图解法的设计步骤，极大地提升了课程的信息化教学水平。

二、反转法设计原理

凸轮的轮廓曲线形状是凸轮机构的关键与核心要素，它直接决定了从动推杆的运动规律输出。根据基本的结构参数与从动推杆的运动规律，设计出满足要求的凸轮轮廓曲线是最常见也是最基本的一项要求。根据设计方式的不同，凸轮廓线的设计方法可分为解析法与图解法，二者各有优缺点。运用图解法设计凸轮廓线主要是依据反转法原理[7]，该原理的操作步骤与流程如图1所示。

依据不同的分类方法，凸轮机构可分为多种类型，如图2所示。在直动推杆凸轮机构中，根据推杆与凸轮回转中心的位置关系，又可分为对心直动与偏置直动两种类型。在上述众多的凸轮机构类型中，对心直动尖顶推杆凸轮机构是最简单同时也是最重要的一种类型，因为它是其他类型凸轮机构设计的基础。基于此，本文选取对心直动尖顶推杆凸轮机构为对象，对其凸轮廓线的图解法演示原理进行研究。

三、基于HTML5的软件设计原理

1.HTML5概述

HTML5是HTML最新的修訂版本，在继承原有HTML部分特征的同时，又新增了很多新的特性：如语义特性、本地存储特性、设备兼容特性、网页多媒体特性等。对于网络应用开发而言，HTML5不再仅是一种标记语言，它为Web开发提供了全新的平台和框架，能够轻松实现类似桌面程序的应用体验。而且，HTML5还具有支持跨平台、自适应网页布局等独特优势[8][9]。

众所周知，目前智能移动终端大多以Android和iOS为主流的操作系统，而且彼此的技术体系差异较大，给移动App的兼容性设计造成了很大麻烦。而HTML5的出现，为跨平台App的应用开发提供了全新的途径。通过HTML5可以制作出同时适用于Android和iOS的跨平台App，还具有兼容性好、速度快、成本低等特点。因此，本文采用HTML5技术对凸轮廓线图解法App软件进行研究与设计。

2.坐标点的旋转变换

在凸轮廓线的反转法设计过程中，将频繁涉及到几何线条的旋转操作，因而坐标点的旋转变换是一个非常重要的基础问题。根据计算机图形学理论可知[10]，如果平面内的一个点以坐标系原点为中心逆时针转过 角，原坐标记为（x，y），旋转后的坐标记为（x'，y'），则有：

利用公式1或公式2可以很方便地得到推杆反转过程中相关几何要素的旋转坐标，是展示凸轮廓线图解法设计步骤的一个重要理论依据[11][12]。

3.凸轮廓线图解法App教学软件的设计

基于HTML5的凸轮廓线图解法App教学软件的设计步骤如下：

（1）步骤一

首先，在HTML5页面中设置若干个标签及标签，用于接收用户输入的设计参数。对心直动尖顶推杆凸轮机构的初始设计参数以及对应的JavaScript变量，如表1所示。

向HTML5页面添加标签，该标签在页面上提供了一个图形的容器，可使用JavaScript在该容器区域内绘制图像[13]。在JavaScript中，先通过getElementById方法获取canvas对象，再调用getContext方法可返回一个对象，该对象提供了很多具体的绘图方法和属性。JavaScript代码如下：

var canvas = document.getElementById（"canvas"）;

var context = canvas.getContext（"2d"）;

（2）步骤2

在canvas绘图区域中，初始坐标系如图3（a）所示。为了绘图更加习惯与方便，需要对该坐标系进行变换，如图3（b）所示。

实现坐标系变换的JavaScript代码如下：

context.translate（200，200）;  //将原点平移到区域中心

context.scale（1，-1）; //变换y轴的正方向（向上）

（3）步骤3

在canvas绘图区域内，调用context对象的moveTo、lineTo、arc、fill等方法，分别绘制x轴、y轴、基圆以及推杆的初始位置。为了使显示效果更好，为每个对象都设置了不同的线条颜色与粗细等属性，如图4所示。

（4）步骤4，划分凸轮运动周期

在凸轮的一个运动周期内，包括推程、远休止、回程和近休止4个阶段，对应的凸轮转角分别为angle1、angle2、angle3和angle4。将初始位置的尖顶推杆末端记为A点，以顺时针反转为例，转过angle2角后，再与原点连线，即为推程段结束边界。以此类推，可逐一得到远休止段、回程段和近休止段的边界线，如图5所示。实现该操作的JavaScript代码如下：

绘制推程段的边界线

varpoint_b=RotatePoint（point_a[0]，point_a[1]，angle1）;

context.moveTo（0，0）;

context.lineTo（point_b[0]，point_b[1]）;

计算点的坐标-顺时针旋转变换

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

由于推杆要满足对心要求，因此推杆在反转过程中，其位置延长线始终通过凸轮回转中心。令初始位置的尖顶推杆最高点为M点，将推杆的初始位置线OM顺时针每隔10°旋转一次，同时推杆末端A点也是顺时针每隔10°旋转一次，就可得到推杆在推程段反转过程中的各个位置线，如图6所示。实现该操作的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

由于推杆在绕凸轮反转的同时，还要按照预期运动规律在导轨内移动，因此需要在推程段的各推杆位置线上标记出推杆末端所处的坐标点。推杆的运动规律种类较多，常见的主要有多项式运动规律（一次、二次、五次等）和三角函数运动规律（正弦加速度、余弦加速度等），为了在程序中方便调用，将每个运动规律中的位移计算函数都写成JavaScript中的Function函数。以余弦加速度运动规律为例，首先通过函数S_yx_t（）计算出第一个反转角10°时的推杆位移s，然后令初始位置的推杆末端A点升高位移s，得到点At，再将At点顺时针旋转10°，在该坐标处描绘一个代表推杆尖顶末端的实心圆点，这样就得到了推杆末端在10°位置线上实际应该所处的坐标点。以此类推，在推程段的所有推桿位置线上都进行标记，如图7所示。实现该操作的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，画远休止段的凸轮廓线

凸轮廓线在远休止段为圆弧曲线，因此以凸轮回转中心（坐标原点）为圆心，以（r0+h）为半径，调用context对象的arc方法直接画圆弧即可（如图9所示）。远休止段的起始位置线与推杆初始位置（y轴正向）的夹角为angle1，所以在以水平向右为x轴正向的坐标系内，远休止段的起始角度应为（-angle1+90°），相应的终止角度为（-angle1-angle2+90°）。实现该操作的JavaScript代码如下：

context.arc（0，0，r0+h，（-angle1+90）*Math.PI/180，（-angle1-angle2+90）*Math.PI/180， true）;

（9）步骤9，画回程段与近休止段的凸轮廓线

回程段的凸轮廓线画法与推程段类似，近休止段的凸轮廓线画法与远休止段类似，以正弦加速度运动规律（回程）为例，最终完整的凸轮廓线如图10所示。

四、App教学软件生成与应用

基于上述实现原理，采用HTML5完成了凸轮廓线图解法教学软件页面与程序代码的设计与开发，然后基于Cordova平台，将其发布成手机端App。Cordova是一个面向移动应用开发的开源框架，它提供了一组与设备相关的API，使得移动应用能够通过JavaScript调用原生的设备功能，并且能够方便地将HTML5页面编译、打包并发布为跨平台App（支持Android、iOS等系统）[14] [15]。Cordova界面是命令行窗口形式，将HTML5页面发布到Android平台的命令是“cordova run android”，如图11所示。

现以两个凸轮廓线设计的具体案例为例，对本文开发的对心直动尖顶推杆凸轮廓线图解法App教学软件的应用效果进行说明。为了更好地体现区别与差异性，在案例1与案例2中，其基圆半径、推杆行程、凸轮运动角以及推杆运动规律等参数各不相同，具体如表2所示，相应的App软件界面及凸轮廓线设计结果如图12（a）、图12（b）所示。

本文以基于HTML5的凸轮廓线图解法App教学软件为对象，研究了基于坐标点旋转变换的实现原理与基于Canvas绘图对象的设计方法。开发的App教学软件能够形象生动地展示出凸轮廓线的形成过程，使用方便，灵活性强，极大地提高了学生的学习效果，进一步丰富了《机械原理》课程的信息化辅助教学手段。

参考文献：

[1]王飞，顾小清，胡梦华，等.教育信息化服务何以满足学校需求——来自学校和企业的调研[J].电化教育研究，2018，39（11）：21-28.

[2]王晓红.高校在线开放课程建设与优化方法研究[J].高教学刊，2018（12）：153-154+157.

[3]张跃东.“网络学习空间”建设机制与应用模式探索[J].中国职业技术教育，2018（4）：56-62.

[4]董浩斌，葛健.“虚拟仪器”课程翻转课堂教学探索[J].教育教学论坛，2018（51）：145-146.

[5]马建军，乜勇.国内智慧教育的研究热点与发展趋势——基于多维尺度和社会网络分析的方法[J].现代教育技术，2018，28（10）：42-48.

[6]张涛.智慧校园背景下移动学习App的应用模式研究[J].中国教育信息化，2018（21）：86-90.

[7]孙桓.机械原理[M].北京：高等教育出版社，2013.

[8]彭灿华，杨呈永，张玉斌.基于HTML5与物联网技术的大数据中心机房智能管理系统[J].实验室研究与探索，2018，37（4）：140-144.

[9]王开宇，赵海博，秦晓梅，等.基于FPGA+HTML5动画的数码管虚拟仿真教学实验设计[J].实验技术与管理，2018，35（8）：119-120+124.

[10]何援军.计算机图形学[M].北京：机械工业出版社，2016.

[11]刁彥飞，王艳飞，李立全.应用反转法及坐标旋转变换设计凸轮廓线及Matlab仿真[J].应用科技，2006（5）：1-3.

[12]郭攀成，安美玲.凸轮廓线设计中的坐标旋转变换[J].兰州工业高等专科学校学报，2003（2）：40-42.

[13]李鑫.基于HTML5的个性化教学系统平台设计与研究[J].自动化应用，2017（11）：37-38+44.

[14]季耀君.基于Apache Cordova的高校门户系统跨平台移动开发框架研究与实现[J].九江学院学报（自然科学版），2018，33（3）：48-51.

[15]毕波，季耀君，许静.基于Apache Cordova的高校学生服务系统移动接口研究与设计[J].赤峰学院学报（自然科学版），2018，34（4）：62-63.

（编辑：鲁利瑞）

杂志排行

1. 1《合作经济与科技》2024年13期

2. 2《婚育与健康》2024年10期

3. 3《思维与智慧·上半月》2024年7期

4. 4《中国商人》2024年7期

5. 5《读者》2024年13期

6. 6《师道·教研》2024年6期

7. 7《中国对外贸易》2024年6期

8. 8《电气技术与经济》2024年4期

9. 9《吉林医学》2024年3期

10. 10《山西化工》2024年2期

关于参考网