一种在线同图协同操作方法、装置及系统

本发明涉及在线协同技术领域，更具体的，涉及一种在线同图协同操作方法、装置 及系统。

进入新世纪以来，人们对互联网技术的需求不断提升，传统的展示方法已无法满 足未来个人和企业的要求。随之也产生了各种用于互联网行业的新技术。在线预览这项技 术的兴起，源于网络的盛行。有别于传统的图形或是动画的表现方法，在线预览技术提供了 包括B2B/B2C、模具技术沟通、商品展现与贩卖、在线教学与娱乐、数字城市、3D景点、虚拟楼 盘，多人社的建立等功能。可以让人们通过鼠标或者键盘，打开网页就能对图形文件进行 预览。

但是，在线预览只能对预先设定好的图形文件进行展示，在线用户只能观看已经 构建好的图形文件，并不能在展示过程中的对在线对图形文件进行同步操作。例如，在模具 生产过程中，技术人员对于模具设计细节的沟通只能局限于面对面通过对模具图形文件进 行操作演示来沟通，无疑为相隔较远的技术人员带来了极大的不便，技术人员需要频繁的 见面沟通，大幅度增加了时间成本和经济成本。

有鉴于此，本发明提供了一种在线同图协同操作方法、装置及系统，当操作方终端 对图形文件进行操作之后，每个接收方终端都可以显示相同的操作结果，便于用户之间的 沟通。

为了实现上述发明目的，本发明提供的具体技术方案如下：

一种在线同图协同操作方法，应用于操作方终端，所述方法包括：

与服务器建立通信连接，将图形文件在预设网页上进行展示，只有所述操作方终 端具有对所述图形文件的操作权限；

利用预设脚本记录操作方对所述图形文件的操作数据；

实时将所述操作数据发送至所述服务器，使所述服务器将所述操作数据转发到每 个所述接收方终端，使每个所述接收方终端根据所述操作数据对所述图形文件进行操作；

当接收到任一所述接收方终端的操作申请时，对所述操作申请进行授权，使发送 所述操作申请的接收方终端具有操作权限并作为当前操作方终端，所述操作方终端不具有 操作权限。

优选的，所述利用预设脚本记录操作方对所述图形文件的操作数据，包括：

利用预设脚本抓取操作方对所述图形文件的操作轨迹，所述操作轨迹包括所述操 作方在所述图形文件上绘制图形或文字、对所述图形文件在各个方向上的滑动，对所述图 形文件进行放大、缩小，以及对所述图形文件进行旋转；

根据所述操作轨迹记录所述操作方对所述图形文件的操作数据；

对所述操作数据进行组装压缩，得到压缩后的操作数据。

优选的，所述操作方终端与每个所述接收方终端的类型包括：计算机、智能手机和 平板电脑。

优选的，所述操作方终端与每个所述接收方终端的操作系统的类型包括：iOS、Mac OS、Android、Windows、Windows Phone和Linux。

优选的，所述操作方对所述图形文件的操作为鼠标操作、光标操作或触屏操作。

优选的，当接收到任一所述接收方的操作申请后，所述方法还包括：

拒绝所述操作申请。

优选的，在所述实时将所述操作数据发送至所述服务器，之后还包括：

向所述服务器发送携带有图形文件标识的操作回放请求，获取与所述图形文件标 识相对应的图形文件的所有操作数据，并使所述服务器将存储的与所述图形文件标识相对 应的图形文件的所有操作数据发送至每个所述接收方终端，实现与所述图形文件标识相对 应的图形文件的所有操作数据的操作结果在所述操作方终端和每个所述接收方终端中预 设网页中的显示。

优选的，在所述将图形文件在预设网页上进行展示，之后所述方法还包括：

在记录操作方对所述图形文件的操作数据的同时，设置操作关键点及所述操作关 键点对应的关键点记录开始时间与关键点记录结束时间，并实时将所述操作关键点及所述 关键点对应的关键点记录开始时间与关键点记录结束时间发送至所述服务器，使所述服务 器对所述操作关键点及所述关键点对应的关键点记录开始时间与关键点记录结束时间进 行存储。

优选的，所述方法还包括：

向所述服务器发送携带有图形文件标识的操作关键点查阅请求，获取所述图形文 件标识对应的每个操作关键点，选择任一所述操作关键点，获取已选择的操作关键点对应 的关键点记录开始时间与关键点记录结束时间之间的所有操作数据，并使所述服务器将已 选择的操作关键点对应的所有操作数据发送至每个所述接收方终端，实现已选择的操作关 键点对应的所有操作数据的操作结果在所述操作方终端和每个所述接收方终端中预设网 页中的显示。

