CN109635216B - 一种移动终端和浏览器的图片进行同屏批注的方法 - Google Patents

一种移动终端和浏览器的图片进行同屏批注的方法 Download PDF

Info

Publication number
CN109635216B
CN109635216B CN201811428352.1A CN201811428352A CN109635216B CN 109635216 B CN109635216 B CN 109635216B CN 201811428352 A CN201811428352 A CN 201811428352A CN 109635216 B CN109635216 B CN 109635216B
Authority
CN
China
Prior art keywords
browser
screen
height
width
mobile terminal
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201811428352.1A
Other languages
English (en)
Other versions
CN109635216A (zh
Inventor
王政
甘宏干
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Zhejiang Wanpeng Digital Intelligence Technology Co ltd
Original Assignee
Zhejiang Wanpeng Education Science And Technology Stock Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Zhejiang Wanpeng Education Science And Technology Stock Co ltd filed Critical Zhejiang Wanpeng Education Science And Technology Stock Co ltd
Priority to CN201811428352.1A priority Critical patent/CN109635216B/zh
Publication of CN109635216A publication Critical patent/CN109635216A/zh
Application granted granted Critical
Publication of CN109635216B publication Critical patent/CN109635216B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/166—Editing, e.g. inserting or deleting
    • G06F40/169—Annotation, e.g. comment data or footnotes

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)
  • Image Input (AREA)

Abstract

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

Description

一种移动终端和浏览器的图片进行同屏批注的方法
技术领域
本发明属于电子技术领域，尤其是需要进行移动终端和浏览器端进行通信，并且在两端图片的相同位置上进行笔迹描绘的方法。
背景技术
随着计算机和网络的飞速发展，人们生活中越来越离不开软件，教育方面也是如此，尤其是通过移动终端和大屏幕来讲解图片类型资源更加广泛。
目前对于在大屏幕上进行板书，常规方法是通过电容笔直接在大屏幕上进行书写，这样的缺陷是无法解决某些学校使用投影仪的情况，也可以直接用鼠标来批注，可用鼠标显然没有用笔来书写的方便。所以针对这种情况，本发明实现了移动终端和浏览器的同屏批注功能。
发明内容
本发明的目的是针对现有技术的不足，提供一种移动终端和浏览器的图片进行同屏批注的方法。
本发明解决其技术问题所采用的的技术方案包括如下步骤：
步骤一、后台服务器端包含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为当前屏幕宽度和高度。
步骤五、监听手指抬起事件，当手指抬起时，将第i次触摸屏幕的参数i，以及第i次触摸屏幕记录的坐标集合a存到所有笔迹的集合S中；其中i的作用是记录当前的批注是第几笔，可用来撤回等操作。记录存储后，通过http的传输方式，将坐标集合a发送给后台服务器端。
步骤六、浏览器端初始时覆盖有一个透明的canvas(画布)，即步骤三提到的接到命令时初始化的canvas。当浏览器端接收到wpcf通信服务的批注对应的同屏指令和坐标点封装数据后，解析为移动端同屏批注的坐标点数据，此时根据canvas的高度和宽度与移动端坐标点的位置进行处理，即根据初始化时计算的移动端的屏幕高宽比和浏览器端的canvas的高宽比例，算出新的坐标点后调用JavaScript进行描点，最后根据描点进行连接，最终实现移动端批注的同屏复现。
本发明有益效果如下：
通过移动端和浏览器端的交互方式，让用户可以在任何地方进行图片的批注功能，而且通过移动端的拍照功能，可以随时选择图片进行同屏，跟其他的批注方式相比更加的方便快捷，而且根据对移动端的屏幕尺寸和图片尺寸的计算，浏览器端重新解析批注笔迹的坐标点，保证了两端加载的图片为等比例放大或缩小以及批注笔迹不会出现误差。所以本发明在保证了普通批注方式准确性的同时，更加的灵活，方便。
附图说明
图1为本发明流程图。
具体实施方式
下面结合附图和实施例对本发明作具体说明。
如图1所示，一种移动终端和浏览器的图片进行同屏批注的方法，包括如下步骤：
步骤一、后台服务器端包含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为当前屏幕宽度和高度。
步骤五、监听手指抬起事件，当手指抬起时，将第i次触摸屏幕的参数i，以及第i次触摸屏幕记录的坐标集合a存到所有笔迹的集合S中；其中i的作用是记录当前的批注是第几笔，可用来撤回等操作。记录存储后，通过http的传输方式，将坐标集合a发送给后台服务器端。
步骤六、浏览器端初始时覆盖有一个透明的canvas(画布)，即步骤三提到的接到命令时初始化的canvas。当浏览器端接收到wpcf通信服务的批注对应的同屏指令和坐标点封装数据后，解析为移动端同屏批注的坐标点数据，此时根据canvas的高度和宽度与移动端坐标点的位置进行处理，即根据初始化时计算的移动端的屏幕高宽比和浏览器端的canvas的高宽比例，算出新的坐标点后调用JavaScript进行描点，最后根据描点进行连接，最终实现移动端批注的同屏复现。
MotionEvent：触摸事件类型，事件类型就是指MotionEvent对象所代表的动作。
Wpcf：通信服务，采用的Apache的MINA框架为核心进行了二次封装的通信服务。
WebSocket：WebSocket协议支持(在受控环境中运行不受信任的代码的)客户端与(选择加入该代码的通信的)远程主机之间进行全双工通信。用于此的安全模型是Web浏览器常用的基于原始的安全模式。协议包括一个开放的握手以及随后的TCP层上的消息帧。该技术的目标是为基于浏览器的、需要和服务器进行双向通信的(服务器不能依赖于打开多个HTTP连接(例如，使用XMLHttpRequest或<iframe>和长轮询))应用程序提供一种通信机制。
Canvas：Canvas API(画布)是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图(bitmap)。

