[发明专利]一种移动终端和浏览器的图片进行同屏批注的方法

说明书

本发明公开了一种移动终端和浏览器进行图片同屏并批注的方法。本发明步骤如下:(1).通过wpcf服务将移动终端和浏览器端建立连接；(2).移动端像浏览器端发送图片同屏指令和图片地址；(3).浏览器端加载图片，并计算canvas的宽高；(4).在移动终端进行绘画时，将用户手指落下到抬起所经过的坐标保存为一个集合，发送给浏览器端；(5).浏览器端解析数据，根据canvas的高度和宽度与移动端坐标点的位置进行处理，根据初始化时计算的高宽与高宽比算出新的坐标点后调用JavaScript进行描点，最后根据描点进行连接，最终实现移动端批注的同屏复现。本发明在保证了普通批注方式准确性的同时，更加的灵活，方便。

技术领域

本发明属于电子技术领域，尤其是需要进行移动终端和浏览器端进行通信，并且在两端图片的相同位置上进行笔迹描绘的方法。

背景技术

随着计算机和网络的飞速发展，人们生活中越来越离不开软件，教育方面也是如此，尤其是通过移动终端和大屏幕来讲解图片类型资源更加广泛。

目前对于在大屏幕上进行板书，常规方法是通过电容笔直接在大屏幕上进行书写，这样的缺陷是无法解决某些学校使用投影仪的情况，也可以直接用鼠标来批注，可用鼠标显然没有用笔来书写的方便。所以针对这种情况，本发明实现了移动终端和浏览器的同屏批注功能。

发明内容

本发明的目的是针对现有技术的不足，提供一种移动终端和浏览器的图片进行同屏批注的方法。

本发明解决其技术问题所采用的的技术方案包括如下步骤：

步骤一、后台服务器端包含wpcf通信服务，移动端与wpcf创建连接，当移动端发送投屏图片功能时，移动端通过wpcf发送投屏图片的指定命令码以及图片的url数据。

步骤二、浏览器端与wpcf通信服务使用WebSocket进行数据交互，从而实现浏览器端与后台服务器端的交互。当wpcf收到移动端的同屏指令以及封装的坐标点后，将数据转发给浏览器端。

2-1.浏览器端在网站点击本地课堂进入同屏功能；

2-2.进入同屏功能后，浏览器端启动JavaScript脚本创建WebSocket与后台服务器端通信，后台服务器端将同屏数据传递给浏览器端。

步骤三、浏览器端接收到同屏指令后，根据需要传递图片的url加载该传递图片，此时需要计算出传递图片的高度与宽度，然后判断传递图片是宽度先触碰到边缘还是高度先触碰到边缘，以此来确定浏览器端的canvas(画布)的高和宽，从而完成初始化。

此时移动端的屏幕高宽比和浏览器端的canvas的高宽比例相等。

步骤四、在移动终端，当手指触摸到屏幕时，创建一个集合S，记录下当前是第几次触摸屏幕和当前点坐标，并且在手指移动时将经过的坐标点也记录下来，根据不同屏幕的尺寸计算后添加到集合S中；移动过程中的坐标点根据不同屏幕的尺寸计算过程如下：

GraffityPoint pot＝new GraffityPoint( )；

pot.setX(x/width)；

pot.setY(y/height)；

其中，GraffityPoint表示现有的一种表示坐标点的数据格式；

Pot表示GraffityPoint类型的数据格式的变量；pot.setX表示给变量pot的横坐标赋值；pot.setY表示给变量pot的纵坐标赋值；(x，y)表示当前触摸的坐标点，通过MotionEvent获取当前手指经过的坐标点；width和height为当前屏幕宽度和高度。