一种在线同图协同操作装置，应用于操作方终端，包括：

展示单元，用于与服务器建立通信连接，将图形文件在预设网页上进行展示，只有 所述操作方终端具有对所述图形文件的操作权限；

记录单元，用于利用预设脚本记录操作方对所述图形文件的操作数据；

发送单元，用于实时将所述操作数据发送至所述服务器，使所述服务器将所述操 作数据转发到每个所述接收方终端，使每个所述接收方终端根据所述操作数据对所述图形 文件进行操作；

授权单元，用于当接收到任一所述接收方终端的操作申请时，对所述操作申请进 行授权，使发送所述操作申请的接收方终端具有操作权限并作为当前操作方终端，所述操 作方终端不具有操作权限。

一种在线同图协同操作方法，应用于接收方终端，所述方法包括：

与服务器建立通信连接，在预设网页上查看图形文件；

当接收到所述服务器转发的操作方对所述图形文件的操作数据时，提取所述操作 数据中图形文件的标识；

判断所述图形文件标识与已查看的图形文件标识是否相同，若是，根据所述操作 数据对所述图形文件进行操作。

一种在线同图协同操作装置，应用于接收方终端，包括：

查看单元，用于与服务器建立通信连接，在预设网页上查看图形文件；

提取单元，用于当接收到所述服务器转发的操作方对所述图形文件的操作数据 时，提取所述操作数据中图形文件的标识；

判断单元，用于判断所述图形文件标识与已查看的图形文件标识是否相同，若是， 根据所述操作数据对所述图形文件进行操作。

一种在线同图协同操作系统，包括：服务器、上述操作方终端，以及上述接收方终 端，所述接收方终端的数量为一个或一个以上。

相对于现有技术，本发明的有益效果如下：

本发明提供的在线同图协同操作方法、装置及系统，操作方终端、一个或一个以上 接收方终端分别与服务器建立通信连接，操作方终端将图形文件在预设网页上进行展示， 并利用预设脚本记录操作方对所述图形文件的操作数据；实时将所述操作数据发送至所述 服务器，使所述服务器将所述操作数据转发到每个所述接收方终端，使每个所述接收方终 端根据所述操作数据对所述图形文件进行操作，实现了多终端同步显示图形文件操作。只 有所述操作方终端具有对所述图形文件的操作权限，当接收方终端向操作方终端发送操作 申请且被授权时，该操作方终端拥有操作权限，实现了对图形文件操作权限的灵活有序切 换，提高了用户体验。

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现 有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本 发明的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据 提供的附图获得其他的附图。

图1为本发明实施例一公开的应用于操作方终端的在线同图协同操作方法流程 图；

图2为本发明实施例二公开的应用于操作方终端的在线同图协同操作装置结构示 意图；

图3为本发明实施例三公开的应用于接收方终端的在线同图协同操作方法流程 图；

图4为本发明实施例四公开的应用于接收方终端的在线同图协同操作装置结构示 意图。

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完 整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于 本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他 实施例，都属于本发明保护的范围。

实施例一

请参阅图1，本实施例公开了一种在线同图协同操作方法，应用于操作方终端，所 述方法包括：

S101：与服务器建立通信连接，将图形文件在预设网页上进行展示，只有所述操作 方终端具有对所述图形文件的操作权限；

具体的，所述图形文件可以为2D图形文件、3D图形文件、CAD图像文件等应用于教 育、工业、设计、装修、汽车、建筑等行业的图形文件。

需要说明的是，操作方终端与一个或一个以上的接收方终端都需与服务器建立通 信连接，具体的，各个终端可以通过websocket或其他技术与服务器进行通信连接。

首先，使用HTML和CSS实现网页的布局，然后，利用Three.js等操作库实现图形文 件在线显示功能，即，将图形文件在预设网页中进行显示，所述预设网页为参与在线同图协 同操作的各个终端都知道的网页。

还需要说明的是，上述在线显示功能并不局限于使用Three.js操作库，还可以使 用包含CAD、Flash、3D MAX、NXUG等3D软件嵌入浏览器中的模拟器或插件实现上述在线显示 功能。

所述操作方终端与每个所述接收方终端的类型包括：计算机、智能手机和平板电 脑等。

所述操作方终端与每个所述接收方终端的操作系统的类型包括：iOS、Mac OS、 Android、Windows、Windows Phone和Linux等。可以理解的是，所述操作方终端与每个所述 接收方终端的类型可以不同，所述操作方终端与每个所述接收方终端的操作系统的类型也 可以不同，实现了跨终端、跨操作系统的在线同图协同操作。

