CN107885858A - 网络全景图标记方法 - Google Patents

Abstract

本发明提供了一种网络全景图标记方法，客户端从服务端获取全景图并进行显示，用户在客户端显示的全景图上对任意图形图像目标进行标记并得到标记图形，客户端存储标记图形的描述信息，并按一定规则或定时发送所述标记图形的描述信息到服务端，服务端存储客户端信息和所述标记图形的描述信息。标记图形在客户端对全景图进行视点变换、几何变换时，发生相同的变换并呈现相应的显示效果。标记图形既可应用于全景图的显示，也可应用于全景图子图像的显示。不同用户对全景图作出的标记进行分别存储，用户在浏览全景图时可查看该用户作出的标记图形，并可进行增加、删除、显示、隐藏、变换等控制标记图形的操作，以达到较高的用户体验。

Description

网络全景图标记方法

技术领域

本发明涉及互联网领域全景图的标记方法。

背景技术

全景（Panorama）一词源自希腊语，意为都能看见。相比普通的图像，全景图拥有更宽阔的视野范围，并且可以有很强的立体感，允许用户进行360°观看。在互联网技术发展的推动下，全景图的应用技术得到了快速发展。2007年5月谷歌推出了基于全景图技术的“谷歌街景地图”，该产品可以提供水平360度和垂直180度的基于真实街道图像的街道全景浏览。2011年，微软也正式推出了使用全景图技术的街景产品“必应街”， 国内主要提供街景服务的有腾讯街景地图和百度全景地图等。除了城市街景，全景图技术还应用于虚拟旅游、虚拟购物、数字展馆以及全景导航等方面。随着互联网HTML5技术的广泛应用，全景图在互联网的传播不再依赖Flash、SilverLight等插件，用户直接通过支持HTML5技术的客户端与服务端的全景图进行交互，进一步扩展了全景图在互联网上的应用。另一方面，目前已经公开的网络全景技术仅停留在用户浏览这一层面，缺乏用户对全景图进行标记的功能使得用户体验大为下降。例如当用户在全景图上漫游时发现感兴趣的内容时，如果可以图上进行标记以备后续查看，那么将使全景图的用户交互性能大为提高。

鉴于此，提出了一种应用于互联网领域的全景图标记方法，对不同用户对全景图作出的标记进行分别存储，用户在浏览全景图时可查看该用户作出的标记图形。另一方面，在全景图发生视点或者几何变换时，根据用户在全景图上的漫游场景进行标记图形的变换，以达到较高的用户体验。。

发明内容

有鉴于此，本发明的目的在于提供一种网络全景图标记方法，以缓解现有技术存在的用户体验不佳等问题。

本发明提供了一种网络全景图标记方法：客户端从服务端获取全景图并进行显示，在所述客户端显示的全景图上对任意图形图像目标进行标记并得到标记图形，所述客户端存储标记图形的描述信息，并按一定规则或定时发送所述标记图形的描述信息到服务端，服务端存储客户端信息和所述标记图形的描述信息，所述标记图形在客户端对全景图进行视点变换、几何变换时，发生相同的变换并呈现相应的显示效果。

进一步地，所述标记图形的描述信息包含：1个或多个点、线段的宽度、线段的颜色；所述标记图形的路径为从第1个点顺次连接到最后1个点，所述点构成1个或多个线段，线段连接构成所述标记图形。

进一步地，获取所述标记图形的方法如下：绘制所述标记图形的第1个点后，获取该点在客户端全景图显示部分的坐标(x0,y0)，并在客户端进行存储，继续绘制所述标记图形并顺序存储路径所经过点的坐标。在所述服务端存储的点坐标是所述标记图形在全景图整体部分的坐标值(x1,y1)，所述全景图显示部分到整体部分的映射通过反投影计算得到，所述反投影计算的映射为F1，则(x1,y1)=F1(x0,y0)。

