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

权利要求书

1.一种移动终端和浏览器的图片进行同屏批注的方法，其特征在于包括如下步骤：

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

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

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

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

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

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

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

GraffityPointpot＝new GraffityPoint( )；

pot.setX(x/width)；

pot.setY(y/height)；

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

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

步骤五、监听手指抬起事件，当手指抬起时，将第i次触摸屏幕的参数i，以及第i次触摸屏幕记录的坐标集合a存到所有笔迹的集合S中；其中i的作用是记录当前的批注是第几笔，可用来撤回操作；记录存储后，通过http的传输方式，将坐标集合a发送给后台服务器端；

步骤六、浏览器端初始时覆盖有一个透明的canvas，即步骤三提到的接到命令时初始化的canvas；当浏览器端接收到wpcf通信服务的批注对应的同屏指令和坐标点封装数据后，解析为移动端同屏批注的坐标点数据，此时根据canvas的高度和宽度与移动端坐标点的位置进行处理，即根据初始化时计算的移动端的屏幕高宽比和浏览器端的canvas的高宽比例，算出新的坐标点后调用JavaScript进行描点，最后根据描点进行连接，最终实现移动端批注的同屏复现。