S102：利用预设脚本记录操作方对所述图形文件的操作数据；

具体的，所述预设脚本可以采用JavaScript、Python、PHP等脚本语言。

优选的，S102的具体执行过程如下：

利用预设脚本抓取操作方对所述图形文件的操作轨迹，所述操作轨迹包括所述操 作方在所述图形文件上绘制图形或文字、对所述图形文件在各个方向上的滑动，对所述图 形文件进行放大、缩小，以及对所述图形文件进行旋转；

需要说明的是，操作方终端操作的图形文件可以是具有图形的文件，也可以为空 白文件，操作方可以在图形文件上绘制图形或写文字、对图形文件在各个方向上进行滑动、 对所述图形文件进行放大、缩小，以及对所述图形文件进行旋转等操作。

根据所述操作轨迹记录所述操作方对所述图形文件的操作数据；

对所述操作数据进行组装压缩，得到压缩后的操作数据。

需要说明的是，所述操作方对所述图形文件的操作为鼠标操作、光标操作、触屏笔 操作或触屏操作。

S103：实时将所述操作数据发送至所述服务器，使所述服务器将所述操作数据转 发到每个所述接收方终端，使每个所述接收方终端根据所述操作数据对所述图形文件进行 操作；

可以理解的是，当每个所述接收方终端根据所述操作数据对所述图形文件进行操 作后，每个接收方终端与操作方终端显示的操作结果是相同的，即，实现了多个终端同步显 示图形文件操作结果。

S104：当接收到任一所述接收方终端的操作申请时，对所述操作申请进行授权，使 发送所述操作申请的接收方终端具有操作权限并作为当前操作方终端，所述操作方终端不 具有操作权限。

需要说明的是，当接收到任一所述接收方终端的操作申请后，所述方法还包括：拒 绝所述操作申请。此时，操作方终端仍然具有对图形文件的操作权限。

本实施例提供的在线同图协同操作方法，操作方终端、一个或一个以上接收方终 端分别与服务器建立通信连接，操作方终端将图形文件在预设网页上进行展示，并利用预 设脚本记录操作方对所述图形文件的操作数据；实时将所述操作数据发送至所述服务器， 使所述服务器将所述操作数据转发到每个所述接收方终端，使每个所述接收方终端根据所 述操作数据对所述图形文件进行操作，实现了多终端同步显示图形文件操作。只有所述操 作方终端具有对所述图形文件的操作权限，当接收方终端向操作方终端发送操作申请且被 授权时，该操作方终端拥有操作权限，实现了对图形文件操作权限的灵活有序切换，提高了 用户体验。

作为本实施例的一种优选实施方案，在S103之后，即，在所述实时将所述操作数据 发送至所述服务器，之后还包括：

向所述服务器发送携带有图形文件标识的操作回放请求，获取与所述图形文件标 识相对应的图形文件的所有操作数据，并使所述服务器将存储的与所述图形文件标识相对 应的图形文件的所有操作数据发送至每个所述接收方终端，实现与所述图形文件标识相对 应的图形文件的所有操作数据的操作结果在所述操作方终端和每个所述接收方终端中预 设网页中的显示。

也就是说，在所述操作方终端实时将对图形文件的操作数据发送至所述服务器中 后，所述服务器对所述图形文件的操作数据进行存储，当需要对所述图形文件进行回放时， 可以利用本实施例公开的在线同图协同操作方法的复盘功能，操作方终端向所述服务器发 送操作回放请求，获取所述图形文件的所有操作数据，同时，所述服务器向每个所述接收方 终端发送所述图形文件的所有操作数据，实现与所述图形文件标识相对应的图形文件的所 有操作数据的操作结果在所述操作方终端和每个所述接收方终端中预设网页中的显示。需 要说明的是，所述服务器按照该图形文件中操作数据的存储顺序依次向操作方终端和每个 接收方终端发送该图形文件在各个时间的操作数据。

还需要说明的是，操作方终端可以在对图形文件的操作过程中向服务器发送操作 回放请求，查看当前对该图形文件的所有操作，也可以在对该图形文件的所有操作完成后 向服务器发送操作回放请求，重新查看对该图形文件的整个操作过程。

在上述本实施例公开的在线同图协同操作方法的复盘功能的基础上，在操作方终 端将图形文件在预设网页上进行展示，之后所述方法还包括：

在记录操作方对所述图形文件的操作数据的同时，设置操作关键点及所述操作关 键点对应的关键点记录开始时间与关键点记录结束时间，并实时将所述操作关键点及所述 关键点对应的关键点记录开始时间与关键点记录结束时间发送至所述服务器，使所述服务 器对所述操作关键点及所述关键点对应的关键点记录开始时间与关键点记录结束时间进 行存储。