Claims (1)

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进行描点，最后根据描点进行连接，最终实现移动端批注的同屏复现。
CN201811428352.1A 2018-11-27 2018-11-27 一种移动终端和浏览器的图片进行同屏批注的方法 Active CN109635216B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201811428352.1A CN109635216B (zh) 2018-11-27 2018-11-27 一种移动终端和浏览器的图片进行同屏批注的方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201811428352.1A CN109635216B (zh) 2018-11-27 2018-11-27 一种移动终端和浏览器的图片进行同屏批注的方法

Publications (2)

Publication Number Publication Date
CN109635216A CN109635216A (zh) 2019-04-16
CN109635216B true CN109635216B (zh) 2022-03-08

Family

ID=66069708

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201811428352.1A Active CN109635216B (zh) 2018-11-27 2018-11-27 一种移动终端和浏览器的图片进行同屏批注的方法

Country Status (1)

Country Link
CN (1) CN109635216B (zh)

Families Citing this family (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110072133B (zh) * 2019-04-28 2021-05-14 浙江学海教育科技有限公司 同屏显示方法和系统
CN114546036B (zh) * 2020-11-24 2023-11-24 中国联合网络通信集团有限公司 柔性屏终端及其跌落保护方法和存储介质
CN112559541B (zh) * 2020-12-10 2021-09-28 广州市昊链信息科技股份有限公司 一种单证的审核方法、装置、设备及存储介质
CN116911264B (zh) * 2023-09-12 2023-11-28 中贸促信息技术有限责任公司 一种大型pdf批注方法及装置

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105573702A (zh) * 2015-12-16 2016-05-11 广州视睿电子科技有限公司 远程批注移动、缩放的同步方法与系统
CN106940632A (zh) * 2017-03-06 2017-07-11 锐达互动科技股份有限公司 一种屏幕批注的方法
CN108241480A (zh) * 2018-01-24 2018-07-03 上海哇嗨网络科技有限公司 显示内容的批注方法、显示客户端及投屏客户端

Family Cites Families (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US9773264B2 (en) * 2013-03-26 2017-09-26 Blackberry Limited Method for providing composite user interface controls and an online storefront for same
US10140382B2 (en) * 2013-05-06 2018-11-27 Veeva Systems Inc. System and method for controlling electronic communications
JP6525753B2 (ja) * 2015-06-12 2019-06-05 キヤノン株式会社 表示制御装置、その制御方法、およびプログラム

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105573702A (zh) * 2015-12-16 2016-05-11 广州视睿电子科技有限公司 远程批注移动、缩放的同步方法与系统
CN106940632A (zh) * 2017-03-06 2017-07-11 锐达互动科技股份有限公司 一种屏幕批注的方法
CN108241480A (zh) * 2018-01-24 2018-07-03 上海哇嗨网络科技有限公司 显示内容的批注方法、显示客户端及投屏客户端

Also Published As

Publication number Publication date
CN109635216A (zh) 2019-04-16

Similar Documents

Publication Publication Date Title
CN109635216B (zh) 一种移动终端和浏览器的图片进行同屏批注的方法
US11301200B2 (en) Method of providing annotation track on the content displayed on an interactive whiteboard, computing device and non-transitory readable storage medium
CN100478846C (zh) 提供手势的动态反馈的方法及装置
CN105491414B (zh) 一种图像同步显示方法及装置
CN104158900B (zh) 一种iPad控制课件同步的方法与系统
US10545658B2 (en) Object processing and selection gestures for forming relationships among objects in a collaboration system
CN102164167B (zh) 一种用于远程控制的分类传输方法和系统
CN108874283A (zh) 图片识别方法、移动终端及计算机可读存储介质
CN102637127B (zh) 一种控制鼠标模块的方法及电子设备
CN109085950B (zh) 基于电子白板的多屏互动方法、装置及电子白板
US20150169085A1 (en) Information processing apparatus, program, information processing method, and information processing system
CN104823186B (zh) 经由网络连接的至少两个终端之间的远程呈现的方法
CN108733296B (zh) 书写笔迹的擦除方法、装置和设备
CN105278818B (zh) 一种即时通讯软件中的内容复制方法和装置
CN111078104B (zh) 一种云桌面上的多点触控设备的重定向方法及计算机设备
EP3886449A1 (en) Video file playback method and apparatus, and storage medium
CA2929906A1 (en) System and method of digital ink input
CN111596848A (zh) 一种界面取色方法、装置、设备及存储介质
KR20140086979A (ko) 인터넷 브라우저-기반 원격 사용자 인터페이스 가상 마우스 커서 위치결정 방법
US20160337416A1 (en) System and Method for Digital Ink Input
CN111290722A (zh) 屏幕分享方法、装置、系统、电子设备和存储介质
CN113158619B (zh) 文档处理方法、装置、计算机可读存储介质及计算机设备
CN113391782A (zh) 计算机控制移动终端的方法、系统、电子设备及存储介质
CN107862035A (zh) 会议记录的网络读取方法、装置、智能平板和存储介质
CN113457117B (zh) 游戏中的虚拟单位选取方法及装置、存储介质及电子设备

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
CB02 Change of applicant information

Address after: 12 / F, building 8, No. 19, Jugong Road, Xixing street, Binjiang District, Hangzhou City, Zhejiang Province, 310051

Applicant after: ZHEJIANG WANPENG EDUCATION SCIENCE AND TECHNOLOGY STOCK CO.,LTD.

Address before: Room 1406, Hangzhou e-commerce building, 118 Wensan West Road, Xihu District, Hangzhou City, Zhejiang Province, 310013

Applicant before: ZHEJIANG WANPENG EDUCATION SCIENCE AND TECHNOLOGY STOCK CO.,LTD.

CB02 Change of applicant information
GR01 Patent grant
GR01 Patent grant
CP01 Change in the name or title of a patent holder

Address after: 12 / F, building 8, No. 19, Jugong Road, Xixing street, Binjiang District, Hangzhou City, Zhejiang Province, 310051

Patentee after: Zhejiang Wanpeng Digital Intelligence Technology Co.,Ltd.

Address before: 12 / F, building 8, No. 19, Jugong Road, Xixing street, Binjiang District, Hangzhou City, Zhejiang Province, 310051

Patentee before: ZHEJIANG WANPENG EDUCATION SCIENCE AND TECHNOLOGY STOCK CO.,LTD.

CP01 Change in the name or title of a patent holder