The invention discloses a web page content annotation on the same screen based on mobile terminal and browser. The invention first guarantees that each terminal scales and scales the web pages displayed on the same screen in the same system, and then adds a layer of drawing layer to the upper layer of the web pages of the user's mobile terminal to annotate graffiti. It monitors the drawing operation and stores the drawing handwriting information on the drawing layer. Each drawing operation is completed, if the drawing path satisfies the non-error operation rule, the current stored information is passed through. The customized communication service is sent to the server side, and then the server side forwards the information to other browsers besides the device through the defined communication service, so as to realize the operation of displaying the annotation information on the same screen between the mobile terminal and the browser side. The invention saves network resources and improves user's experience of annotation explanation end by screening misoperation annotations.
【技术实现步骤摘要】
一种基于移动终端和浏览器的网页内容同屏批注方法
本专利技术属于计算机同屏批注显示领域,涉及一种基于移动终端和浏览器的网页内容同屏批注的方法。
技术介绍
随着互联网的发展,人们工作学习生活的方式早已渗透了互联网元素,出现了越来越多的互联网+,例如本专利技术中涉及到的场景,在网络环境下多人协同办公学习,更多的应用到了我们的日常,在这个场景下少不了网页数据同屏显示的问题,当需要一端对显示的网页进行批注讲解时,需要一种技术实现将批注的数据同屏显示到其它设备的浏览器上,这其中能够准确快速的将批注信息同屏到其它设备上是问题的关键,目前实现这一功能解决办法大致分为两类,第一类是将网页数据转为另外一种文件如图片等,再在转化后的文件上进行批注操作,继而将带有批注信息转化后的文件发送给其它设备上进行同屏显示,这种方法优点是可以准确的将批注信息同屏给其它终端浏览器,但同时由于发送给其它终端的是转化后的文件,包含网页信息数据及批注数据,这其中存在冗余的网页数据信息对传输的带宽要求很高,不适合终端数量较多的情况。另一类是将批注信息与网页数据分离,只传输网页上的批注信息,这种方式传输数据量较小,传输速度快,用户体验比较流畅,但由于不同终端设备的屏幕参数存在差异,在同屏显示批注信息时不能很好的保证显示的准确性,即批注信息在网页上的显示有时会出现变形或是错位,现有技术不能够保证,在同一系统终端数量较多时,准确快速的同屏显示网页批注信息,为了解决现有技术的不足,特提出本专利技术中所述的解决方案。
技术实现思路
本专利技术的目的是针对现有技术的不足,提供一种基于移动终端和浏览器的网页内容同屏批注 ...
【技术保护点】
1.一种基于移动终端和浏览器的网页内容同屏批注方法,其特征在于首先在同一系统下保证各终端等比缩放同屏显示的网页,之后在用户移动端网页页面上层添加一层用于批注涂鸦的绘制图层,在绘制图层上监听绘制操作并存储绘制的笔迹信息,每完成一笔绘制操作,如果绘制的路径满足非误操作规则便将当前存储的信息通过自定义的通信服务发送给服务器端,再由服务器端通过定义的通信服务将信息转发给除这个设备外的其它浏览器端,以实现移动终端和浏览器端网页批注信息同屏显示的操作。
【技术特征摘要】
1.一种基于移动终端和浏览器的网页内容同屏批注方法,其特征在于首先在同一系统下保证各终端等比缩放同屏显示的网页,之后在用户移动端网页页面上层添加一层用于批注涂鸦的绘制图层,在绘制图层上监听绘制操作并存储绘制的笔迹信息,每完成一笔绘制操作,如果绘制的路径满足非误操作规则便将当前存储的信息通过自定义的通信服务发送给服务器端,再由服务器端通过定义的通信服务将信息转发给除这个设备外的其它浏览器端,以实现移动终端和浏览器端网页批注信息同屏显示的操作。2.根据权利要求1所述的一种基于移动终端和浏览器的网页内容同屏批注方法,其特征在于具体实现如下:步骤一、创建服务连接即各移动终端与服务器端建立wpcf通信服务;步骤二、将同屏显示的网页在各移动终端设备浏览器上进行等比例缩放的渲染,并使网页的原点与浏览器的原点重合,以保证在接收同屏批注信息时,批注信息显示在网页上不会产生错位,从根本上保证批注信息显示的准确性;所述的网页的原点指屏幕左上角的点;步骤三、在显示的网页上层添加一层与网页大小一致,且与网页重合的透明绘制图层,用于显示或进行批注;步骤四、对绘制图层设置手指触摸屏幕的监听操作,用于记录批注数据;同时需要筛选误操作批注,如果存在误操作的批注,则每次都撤销误操作;如不进行误操作的批注筛选,则向各终端传输批注数据的次数就会增加误操作次数*2,造成网络资源浪费的同时对批注讲解端的用户体验也不是很好;步骤五、各终端设备通过wpcf通信服务接收到批注信息后,按照网页的宽高将接收到的点集S转化为当前屏幕坐标序列,之后调用Js在网页上层的透明绘制图层进行批注信息的复现,以达到同屏批注的功能。3.根据权利要求2所述的一种基于移动终端和浏览器的网页内容同屏批注方法,其特征在于步骤四具体实...
【专利技术属性】
技术研发人员:杨洁,应顺帆,
申请(专利权)人:浙江万朋教育科技股份有限公司,
类型:发明
国别省市:浙江,33
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。