CN109657171A - 一种基于移动终端和浏览器的网页内容同屏批注方法 - Google Patents

Abstract

本发明公开了一种基于移动终端和浏览器的网页内容同屏批注。发明首先在同一系统下保证各终端等比缩放同屏显示的网页，之后在用户移动端网页页面上层添加一层用于批注涂鸦的绘制图层，在绘制图层上监听绘制操作并存储绘制的笔迹信息，每完成一笔绘制操作，如果绘制的路径满足非误操作规则便将当前存储的信息通过自定义的通信服务发送给服务器端，再由服务器端通过定义的通信服务将信息转发给除这个设备外的其它浏览器端，以实现移动终端和浏览器端网页批注信息同屏显示的操作。本发明通过筛选误操作批注，节约网络资源，改善用户对于批注讲解端的体验。

Description

一种基于移动终端和浏览器的网页内容同屏批注方法

技术领域

本发明属于计算机同屏批注显示领域，涉及一种基于移动终端和浏览器的网页内容同屏批注的方法。

背景技术

随着互联网的发展，人们工作学习生活的方式早已渗透了互联网元素，出现了越来越多的互联网+，例如本发明中涉及到的场景，在网络环境下多人协同办公学习，更多的应用到了我们的日常，在这个场景下少不了网页数据同屏显示的问题，当需要一端对显示的网页进行批注讲解时，需要一种技术实现将批注的数据同屏显示到其它设备的浏览器上，这其中能够准确快速的将批注信息同屏到其它设备上是问题的关键，目前实现这一功能解决办法大致分为两类，第一类是将网页数据转为另外一种文件如图片等，再在转化后的文件上进行批注操作，继而将带有批注信息转化后的文件发送给其它设备上进行同屏显示，这种方法优点是可以准确的将批注信息同屏给其它终端浏览器，但同时由于发送给其它终端的是转化后的文件，包含网页信息数据及批注数据，这其中存在冗余的网页数据信息对传输的带宽要求很高，不适合终端数量较多的情况。另一类是将批注信息与网页数据分离，只传输网页上的批注信息，这种方式传输数据量较小，传输速度快，用户体验比较流畅，但由于不同终端设备的屏幕参数存在差异，在同屏显示批注信息时不能很好的保证显示的准确性，即批注信息在网页上的显示有时会出现变形或是错位，现有技术不能够保证，在同一系统终端数量较多时，准确快速的同屏显示网页批注信息，为了解决现有技术的不足，特提出本发明中所述的解决方案。

发明内容

本发明的目的是针对现有技术的不足，提供一种基于移动终端和浏览器的网页内容同屏批注的方法。

本发明的主要思想是，首先在同一系统下保证各终端等比缩放同屏显示的网页，之后在用户移动端网页页面上层添加一层用于批注涂鸦的绘制图层，在绘制图层上监听其上的绘制操作并存储绘制的笔迹信息，每完成一笔绘制操作，如果绘制的路径满足非误操作规则便将当前存储的信息通过自定义的通信服务发送给服务器端，再由服务器端通过定义的通信服务将信息转发给除这个设备外的其它浏览器端，以实现移动终端和浏览器端网页批注信息同屏显示的操作。

本发明的具体实现步骤如下：

步骤一、创建服务连接即各移动终端与服务器端建立wpcf通信服务；

步骤二、将同屏显示的网页在各移动终端设备浏览器上进行等比例缩放的渲染，并使网页的原点与浏览器的原点重合，以保证在接收同屏批注信息时，批注信息显示在网页上不会产生错位，从根本上保证批注信息显示的准确性。

所述的网页的原点指屏幕左上角的点；

步骤三、在显示的网页上层添加一层与网页大小一致，且与网页重合的透明绘制图层，用于显示或进行批注。

步骤四、对绘制图层设置手指触摸屏幕的监听操作，用于记录批注数据；同时需要筛选误操作批注(这里认为极小范围内的快速批注为误操作)，如果存在误操作的批注，则每次都撤销误操作；如不进行误操作的批注筛选，则向各终端传输批注数据的次数就会增加误操作次数*2，造成网络资源浪费的同时对批注讲解端的用户体验也不是很好。

具体实现过程如下：

(1)设批注端显示的网页宽为Width，高为Height；设每笔(每次手指触摸屏幕到抬起即为一笔)批注的笔迹点集序列为P_i，设所有批注操作笔迹序列为S，那么S＝[P₁,P₂,……，P_n]，其中i＝1、2……n，n为自然数。

(2)监听手指点击屏幕事件，获取当下屏幕坐标点Q(x，y),根据当前显示网页的宽高将点Q(x,y)转化为点M₀(x/Width，y/Height),将M₀放置到序列P_i中，M₀即为序列P_i的初始点。

(3)以初始点M₀为原点，同时以屏幕高度的1％为半径设置为误操作范围R，设定是否为误操作批注的判定条件F为真。

(4)监听手指移动事件(这里的移动事件监听是按照系统设定的固定时间间隔，每隔一个时间间隔便触发一次手指移动事件返回当前手指在屏幕中的坐标点)，取当下坐标点按照转化方式进行转换后形成点M_i，将M_i追加到序列P_i中。