进一步地，所述全景图由1幅图像组成或由多子幅图像拼接而成，所述多幅子图像经过立方体投影或柱面投影或球面投影后得到多幅拼接子图像，所述拼接子图像通过拼接得到所述全景图。如果所述全景图由多幅子图像拼接而成，还需存储所述标记图形的点在所述子图像的坐标，坐标计算方法如下：通过全景图坐标(x1,y1)计算该点在所述拼接子图像的坐标(x2,y2)，再通过立方体或柱面或球面的反投影计算得到该点在子图像的坐标(x3,y3)，所述立方体或柱面或球面的反投影计算矩阵为F2，则(x3,y3)=F2(x2,y2)。

进一步地，不同用户在所述客户端对所述全景图做出的标记图形分别存储，不同用户通过所述客户端从所述服务端获取全景图时，会载入当前用户做出的所述标记图形并显示在全景图上，如果没有做出的所述标记图形，则仅显示所述全景图。

进一步地，所述客户端载入所述全景图和所述标记图形后，标记操作还包括：增加标记图形和删除标记图形，所述标记操作完成后，所述客户端存储操作后的所述标记图形描述信息，并通知所述服务端进行相同的更新。

进一步地，所述客户端载入所述全景图后和所述标记图形后，所述标记操作还包括：显示标记图形、隐藏标记图形、变换标记图形。

进一步地，所述客户端载入所述全景图后和所述标记图形后，所述标记操作还包括将所述全景图和所述标记图形存储为新的全景图，具体方法为：根据所述标记图形的描述信息中的点、宽度、颜色和路径信息，修改所述全景图对应位置的像素点。

附图说明

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

图1是根据本发明实施的一种网络全景图标记方法的流程图。

具体实施方式

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

本实施例的应用场景为全景图的虚拟旅游领域，服务端以Web网站的形式提供多媒体展示信息，通过HTTP服务提供旅游景区各的全景图，全景图既有用全景相机直接拍摄的图像，也有使用普通相机拍摄由计算机进行算法合成的全景图。服务端利用HTML5的canvas标签载入全景图，利用基于WebGL的Three.js开发库实现全景图的显示和漫游。Canvas是HTML5技术新增加的多媒体元素，用来支持图形图像的显示。

每个全景图设置两个canvas，其中一个canvas载入全景图，另一个canvas载入用户的标记图形。服务端按照一定的时间间隔或者用户触发图像刷新事件时，重新绘制窗口显示，先绘制全景图所在的canvas，再绘制标记图形所在的canvas，以确保标记图形覆盖全景图，如果没有标记图形时，则不绘制标记图形所在的canvas。

客户端使用支持HTML5的浏览器登录服务端，即可实现全景图的显示和漫游。客户端即可以是计算机，也可以是手机等移动终端，即用户在进行全景图标记时既可以使用鼠标等计算机输入设备，也可以通过人手触屏操作来实现标记的输入。本实施例以鼠标为输入设备进行标记图形的实现。

图1是根据本发明实施的一种网络全景图标记方法的流程图，如图1所示，该方法包括如下步骤：

步骤S101，客户端在全景图上做标记图形；

用户使用客户端载入全景图后，当发现感兴趣的目标后，将全景图由“浏览模式”切换为“标记模式”。对于全景图系统而言，这两种模式是互斥的，当用户进行鼠标的滑动拖拽等操作时，如果处于浏览模式则全景图将进行平移、旋转等视图变换，如果处于标记模式，则进行标记图形的绘制。两种模式使用相同的输入方法，因此不能同时进行。当用户进入标记模式后，全景图的显示部分将固定，不会随用户的输入操作而进行视图变换。

全景图为立体图形，而客户端的显示设备均为平面显示，因此从全景图到显示设备存在立体到平面的投影变换关系。按目前的全景图生成方法分为立方体全景图、柱面全景图和球面全景图。此外，也存在由拍摄设备直接生成的全景图，例如使用全景相机直接拍摄的柱面全景图。用户在客户端进入标记模式后，在感兴趣的目标处单击鼠标即可实现点的绘制，点击鼠标并进行拖动实现线段的绘制，标记图形的最小元素为点，点与点之间形连接成线段，顺序存储有连接关系的点并最终构成标记图形。在实现时使用Javascript 函数对鼠标的各种动作事件进行响应，并实时更新客户端的界面显示，即在全景图上显示已经绘制的标记图形。

