前段时间在论坛看到了vien007、xin、炸天三位大神分享的全景漫游的相关知识，很感兴趣。由于客户也有潜在需求，花了几天时间，我也做了一个Annie2x和krpano结合的小例子。在iphone上测试运行没有问题。由于是初次尝试，实现方法、程序优化、兼容性等等都有待商榷，抛砖引玉，望各位看官不吝赐教。最终源文件下载地址如下：

http://coldstarer.cn/download/Annie2x_krpano.zip

涉及到的知识点如下：

1.   Annie2x的前期准备

2.   krpano的前期准备

3.   通过krpano创建普通全景漫游

4.   krpano生成的漫游文件结构分析

5.   通过krpano创建视频全景漫游

6.   整合Annie2x、krpano

7.   留了两个尾巴

   Annie2x的相关知识来源于咱们的微信和QQ交流群，以及annie2x官网http://ask.annie2x.com/， http://api.annie2x.com/api2x/。 在此再次感谢@小可大神！感谢各位！

Krpano的相关知识来源于http://www.krpano360.com（krpano中文网）和万能的度娘，我仅仅学习了krpano中文网入门教程和少部分初级教程，受益匪浅。在此也感谢krpano中文网的所有者（肥宗）。

回归正文：

一、Annie2的前期准备：

     简化前段时间做的一个项目，仅保留loading页和地址详情页。在地址详情页上，增加两个按钮，一个用来触发普通全景漫游（实例名：map_btn），另外一个用来触发视频全景漫游(实例名：video_btn)。

二、krpano的前期准备：

1、版本：最新版本1.19-pr16，不同版本在很多细节上都不同。我是win10系统，下载的是后缀为.exe的自解压文件。下载包解压即可，无需安装。 下载地址：https://krpano.com/download/。下载包解压后目录结构如图所示：

简单说一下krpano下载包里主要的文件和文件夹：

docu文件夹是部分离线文档；

templates文件夹是官方提供的一系列模板；

viewer文件夹是官方提供的插件和引擎存放位置，包括附带案例；

Convert SPHERE CUBE Droplet.exe：将球面图和立方体图相互转化的工具

krpano Tools.exe：用来注册krpano、修改漫游xml文件的图形界面工具；

krpano Testing Server.exe：本地测试服务器，在服务器环境下才能测试生成的漫游项目（当然，我们也可以把漫游项目拷贝到自己的服务器下来测试）；

以“droplet.bat”结尾的六个批处理文件：用来批处理生成漫游项目。

2、购买与注册：官网提供下载的各个版本和正式版功能相同，但生成的漫游会有水印。我没有购买，选择注册。注册方法很简单，双击krpano文件夹中的krpano Tools.exe，弹出注册码输入框，输入注册码，点击注册按钮即可。我使用了vien007分享的注册码，完美！感谢vien007！

3、漫游素材：球面全景图两张（图片宽高比为2:1，包含了360°x 180°空间的照片），我是从网上下载的，盗版勿究哈！切记：图片一定不要用中文命名。

视频使用了krpano自带example里的视频，后文我会介绍。

 

三、通过krpano创建普通全景漫游：

krpano并没有图形化的操作界面，而是通过前面提到的、后缀为.bat的六个批处理文件来自动生成漫游项目。按照文件名可以看到bat文件分两类：以“MAKE PANO”开始的三个文件和以“MAKE VTOUR”开始的三个文件。前三个批处理文件生成的漫游项目，多个场景之间相互不链接，每个场景都有独立的html、js、xml，swf文件，不方便使用，所以推荐使用MAKE VTOUR的方式。而在后者中，“MAKE VTOUR (NORMAL) droplet”生成的漫游项目，是单分辨率，且需要一次性载入所有的全景图素材，所以也不推荐。最终，我们一般情况下会使用最后两种方法：如果有VR需求，则使用“MAKE VTOUR (VR-OPT) droplet”；如果没有VR需求，则使用“MAKE VTOUR (MULTIRES) droplet”。  

生成方法非常简单：全选需要生成漫游的全景图，鼠标拖放到对应的droplet批处理文件上，松开鼠标，弹出一个命令行窗口，等待处理完成后，按任意键关闭窗口即可。

此时，在全景图存放的文件夹里，会生成一个名字为tour的新的文件夹，也就是漫游项目所在的文件夹。双击文件夹中的tour_testingserver.exe，就可以测试浏览了。

 

四、krpano生成的漫游文件结构分析（即tour文件夹结构）

panos文件夹：存放批处理生成的全景图切片

plugins文件夹：存放漫游需要的插件

skin文件夹：顾名思义，存放漫游项目涉及到的图片文件及其配置文件

tour.html：嵌入全景项目的网页，服务器模式下浏览全景项目的起始页。

tour.js：krpano引擎文件。无论是普通全景漫游，还是视频全景漫游，使用的是同一个js文件。

tour.swf：flash版本的漫游浏览入口文件。在krpano最新版中，无论是pc端还是移动端，都首推html5的浏览模式了。