具体的，操作关键点可以以语音或文字的形式进行记录，每个操作关键点对应关 键点记录开始时间与关键点记录结束时间，也就是说，在服务器中会根据关键点记录开始 时间与关键点记录结束时间，存储每个操作关键点对应的关键点记录开始时间与关键点记 录结束时间之间的所有操作数据。

在此基础上，操作方终端可以向所述服务器发送携带有图形文件标识的操作关键 点查阅请求，获取所述图形文件标识对应的每个操作关键点，选择任一所述操作关键点，获 取已选择的操作关键点对应的关键点记录开始时间与关键点记录结束时间之间的所有操 作数据，并使所述服务器将已选择的操作关键点对应的所有操作数据发送至每个所述接收 方终端，实现已选择的操作关键点对应的所有操作数据的操作结果在所述操作方终端和每 个所述接收方终端中预设网页中的显示。

需要说明的是，此处操作关键点对应的所有操作数据为所述操作关键点对应的关 键点记录开始时间与关键点记录结束时间之间的所有操作数据。

也就是说，操作方终端可以根据实际需要在已获取的图形文件每个操作关键点中 选择一个或一个以上操作关键点，以便对重要操作进行回顾和查阅。

实施例二

请参阅图2，基于实施例一公开的在线同图协同操作方法，本实施例对应公开了一 种在线同图协同操作装置，应用于操作方终端，包括：

展示单101，用于与服务器建立通信连接，将图形文件在预设网页上进行展示，只 有所述操作方终端具有对所述图形文件的操作权限；

记录单元102，用于利用预设脚本记录操作方对所述图形文件的操作数据；

发送单元103，用于实时将所述操作数据发送至所述服务器，使所述服务器将所述 操作数据转发到每个所述接收方终端，使每个所述接收方终端根据所述操作数据对所述图 形文件进行操作；

授权单元104，用于当接收到任一所述接收方终端的操作申请时，对所述操作申请 进行授权，使发送所述操作申请的接收方终端具有操作权限并作为当前操作方终端，所述 操作方终端不具有操作权限。

实施例三

请参阅图3，本实施例公开了一种在线同图协同操作方法，应用于接收方终端，所 述方法包括：

S201：与服务器建立通信连接，在预设网页上查看图形文件；

S202：当接收到所述服务器转发的操作方对所述图形文件的操作数据时，提取所 述操作数据中图形文件的标识；

需要说明的是，每个图形文件都对应一个唯一的标识。

S203：判断所述图形文件标识与已查看的图形文件标识是否相同，若是，根据所述 操作数据对所述图形文件进行操作。

可以理解的是，若所述图形文件标识与已查看的图形文件标识不相同，则不对已 查看的图形文件进行操作。

接收方终端通过判断所述图形文件标识与已查看的图形文件标识是否相同，保证 了参与在线同图协同操作的各个终端中显示的为同一图形文件，避免了服务器发送不同图 形文件操作数据带来的误操作。

实施例四

请参阅图4，基于实施例三公开的在线同图协同操作方法，本实施例对应公开了一 种在线同图协同操作装置，应用于接收方终端，包括：

查看单元201，用于与服务器建立通信连接，在预设网页上查看图形文件；

提取单元202，用于当接收到所述服务器转发的操作方对所述图形文件的操作数 据时，提取所述操作数据中图形文件的标识；

判断单元203，用于判断所述图形文件标识与已查看的图形文件标识是否相同，若 是，根据所述操作数据对所述图形文件进行操作。

实施例五

基于上述所有实施例，本实施例公开了一种在线同图协同操作系统，包括：一个操 作方终端、服务器，以及一个或一个以上接收方终端。

操作方终端、一个或一个以上接收方终端分别与服务器建立通信连接，操作方终 端将图形文件在预设网页上进行展示，并利用预设脚本记录操作方对所述图形文件的操作 数据；实时将所述操作数据发送至所述服务器，使所述服务器将所述操作数据转发到每个 所述接收方终端，使每个所述接收方终端根据所述操作数据对所述图形文件进行操作，实 现了多终端同步显示图形文件操作。只有所述操作方终端具有对所述图形文件的操作权 限，当接收方终端向操作方终端发送操作申请且被授权时，该接收方终端拥有操作权限，实 现了对图形文件操作权限的灵活有序切换，提高了用户体验。

对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本发明。 对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的 一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明 将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一 致的最宽的范围。