步骤S102，客户端存储标记图形并发送到服务端；

客户端在绘制标记图形的同时记录这些点的坐标，记录的数值为全景图显示部分的坐标(x0,y0)。在一个全景图上可能存在多个标记图形，在存储时分别存储。存储的标记图形描述信息包含标记图形所有的点坐标、线段的宽度、线段的颜色。存储方式即可以使用Javascript 中的变量，也可以使用HTML5提供的客户端存储方式Localstorage。

在用户退出标记模式时，客户端将标记图形的描述信息发送到服务端。

在一个可选的实施例中，客户端在用户进入标记模式后，在用户进行图形标记过程中，可定时（例如每隔10秒钟）上传当前用户所作出的标记图形描述信息。

步骤S103，服务端存储标记图形描述信息；

服务端首先变换标记图形的描述信息，使其坐标为整体全景图坐标系下的值(x1,y1)，客户端发送的(x0,y0)为全景图坐标(x1,y1)到客户端显示平面投影后的数值，从(x0,y0)恢复到(x1,y1)使用反投影映射F1即可计算得到，以下为柱面反投影映射的公式。

其中u0和v0为全景图显示部分在整个全景图中的偏移量，f为Three.js在进行全景图绘制时，设定的虚拟相机的焦距。

在一个可选的实时例中，全景图为球面投影或者立方体投影，则需要使用相应的反投影映射公式。

将所有点坐标转换完成之后，服务端就进行标记图形的描述信息存储，存储时包含用户信息，即标明存储的标记图形属于哪个用户。

如果全景图是由多幅子图像拼接而成，那么还需要存储标记图形的点在子图像上的坐标。多幅子图像生成全景图的步骤为：多幅子图像经过立方体投影或柱面投影或球面投影后得到多幅拼接子图像，所述拼接子图像通过拼接得到所述全景图。

全景图坐标(x1,y1)在所述拼接子图像的坐标(x2,y2)，再通过立方体或柱面或球面的反投影计算得到该点在子图像的坐标(x3,y3)，所述立方体或柱面或球面的反投影计算矩阵为F2，则(x3,y3)=F2(x2,y2)。服务端在存储子图像标记图形时，需要存储坐标(x3,y3)。(x2,y2)和(x1,y1)是全景图局部坐标和全局坐标的关系，因此仅存在偏移计算。(x3,y3)和(x2,y2)是子图像平面坐标和子图像投影坐标的关系，因此从(x2,y2)求解(x3,y3)只需进行反投影映射。以下为柱面全景图的反投影映射为例进行介绍。

其中和 是第i个拼接子图像在整体全景图中的偏移，f为各个子图像拍摄相机的焦距。

步骤S104，客户端载入全景图和标记图形；

对于同一个全景图，不同的用户的标记图形分别存储。当用户完成标记图形后，下一次从任意客户端登录服务端进行全景图浏览时，同时载入该用户的标记图形。由Three.js实现的图形绘制，首先执行全景图所在的canvas的绘制，其后执行标记图形所在canvas的绘制的绘制。进行全景图绘制时，需要设置虚拟相机，即设置观察点，不同的观察点所看到的内容不同。

标记图形在进行绘制时，如果当前全景图没有子图像，则载入点坐标(x1,y1)，并按照点的存储顺序、线段宽度、线段颜色以线段的拼接形式将标记图形绘出，在虚拟相机参数设置方面与全景图保持一致。从而用户在进行视图视点变换、几何变换时，标记图形和全景图发生同样的变化。如果当前全景图由子图像组成，且服务端在绘制时才进行拼接，那么在绘制过程中先绘制子图像，并绘制子图像对应的标记图形，此时标记图形描述信息使用子图像的点坐标(x3,y3)。