(5)将点M_i与误操作范围R进行比对，如点M_i落在误操作范围R外，则将判定条件F设为假，即认为此笔批注是非误操作，后续只需返回步骤(4)即可，直至监听手指抬起事件后跳转到步骤(6)；如M_i落在误操作范围R内，则后续返回到步骤(4)。

(6)监听手指抬起事件，获取当前坐标点按转化方式进行转化设为点M_n,将M_n追加到序列P_i的末尾，作为这笔批注点集的终止点。若此时F为真，则需对M_n与误操作范围R进行判断，如点M_n落在误操作范围R外则将F改为假。

(7)将点集序列P_i追加到批注序列S中，判断判定条件F，如F为真则需判断序列P_i中点的个数，当个数少于10个，则此次批注操作为误操作，即前文提到的范围极小而快的操作，将不会把当前序列S发送给服务器，除此种情况外，认为此次批注操作为非误操作的，则会将序列S交由服务器端分发送给其它各终端设备。

步骤五、各终端设备通过wpcf通信服务接收到批注信息后，按照网页的宽高将接收到的点集S转化为当前屏幕坐标序列，之后调用Js在网页上层的透明绘制图层进行批注信息的复现，以达到同屏批注的功能。

Wpcf：通信服务，采用的Apache的MINA框架为核心进行了二次封装的通信服务。

本发明有益效果如下：

本发明首先在同一系统下保证各终端等比缩放同屏显示的网页，之后在用户移动端网页页面上层添加一层用于批注涂鸦的绘制图层，在绘制图层上监听其上的绘制操作并存储绘制的笔迹信息，每完成一笔绘制操作，如果绘制的路径满足非误操作规则便将当前存储的信息通过自定义的通信服务发送给服务器端，再由服务器端通过定义的通信服务将信息转发给除这个设备外的其它浏览器端，以实现移动终端和浏览器端网页批注信息同屏显示的操作。

本发明通过筛选误操作批注，节约网络资源，改善用户对于批注讲解端的体验。

具体实施方式

下面结合实施方式对本发明作进一步说明。

本发明的主要思想是，首先在同一系统下保证各终端等比缩放同屏显示的网页，之后在用户移动端网页页面上层添加一层用于批注涂鸦的绘制图层，在绘制图层上监听其上的绘制操作并存储绘制的笔迹信息，每完成一笔绘制操作，如果绘制的路径满足非误操作规则便将当前存储的信息通过自定义的通信服务发送给服务器端，再由服务器端通过定义的通信服务将信息转发给除这个设备外的其它浏览器端，以实现移动终端和浏览器端网页批注信息同屏显示的操作。

本发明的具体实现步骤如下：

步骤一、创建服务连接即各移动终端与服务器端建立wpcf通信服务；

步骤二、将同屏显示的网页在各移动终端设备浏览器上进行等比例缩放的渲染，并使网页的原点与浏览器的原点重合，以保证在接收同屏批注信息时，批注信息显示在网页上不会产生错位，从根本上保证批注信息显示的准确性。

所述的网页的原点指屏幕左上角的点；

步骤三、在显示的网页上层添加一层与网页大小一致，且与网页重合的透明绘制图层，用于显示或进行批注。

步骤四、对绘制图层设置手指触摸屏幕的监听操作，用于记录批注数据；同时需要筛选误操作批注(这里认为极小范围内的快速批注为误操作)，如果存在误操作的批注，则每次都撤销误操作；如不进行误操作的批注筛选，则向各终端传输批注数据的次数就会增加误操作次数*2，造成网络资源浪费的同时对批注讲解端的用户体验也不是很好。

具体实现过程如下：

(1)设批注端显示的网页宽为Width，高为Height；设每笔(每次手指触摸屏幕到抬起即为一笔)批注的笔迹点集序列为P_i，设所有批注操作笔迹序列为S，那么S＝[P₁,P₂,……，P_n]，其中i＝1、2……n，n为自然数。

(2)监听手指点击屏幕事件，获取当下屏幕坐标点Q(x，y),根据当前显示网页的宽高将点Q(x,y)转化为点M₀(x/Width，y/Height),将M₀放置到序列P_i中，M₀即为序列P_i的初始点。

(3)以初始点M₀为原点，同时以屏幕高度的1％为半径设置为误操作范围R，设定是否为误操作批注的判定条件F为真。

(4)监听手指移动事件(这里的移动事件监听是按照系统设定的固定时间间隔，每隔一个时间间隔便触发一次手指移动事件返回当前手指在屏幕中的坐标点)，取当下坐标点按照转化方式进行转换后形成点M_i，将M_i追加到序列P_i中。

(5)将点M_i与误操作范围R进行比对，如点M_i落在误操作范围R外，则将判定条件F设为假，即认为此笔批注是非误操作，后续只需返回步骤(4)即可，直至监听手指抬起事件后跳转到步骤(6)；如M_i落在误操作范围R内，则后续返回到步骤(4)。

