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

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

Info

Publication number
CN109635216A
CN109635216A CN201811428352.1A CN201811428352A CN109635216A CN 109635216 A CN109635216 A CN 109635216A CN 201811428352 A CN201811428352 A CN 201811428352A CN 109635216 A CN109635216 A CN 109635216A
Authority
CN
China
Prior art keywords
screen
mobile terminal
browser end
browser
picture
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.)
Granted
Application number
CN201811428352.1A
Other languages
English (en)
Other versions
CN109635216B (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 Technology 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 Technology Co Ltd filed Critical Zhejiang Wanpeng Education Technology 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

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 true CN109635216A (zh) 2019-04-16
CN109635216B 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)

Cited By (4)

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

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20140297516A1 (en) * 2013-03-26 2014-10-02 Research In Motion Limited Method for providing composite user interface controls and an online storefront for same
CN105573702A (zh) * 2015-12-16 2016-05-11 广州视睿电子科技有限公司 远程批注移动、缩放的同步方法与系统
US20160364073A1 (en) * 2015-06-12 2016-12-15 Canon Kabushiki Kaisha Display controller that controls designation of position on a display screen, method of controlling the same, and storage medium
CN106940632A (zh) * 2017-03-06 2017-07-11 锐达互动科技股份有限公司 一种屏幕批注的方法
US20180157764A1 (en) * 2013-05-06 2018-06-07 Veeva Systems Inc. System and method for controlling electronic communications
CN108241480A (zh) * 2018-01-24 2018-07-03 上海哇嗨网络科技有限公司 显示内容的批注方法、显示客户端及投屏客户端

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20140297516A1 (en) * 2013-03-26 2014-10-02 Research In Motion Limited Method for providing composite user interface controls and an online storefront for same
US20180157764A1 (en) * 2013-05-06 2018-06-07 Veeva Systems Inc. System and method for controlling electronic communications
US20160364073A1 (en) * 2015-06-12 2016-12-15 Canon Kabushiki Kaisha Display controller that controls designation of position on a display screen, method of controlling the same, and storage medium
CN105573702A (zh) * 2015-12-16 2016-05-11 广州视睿电子科技有限公司 远程批注移动、缩放的同步方法与系统
CN106940632A (zh) * 2017-03-06 2017-07-11 锐达互动科技股份有限公司 一种屏幕批注的方法
CN108241480A (zh) * 2018-01-24 2018-07-03 上海哇嗨网络科技有限公司 显示内容的批注方法、显示客户端及投屏客户端

Cited By (7)

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

Also Published As

Publication number Publication date
CN109635216B (zh) 2022-03-08

Similar Documents

Publication Publication Date Title
CN109635216A (zh) 一种移动终端和浏览器的图片进行同屏批注的方法
US12093502B2 (en) Interactive presentation controls
US20210051374A1 (en) Video file playing method and apparatus, and storage medium
CN105493023A (zh) 对表面上的内容的操纵
US20180307406A1 (en) Object processing and selection gestures for forming relationships among objects in a collaboration system
CN108733296B (zh) 书写笔迹的擦除方法、装置和设备
CN111597489B (zh) 一种基于移动端可拖拽自定义表单组件的实现方法及装置
US10776570B2 (en) Supporting digital ink in markup language documents
CN102830930B (zh) 一种键盘按键的处理方法、装置和多媒体终端
CN110941373B (zh) 智能交互平板的交互方法、装置、终端设备和存储介质
CN111580903B (zh) 实时投票方法、装置、终端设备和存储介质
CN107368511A (zh) 一种信息展示方法及装置
CN111078104B (zh) 一种云桌面上的多点触控设备的重定向方法及计算机设备
CN105653510A (zh) 一种电子化作业的批改方法、装置和系统
CN103902056A (zh) 虚拟键盘输入方法、设备及系统
CN105824517A (zh) 一种桌面的实现方法和装置
CN103092518A (zh) 一种基于rdp协议的移动云桌面精确触控方法
CN104598121A (zh) 一种图片缩放方法和装置
CN110908552B (zh) 多窗口操作控制方法、装置、设备及存储介质
CN103092479B (zh) 一种通过右键转换信息的方法、装置和系统
CN107391148A (zh) 视图元素保存方法、装置、电子设备及计算机存储介质
CN103092425B (zh) 一种通过鼠标人机接口实现触摸屏控制的方法
CN115904152A (zh) 一种基于html5的流程图绘制方法、装置、设备及存储介质
CN104866201A (zh) 一种智能设备以及一种触发应用的编辑功能的方法
CN109407892A (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