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

摘要

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

主权项

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进行描点，最后根据描点进行连接，最终实现移动端批注的同屏复现。