在当前用户没有对全景图作出标记图形的情况下，也即标记图形的描述信息为空时，则仅绘制全景图。由于标记图形属于用户的私有数据，因此用户无法看到其它用户的标记图形。

用户进行全景图浏览时，可选择隐藏标记图形，则在图形窗口刷新过程中禁止对标记图形所在的canvas进行绘制；选择显示标记，则在在图形窗口刷新过程中使能对标记图形所在的canvas进行绘制。用户也可以选择其它标记图形替换当前显示的标记图形，则在图形窗口刷新过程中在标记图形所在的canvas上绘制新的标记图形，并在后续的窗口刷新事件中一直绘制新的标记图形。

需要进行说明的是，用户在进行全景图浏览时，可以对增加和删除标记图形。进入标记模式，用户增加新的标记图形时，客户端存储标记图形的描述信息，并在用户退出标记模式时发送到服务端。当用户选择对标记图形进行删除时，则在服务端也删除相应的标记图形描述信息。

当用户选择使用标记图形替代原有全景图内容时，服务端根据标记图形的描述信息中的点、宽度、颜色和路径信息，修改所述全景图对应位置的像素点的值，并将修改后的全景图存储为新的文件。

Claims (8)

1.一种网络全景图标记方法，其特征在于，客户端从服务端获取全景图并进行显示，在所述客户端显示的全景图上对任意图形图像目标进行标记并得到标记图形，所述客户端存储标记图形的描述信息，并按一定规则或定时发送所述标记图形的描述信息到服务端，服务端存储客户端信息和所述标记图形的描述信息，所述标记图形在客户端对全景图进行视点变换、几何变换时，发生相同的变换并呈现相应的显示效果。

2.根据权利要求1所述的方法，其特征在于，所述标记图形的描述信息包含：1个或多个点、线段的宽度、线段的颜色；所述标记图形的路径为从第1个点顺次连接到最后1个点，所述点构成1个或多个线段，线段连接构成所述标记图形。

3.根据权利要求1所述的方法，其特征在于，所述标记图形的描述信息包含：1个或多个点、线段的宽度、线段的颜色；所述标记图形的路径为从第1个点顺次连接到最后1个点，所述点构成1个或多个线段，线段连接构成所述标记图形。

4.根据权利要求1或3所述的方法，其特征在于，所述全景图由1幅图像组成或由多子幅图像拼接而成，所述多幅子图像经过立方体投影或柱面投影或球面投影后得到多幅拼接子图像，所述拼接子图像通过拼接得到所述全景图；如果所述全景图由多幅子图像拼接而成，还需存储所述标记图形的点在所述子图像的坐标，坐标计算方法如下：通过全景图坐标(x1,y1)计算该点在所述拼接子图像的坐标(x2,y2)，再通过立方体或柱面或球面的反投影计算得到该点在子图像的坐标(x3,y3)，所述立方体或柱面或球面的反投影计算映射为F2，则(x3,y3)=F2(x2,y2)。

5.根据权利要求1所述的方法，其特征在于，不同用户在所述客户端对所述全景图做出的标记图形分别存储，不同用户通过所述客户端从所述服务端获取全景图时，会载入当前用户做出的所述标记图形并显示在全景图上，如果没有做出的所述标记图形，则仅显示所述全景图。

6.根据权利要求1所述的方法，其特征在于，所述客户端载入所述全景图和所述标记图形后，标记操作还包括：增加标记图形和删除标记图形，所述标记操作完成后，所述客户端存储操作后的所述标记图形描述信息，并通知所述服务端进行相同的更新。

7.根据权利要求1所述的方法，其特征在于，所述客户端载入所述全景图后和所述标记图形后，所述标记操作还包括：显示标记图形、隐藏标记图形、变换标记图形。

8.根据权利要求1所述的方法，其特征在于，所述客户端载入所述全景图后和所述标记图形后，所述标记操作还包括将所述全景图和所述标记图形存储为新的全景图，具体方法为：根据所述标记图形的描述信息中的点、宽度、颜色和路径信息，修改所述全景图对应位置的像素点。