(6)监听手指抬起事件，获取当前坐标点按转化方式进行转化设为点M_n,将M_n追加到序列P_i的末尾，作为这笔批注点集的终止点。若此时F为真，则需对M_n与误操作范围R进行判断，如点M_n落在误操作范围R外则将F改为假。

(7)将点集序列P_i追加到批注序列S中，判断判定条件F，如F为真则需判断序列P_i中点的个数，当个数少于10个，则此次批注操作为误操作，即前文提到的范围极小而快的操作，将不会把当前序列S发送给服务器，除此种情况外，认为此次批注操作为非误操作的，则会将序列S交由服务器端分发送给其它各终端设备。

步骤五、各终端设备通过wpcf通信服务接收到批注信息后，按照网页的宽高将接收到的点集S转化为当前屏幕坐标序列，之后调用Js在网页上层的透明绘制图层进行批注信息的复现，以达到同屏批注的功能。

Wpcf：通信服务，采用的Apache的MINA框架为核心进行了二次封装的通信服务。

Claims (3)

1.一种基于移动终端和浏览器的网页内容同屏批注方法，其特征在于首先在同一系统下保证各终端等比缩放同屏显示的网页，之后在用户移动端网页页面上层添加一层用于批注涂鸦的绘制图层，在绘制图层上监听绘制操作并存储绘制的笔迹信息，每完成一笔绘制操作，如果绘制的路径满足非误操作规则便将当前存储的信息通过自定义的通信服务发送给服务器端，再由服务器端通过定义的通信服务将信息转发给除这个设备外的其它浏览器端，以实现移动终端和浏览器端网页批注信息同屏显示的操作。

2.根据权利要求1所述的一种基于移动终端和浏览器的网页内容同屏批注方法，其特征在于具体实现如下：

步骤一、创建服务连接即各移动终端与服务器端建立wpcf通信服务；

步骤二、将同屏显示的网页在各移动终端设备浏览器上进行等比例缩放的渲染，并使网页的原点与浏览器的原点重合，以保证在接收同屏批注信息时，批注信息显示在网页上不会产生错位，从根本上保证批注信息显示的准确性；

所述的网页的原点指屏幕左上角的点；

步骤三、在显示的网页上层添加一层与网页大小一致，且与网页重合的透明绘制图层，用于显示或进行批注；

步骤四、对绘制图层设置手指触摸屏幕的监听操作，用于记录批注数据；同时需要筛选误操作批注，如果存在误操作的批注，则每次都撤销误操作；如不进行误操作的批注筛选，则向各终端传输批注数据的次数就会增加误操作次数*2，造成网络资源浪费的同时对批注讲解端的用户体验也不是很好；

步骤五、各终端设备通过wpcf通信服务接收到批注信息后，按照网页的宽高将接收到的点集S转化为当前屏幕坐标序列，之后调用Js在网页上层的透明绘制图层进行批注信息的复现，以达到同屏批注的功能。

3.根据权利要求2所述的一种基于移动终端和浏览器的网页内容同屏批注方法，其特征在于步骤四具体实现如下：

(1)设批注端显示的网页宽为Width，高为Height；设每笔批注的笔迹点集序列为P_i，设所有批注操作笔迹序列为S，那么S＝[P₁,P₂,……，P_n]，其中i＝1、2……n，n为自然数；

每次手指触摸屏幕到抬起即为一笔；

(2)监听手指点击屏幕事件，获取当下屏幕坐标点Q(x，y),根据当前显示网页的宽高将点Q(x,y)转化为点M₀(x/Width，y/Height),将M₀放置到序列P_i中，M₀即为序列P_i的初始点；

(3)以初始点M₀为原点，同时以屏幕高度的1％为半径设置为误操作范围R，设定是否为误操作批注的判定条件F为真；

(4)监听手指移动事件，取当下坐标点按照转化方式进行转换后形成点M_i，将M_i追加到序列P_i中；

所述的的移动事件监听是按照系统设定的固定时间间隔，每隔一个时间间隔便触发一次手指移动事件返回当前手指在屏幕中的坐标点；

(5)将点M_i与误操作范围R进行比对，如点M_i落在误操作范围R外，则将判定条件F设为假，即认为此笔批注是非误操作，后续只需返回步骤(4)即可，直至监听手指抬起事件后跳转到步骤(6)；如M_i落在误操作范围R内，则后续返回到步骤(4)；

(6)监听手指抬起事件，获取当前坐标点按转化方式进行转化设为点M_n,将M_n追加到序列P_i的末尾，作为这笔批注点集的终止点；若此时F为真，则需对M_n与误操作范围R进行判断，如点M_n落在误操作范围R外则将F改为假；

(7)将点集序列P_i追加到批注序列S中，判断判定条件F，如F为真则需判断序列P_i中点的个数，当个数少于10个，则此次批注操作为误操作，即前文提到的范围极小而快的操作，将不会把当前序列S发送给服务器，除此种情况外，认为此次批注操作为非误操作的，则会将序列S交由服务器端分发送给其它各终端设备。