Web全景图浏览的实现方法、系统和移动终端

摘要

本发明公开一种Web全景图浏览的实现方法、系统和移动终端，涉及虚拟现实实现领域。该方法包括：获取全景图像；响应于浏览指令，根据景图像确定浏览图像；将浏览图像交替写入与视图窗口对应的双显示缓冲区；在视图窗口中交替显示双显示缓冲区中的浏览图像。将浏览图像交替写入双显示缓冲区，终端在视图窗口中交替显示缓冲区中的浏览图像，克服了通常终端处理能力不足导致的浏览不流畅的问题，可以流畅显示全景图，提高了用户体验。

主权项

一种Web全景图浏览的实现方法，其特征在于，包括：获取全景图像；响应于浏览指令，根据所述全景图像确定浏览图像，所述浏览指令包括水平移动、垂直移动、全景图缩放、或全屏显示;将所述浏览图像交替写入与视图窗口对应的双显示缓冲区；在所述视图窗口中交替显示所述双显示缓冲区中的浏览图像;基于CSS和JavaScript的脚本实现Web全景图浏览；其中，分别用Image1和Image2表示与视图窗口对应的两个显示缓冲区的图像，全景图片的大小、位置用（left，top，width，height）来表示，视图窗口的大小、位置用（0，0，View_width，View_height）来表示;根据图片位移的水平方向，设定了两种移动模式：MOVE_ASC模式，视图不动而图片左移，视图看到的是相对从左到右平移的效果；MOVE_DESC模式，视图不动而图片右移，视图看到的是相对从右到左平移的效果;相对于Image1而言，Image2的位置在其左侧或右侧，视全景图浏览的模式而定，有两种类型的位置关系localRelation，记为：IMG_FIRST，表示Image2在Image1的左侧；IMG_LAST，表示Image2在Image1的右侧；（1）浏览初始化设定移动模式moveMode、Image2的位置关系localRelation分别为MOVE_ASC模式或MOVE_DESC模式，设置移动时水平、竖直方向移动的步长imgeStep均为某一个常数；（2）水平方向位移1）平移步长step的确定若moveMode采用的是MOVE_ASC模式，则step=‑imageStep；若moveMode采用的是MOVE_DESC模式，则step=imageStep；2）对Image1图片进行处理每平移一次，图片的水平位置可表示为：x=Image1.left+step若不考虑图片平移出界的情况，x的值即是平移后的Image1.left值；但考虑到图片平移出界的问题，x的值不能直接赋予Image1.left，需按以下几种情况进行处理：a）若moveMode采用的是MOVE_ASC模式当图片Image1左侧移出视图区域左边界时，进行如下处理：localRelation=IMG_LAST;当图片的右侧移进视图区域时，进行如下处理：x=x+2×Image1.widthlocalRelation=IMG_FIRST;b）img_move采用的是MOVE_DESC模式当图片Image1右侧移出视图区域右边界时，进行如下处理：localRelation=IMG_LAST;当图片Image1的左侧进入视图区域时，进行如下处理：x=x‑2×Image1.widthlocalRelation=IMG_FIRST;最后将x的值直接赋予Image1.left；3）对Image2图片进行处理Image2图片与Image1图片保持图片大小（width，height）一致，top值也一致，唯一不同的就是left值；对left值大小的控制分以下两种情况处理：a）moveMode采用的是MOVE_ASC模式且localRelation=IMG_LAST，或者moveMode采用的是MOVE_DESC模式且localRelation=IMG_FIRST，则：Image2.left=Image1.left+Image1.widthb）其他情况，则：Image2.left=Image1.left‑Image1.width通过对图片Image1和Image2的有效控制，实现同一张全景图左右360度浏览的效果；左移与右移的互换通过moveMode与localRelation的同时切换即可实现。