tour.xml：漫游项目配置文件。这个文件很重要，包括漫游项目的通用配置和每个场景的详细配置信息。而它include进来的vtourskin.xml，更是包含了整个漫游项目的界面元素<layer>、事件<events>、动作<action>等信息。后面的内容，会涉及到针对xml文件的修改。

tour_testingserver.exe：windows环境下的测试服务器，双击运行该服务器即可浏览漫游。

tour_testingserver_macos：mac 环境下的测试服务器

 

五、通过krpano创建视频全景漫游

有一点需要明确：krpano本身不限制视频的尺寸。视频的尺寸受限与用户所用的系统和浏览器。所以，我们可以通过一个简单的方法，实现视频全景漫游。

首先通过上文中介绍的方法，任意找一张全景图，生成一套默认的漫游文件结构(生成的漫游所使用的文件，都会存放在tour文件夹内)。然后将krpano路径下，viewer\examples\videopano这个文件夹内的所有文件，全部复制到tour文件夹内。提示替换文件时，选择确定。

  在tour文件夹内，删除下图标注的文件和文件夹

将tour.html里如下图对应的xml文件名替换为“videopano.xml”

这样视频全景漫游就搞定了，这是最简便的方法。如果想使用我们自己的视频，替换该文件夹里对应的视频即可。关于视频的制作，请自行查询相关资料。

 

六、整合Annie2x、krpano

漫游制作好之后，如何将它们和现有的项目结合起来？本文仅仅介绍如何通过annie2x控制漫游的显示、隐藏和播放。更高大上的方法还请各位看官留言赐教。思路如下：

1、将普通漫游和视频漫游里所有的文件，都拷贝到annie2x生成的index.html目录下。（本文不考虑打包，也没有做文件路径的合理化，实际项目执行时大家可以根据需求自己处理）。

2、在index.html里，增加 两个div，id分别为“pano”、“panoVideo”，用来做漫游的容器，设置z-index为0，放在最底层；

3、设置annie引擎对应的div容器z-index层级为1，浮在漫游容器上层。当播放漫游时，隐藏这个div；

4、增加一个div作为关闭按钮,id为“closeKrBtn”，z-index层级为2，放在最上层。当激活krpano漫游后显示该按钮；点击按钮时，隐藏krpano漫游，显示annie2x容器。

5、需要注意的是，当隐藏正在播放的视频漫游时，应该暂停漫游，以避免画面消失而声音还在播放的现象。这时候要获取视频漫游的播放状态，再根据状态来判断是否需要调用krpano的播放/暂停方法。Krpano提供一个叫作krpano Javascript-Interface object的对象来实现和js的通信，我们在krpano初始化函数embedpano（）中增加onready的自定义回调函数就能够得到该对象的引用，再使用它的get和call方法，从vtourskin.xml文件里获取需要的属性和需要执行相应的方法。

 

6、这里对漫游再做一些优化：修改krpano的英文标题，增加漫游热点。打开普通全景漫游对应的配置文件tour.xml，修改第一行的title属性为“会场坐标漫游”;修改两个<scene>标签里对应title的值。

修改视频全景漫游对应的配置文件videopano.xml的<scene>标签对应的标题title值

使用krpano下载包里的krpano Tools.exe打开tour.xml点击“Add hotspot”,增加一个指示箭头。

将箭头拖放到合适位置后，点击箭头，弹出编辑热点面板，在下拉列表里选择“酒店大堂”，然后点Save，完成编辑，关闭面板。

最后点击Save tour.xml按钮，关闭漫游编辑工具。

7、为了避免在index.html中加载krpano的引擎文件tour.js导致loading延迟出现，可以在positon.fla的库里新建一个空的mc，将绑定类设置为“tour”，然后将tour.js文件放到src\position里。具体方法可参考http://ask.annie2x.com/article/47。话说我在这里犯了@小可提到的低级错误，请大家引以为戒。

搞定。Over。

七、尾巴：

1、或许各位看官一开始就注意到了，我在文章开头提到，该案例仅仅在iphone上测试没有问题。在安卓上运行krpano视频全景时，微信会弹出浏览器窗口，像播放一般视频那样播放，而不能实现全景模式的播放。这个问题在krpano1.19-pr8版本上有了解决方案。请参考http://ask.annie2x.com/question/50  @xin的方法。（也就是使用@xin提供的videoplayer.js文件，替换默认plugins文件夹里的对应文件）。但这个js文件在pr16最新版里无法加载视频。哪位大神有最新版的解决方法，请赐教！期待ing!

2、曾尝试使用FloatDisplay，将漫游作为一个annie2x的显示对象加载进来。但宽高100%适配的漫游在annie里自动缩小，设置floatDisplay的宽高也没有效果。哪位高人搞定了，希望能留言指点！

 

另：krpano360提供了网盘下载地址，包含多个版本，其中就有pr8。

http://www.krpano360.com/krpanodonwload/