基于HTML5的凸轮廓线图解法App教学软件研究.docx
《基于HTML5的凸轮廓线图解法App教学软件研究.docx》由会员分享,可在线阅读,更多相关《基于HTML5的凸轮廓线图解法App教学软件研究.docx(11页珍藏版)》请在咨信网上搜索。
1、 基于HTML5的凸轮廓线图解法App教学软件研究 武照云 鱼鹏飞 朱红瑜 李广玉 孟逵摘 要:为了适应教育信息化的发展需求以及解决凸轮廓线图解法设计的教学难题,文章以对心直动尖顶推杆凸轮机构为对象,基于HTML5技术设计并开发了一个凸轮廓线图解法App教学软件。阐述了运用图解法设计凸轮廓线的反转法原理,对基于HTML5的App教学软件设计原理进行了详细论述,包括坐标点的旋转变换与软件设计步骤。通过Cordova平台,将HTML5页面进行编译并生成App。最后通过两个实际案例,对开发的对心直动尖顶推杆凸轮廓线图解法App教学软件的有效性进行了说明。关键词:机械原理;凸轮廓线;HTML5;图解法
2、:G434 文献标志码:A :1673-8454(2019)22-0085-05一、引言近年来,我国大力提倡发展教育信息化,陆续发布了教育信息化“十三五”规划教育信息化2.0行动计划等政策文件,推动教育教学与信息技术的深度融合成为了当前教育教学改革的热点方向1。随着在线开放课程、网络学习空间、翻转课堂、智慧教育、移动学习等新型教育模式应用规模的逐渐扩大2-6,对教学视频、在线题库等优质数字化教学资源的需求量越来越大,对面向课程知识点的专用教学软件的要求也越来越高。在此新形势下,过去传统的计算机辅助教学(CAI)软件由于技术原因而无法有效地与上述新型教育模式有机结合起来,所以逐渐面临着应用面越来
3、越小, “被弱化”甚至“被淘汰”的局面。因此,采用新技术(尤其是面向移动互联网的信息技术)对CAI软件进行全新设计与升级换代是当前的迫切需求。机械原理是工科院校机械类专业的一门重要专业基础课程,该课程中的“凸轮廓线图解法设计”是一个重要的知识点,也是一个教学难点。只有通过图文并茂并配以动画的方式,才能全面展示凸轮机构中的相对运动原理与反转法绘图步骤,否则学生在学习过程中会遇到很大困难。为了有效解决该问题以及满足现代化的教学需求,本文基于HTML5技术,设计开发了一个凸轮廓线图解法App教学软件,能够在手机端形象生动、清晰直观地展示凸轮廓线图解法的设计步骤,极大地提升了课程的信息化教学水平。二、
4、反转法设计原理凸轮的轮廓曲线形状是凸轮机构的关键与核心要素,它直接决定了从动推杆的运动规律输出。根据基本的结构参数与从动推杆的运动规律,设计出满足要求的凸轮轮廓曲线是最常见也是最基本的一项要求。根据设计方式的不同,凸轮廓线的设计方法可分为解析法与图解法,二者各有优缺点。运用图解法设计凸轮廓线主要是依据反转法原理7,该原理的操作步骤与流程如图1所示。依据不同的分类方法,凸轮机构可分为多种类型,如图2所示。在直动推杆凸轮机构中,根据推杆与凸轮回转中心的位置关系,又可分为对心直动与偏置直动两种类型。在上述众多的凸轮机构类型中,对心直动尖顶推杆凸轮机构是最简单同时也是最重要的一种类型,因为它是其他类型
5、凸轮机构设计的基础。基于此,本文选取对心直动尖顶推杆凸轮机构为对象,对其凸轮廓线的图解法演示原理进行研究。三、基于HTML5的软件设计原理1.HTML5概述HTML5是HTML最新的修訂版本,在继承原有HTML部分特征的同时,又新增了很多新的特性:如语义特性、本地存储特性、设备兼容特性、网页多媒体特性等。对于网络应用开发而言,HTML5不再仅是一种标记语言,它为Web开发提供了全新的平台和框架,能够轻松实现类似桌面程序的应用体验。而且,HTML5还具有支持跨平台、自适应网页布局等独特优势89。众所周知,目前智能移动终端大多以Android和iOS为主流的操作系统,而且彼此的技术体系差异较大,给
6、移动App的兼容性设计造成了很大麻烦。而HTML5的出现,为跨平台App的应用开发提供了全新的途径。通过HTML5可以制作出同时适用于Android和iOS的跨平台App,还具有兼容性好、速度快、成本低等特点。因此,本文采用HTML5技术对凸轮廓线图解法App软件进行研究与设计。2.坐标点的旋转变换在凸轮廓线的反转法设计过程中,将频繁涉及到几何线条的旋转操作,因而坐标点的旋转变换是一个非常重要的基础问题。根据计算机图形学理论可知10,如果平面内的一个点以坐标系原点为中心逆时针转过 角,原坐标记为(x,y),旋转后的坐标记为(x,y),则有:利用公式1或公式2可以很方便地得到推杆反转过程中相关几
7、何要素的旋转坐标,是展示凸轮廓线图解法设计步骤的一个重要理论依据1112。3.凸轮廓线图解法App教学软件的设计基于HTML5的凸轮廓线图解法App教学软件的设计步骤如下:(1)步骤一首先,在HTML5页面中设置若干个标签及标签,该标签在页面上提供了一个图形的容器,可使用JavaScript在该容器区域内绘制图像13。在JavaScript中,先通过getElementById方法获取canvas对象,再调用getContext方法可返回一个对象,该对象提供了很多具体的绘图方法和属性。JavaScript代码如下:var canvas = document.getElementById(can
8、vas);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轴、基圆以及推杆的初始位置。为了使显示效果更好,为每个对象都设置
9、了不同的线条颜色与粗细等属性,如图4所示。(4)步骤4,划分凸轮运动周期在凸轮的一个运动周期内,包括推程、远休止、回程和近休止4个阶段,对应的凸轮转角分别为angle1、angle2、angle3和angle4。将初始位置的尖顶推杆末端记为A点,以顺时针反转为例,转过angle2角后,再与原点连线,即为推程段结束边界。以此类推,可逐一得到远休止段、回程段和近休止段的边界线,如图5所示。实现该操作的JavaScript代码如下:绘制推程段的边界线varpoint_b=RotatePoint(point_a0,point_a1,angle1);context.moveTo(0,0);context
10、.lineTo(point_b0,point_b1);计算点的坐标-顺时针旋转变换functionRotatePoint(x,y,angle)var Points = new Array(2);Points0=x*Math.cos(angle*Math.PI/180)+y*Math.sin(angle*Math.PI/180);Points1=-x*Math.sin(angle*Math.PI/180)+y*Math.cos(angle*Math.PI/180);return Points;(5)步骤5由于推杆要满足对心要求,因此推杆在反转过程中,其位置延长线始终通过凸轮回转中心。令初始位置的
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 基于 HTML5 凸轮 线图 解法 App 教学 软件 研究
1、咨信平台为文档C2C交易模式,即用户上传的文档直接被用户下载,收益归上传人(含作者)所有;本站仅是提供信息存储空间和展示预览,仅对用户上传内容的表现方式做保护处理,对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿,我们不确定上传用户享有完全著作权,根据《信息网络传播权保护条例》,如果侵犯了您的版权、权益或隐私,请联系我们,核实后会尽快下架及时删除,并可随时和客服了解处理情况,尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确),网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据,平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺,下载前须认真查看,确认无误后再购买,务必慎重购买;若有违法违纪将进行移交司法处理,若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传,付费前请自行鉴别,如您付费,意味着您已接受本站规则且自行承担风险,本站不进行额外附加服务,虚拟产品一经售出概不退款(未进行购买下载可退充值款),文档一经付费(服务费)、不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印,是因预览和防盗链等技术需要对页面进行转换压缩成图而已,我们并不对上传的文档进行任何编辑或修改,文档下载后都不会有水印标识(原文档上传前个别存留的除外),下载后原文更清晰;试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓;PPT和DOC文档可被视为“模板”,允许上传人保留章节、目录结构的情况下删减部份的内容;PDF文档不管是原文档转换或图片扫描而得,本站不作要求视为允许,下载前自行私信或留言给上传者【快乐****生活】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用;网站提供的党政主题相关内容(国旗、国徽、党徽--等)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
6、文档遇到问题,请及时私信或留言给本站上传会员【快乐****生活】,需本站解决可联系【 微信客服】、【 QQ客服】,若有其他问题请点击或扫码反馈【 服务填表】;文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“【 版权申诉】”(推荐),意见反馈和侵权处理邮箱:1219186828@qq.com;也可以拔打客服电话:4008-655-100;投诉/维权电话:4009-655-100。