基于web的全景漫游自动生成加编辑平台的技术实现（三）----krpano主XML文件

了解了krpano是怎么通过浏览器进行全景漫游展示之后，我们来看看krpano的主XML文件tour.xml

tour.xml是对全景漫游进行页面配置的xml文件，可以说，tour.xml里的内容就是浏览器里全景的内容，看看它里面都写了些什么

[html]  view plain  copy

1. <krpano version="1.19" title="Virtual Tour">  
2.   
3.     <include url="skin/vtourskin.xml" />  
4.   
5.   
6.     <!-- customize skin settings: maps, gyro, webvr, thumbnails, tooltips, layout, design, ... -->  
7.     <skin_settings maps="true"  
8.                    maps_type="google"  
9.                    maps_bing_api_key=""  
10.                    maps_zoombuttons="false"  
11.                    gyro="true"  
12.                    webvr="true"  
13.                    littleplanetintro="false"  
14.                    title="true"  
15.                    thumbs="true"  
16.                    thumbs_width="120" thumbs_height="80" thumbs_padding="10" thumbs_crop="0|40|240|160"  
17.                    thumbs_opened="false"  
18.                    thumbs_text="false"  
19.                    thumbs_dragging="true"  
20.                    thumbs_onhoverscrolling="false"  
21.                    thumbs_scrollbuttons="false"  
22.                    thumbs_scrollindicator="false"  
23.                    thumbs_loop="false"  
24.                    tooltips_buttons="false"  
25.                    tooltips_thumbs="false"  
26.                    tooltips_hotspots="false"  
27.                    tooltips_mapspots="false"  
28.                    deeplinking="false"  
29.                    loadscene_flags="MERGE"  
30.                    loadscene_blend="OPENBLEND(0.5, 0.0, 0.75, 0.05, linear)"  
31.                    loadscene_blend_prev="SLIDEBLEND(0.5, 180, 0.75, linear)"  
32.                    loadscene_blend_next="SLIDEBLEND(0.5,   0, 0.75, linear)"  
33.                    loadingtext="loading..."  
34.                    layout_width="100%"  
35.                    layout_maxwidth="814"  
36.                    controlbar_width="-24"  
37.                    controlbar_height="40"  
38.                    controlbar_offset="20"  
39.                    controlbar_offset_closed="-40"  
40.                    controlbar_overlap.no-fractionalscaling="10"  
41.                    controlbar_overlap.fractionalscaling="0"  
42.                    design_skin_images="vtourskin.png"  
43.                    design_bgcolor="0x2D3E50"  
44.                    design_bgalpha="0.8"  
45.                    design_bgborder="0"  
46.                    design_bgroundedge="1"  
47.                    design_bgshadow="0 4 10 0x000000 0.3"  
48.                    design_thumbborder_bgborder="3 0xFFFFFF 1.0"  
49.                    design_thumbborder_padding="2"  
50.                    design_thumbborder_bgroundedge="0"  
51.                    design_text_css="color:#FFFFFF; font-family:Arial;"  
52.                    design_text_shadow="1"  
53.                    />  
54.   
55.     <!--  
56.         For an alternative skin design either change the <skin_settings> values   
57.         from above or optionally include one of the predefined designs from below.  
58.     -->  
59.     <!-- <include url="skin/vtourskin_design_flat_light.xml"  /> -->  
60.     <!-- <include url="skin/vtourskin_design_glass.xml"       /> -->  
61.     <!-- <include url="skin/vtourskin_design_ultra_light.xml" /> -->  
62.     <!-- <include url="skin/vtourskin_design_117.xml"         /> -->  
63.     <!-- <include url="skin/vtourskin_design_117round.xml"    /> -->  
64.     <!-- <include url="skin/vtourskin_design_black.xml"       /> -->  
65.   
66.   
67.     <!-- startup action - load the first scene -->  
68.     <action name="startup" autorun="onstart">  
69.         if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); );  
70.         loadscene(get(startscene), null, MERGE);  
71.         if(startactions !== null, startactions() );  
72.     </action>  
73.   
74.   
75.       
76.     <scene name="scene_1" title="1" onstart="" havevrimage="true" thumburl="panos/1.tiles/thumb.jpg" lat="26.90189194" lng="112.56277528" heading="0.0">  
77.   
78.         <view hlookat="0" vlookat="0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />  
79.   
80.         <preview url="panos/1.tiles/preview.jpg" />  
81.   
82.         <image type="CUBE" multires="true" tilesize="512" if="!webvr.isenabled">  
83.             <level tiledimagewidth="4608" tiledimageheight="4608">  
84.                 <cube url="panos/1.tiles/%s/l4/%0v/l4_%s_%0v_%0h.jpg" />  
85.             </level>  
86.             <level tiledimagewidth="2304" tiledimageheight="2304">  
87.                 <cube url="panos/1.tiles/%s/l3/%0v/l3_%s_%0v_%0h.jpg" />  
88.             </level>  
89.             <level tiledimagewidth="1152" tiledimageheight="1152">  
90.                 <cube url="panos/1.tiles/%s/l2/%0v/l2_%s_%0v_%0h.jpg" />  
91.             </level>  
92.             <level tiledimagewidth="640" tiledimageheight="640">  
93.                 <cube url="panos/1.tiles/%s/l1/%0v/l1_%s_%0v_%0h.jpg" />  
94.             </level>  
95.         </image>  
96.   
97.         <image if="webvr.isenabled">  
98.             <cube url="panos/1.tiles/vr/pano_%s.jpg" />  
99.         </image>  
100.   
101.         <!-- place your scene hotspots here -->  
102.   
103.     </scene>  
104.   
105.   
106. </krpano>  

长长的一大串代码，其实仔细看看还是挺好懂的

开头version说明krpano版本，这里用1.19

title是全景标题，可以任意修改

[html]  view plain  copy

1. <krpano version="1.19" title="Virtual Tour">  

include url   顾名思义，引入skin / vtourskin.xml文件，这是全景漫游的皮肤文件，我们浏览全景漫游有一系列的按钮功能，基本都是在这个文件里完成，这个文件的内容以后再细说，现在大概知道它的作用就好

[html]  view plain  copy

1. <include url="skin/vtourskin.xml" />  

<skin_settings>标签里配置了一系列皮肤属性设置，这些属性的作用是这样的

[html]  view plain  copy

1. maps="false"  <!-- 是否使用必应地图或谷歌地图 ->  
2. maps_type="bing"  <!-- 选择使用谷歌地图或必应地图 ->  
3. maps_bing_api_key=""   <!-- 必应地图所需的API密钥，需申请 ->  
4. maps_google_api_key=""   <!-- 谷歌地图所需的API密钥，需申请 ->  
5. maps_zoombuttons="false"   <!-- 是否在地图上显示缩放按钮 ->  
6. gyro="true"   <!-- 是否使用陀螺仪 ->  
7. webvr="true"    <!-- 是否启用VR ->  
8. webvr_gyro_keeplookingdirection="false" <!-- 进入陀螺仪或VR时是否保持观看方向 ->  
9. webvr_prev_next_hotspots="true"  <!-- 在VR下是否启用导航到前后场景的链接热点->  
10. littleplanetintro="false"    <!-- 是否使用小行星开场 ->  
11. title="true"  <!-- 是否左下角显示title ->  
12. thumbs="true"  <!-- 是否使用缩略图，如不使用，则没有缩略图一栏 ->  
13. thumbs_width="120" thumbs_height="80" thumbs_padding="10" thumbs_crop="0|40|240|160"  <!-- 缩略图宽度、高度、间距以及缩略图裁切范围 ->  
14. thumbs_opened="false"   <!-- 是否在启动时弹出缩略图一栏 ->  
15. thumbs_text="false"  <!-- 是否在缩略图上显示名字 ->  
16. thumbs_dragging="true"   <!-- 是否允许鼠标拖拽缩略图区域 ->  
17. thumbs_onhoverscrolling="false"  <!-- 是否允许鼠标悬停缩略图自动滚动 ->  
18. thumbs_scrollbuttons="false"   <!-- 是否显示缩略图滚动按钮 ->  
19. thumbs_scrollindicator="false"   <!-- 是否显示缩略图滚动条 ->  
20. thumbs_loop="false"  <!-- 滚动按钮是否使用缩略图循环 ->  
21. tooltips_buttons="false" <!-- 鼠标在按钮悬停时是否弹出文字提示 ->  
22. tooltips_thumbs="false"  <!-- 鼠标在缩略图悬停时是否弹出文字提示 ->  
23. tooltips_hotspots="false"   <!-- 鼠标在热点上悬停时是否弹出文字提示 ->  
24. tooltips_mapspots="false"   <!-- 鼠标在地图热点悬停时是否弹出文字提示 ->  
25. deeplinking="false"       <!-- 是否使用深度链接获取功能，可使得当前页面路径获取场景及视角信息 ->  
26. loadscene_flags="MERGE"  <!-- 缩略图切换场景时的变量 ->  
27. loadscene_blend="OPENBLEND(0.5, 0.0, 0.75, 0.05, linear)"  <!-- 缩略图切换场景时的融合 ->  
28. loadscene_blend_prev="SLIDEBLEND(0.5, 180, 0.75, linear)"  <!-- 缩略图切换到上一个场景时的融合 ->  
29. loadscene_blend_next="SLIDEBLEND(0.5, 0, 0.75, linear)"  <!-- 缩略图切换到下一个场景时的融合 ->  
30. loadingtext="载入中..." <!-- 在全景图载入中时显示的文字 ->  
31. layout_width="100%"  <!--导航条容器相对屏幕宽度的百分比 ->  
32. layout_maxwidth="814"  <!--导航条容器的最大宽度像素 ->  
33. controlbar_width="-24" <!--导航条背景的宽度像素 ->  
34. controlbar_height="40"  <!--导航条背景的高度像素 ->  
35. controlbar_offset.normal="20"  <!--导航条背景与屏幕底部的距离->  
36. controlbar_offset_closed="-40"  <!--导航条隐藏状态时与屏幕底部的距离->  
37. controlbar_overlap.no-fractionalscaling="10"  <!--在不支持分级缩放页面和设置像素比的设备的导航条重叠的像素->  
38. controlbar_overlap.fractionalscaling="0" <!--支持分级缩放页面和设置像素比的设备的导航条重叠的像素->  
39. design_skin_images="vtourskin.png" <!--皮肤所用的源图片->  
40. design_bgcolor="0x000000" <!--皮肤的背景颜色->  
41. design_bgalpha="0.5" <!--皮肤的透明度->  
42. design_bgborder="0 0xFFFFFF 1.0" <!--皮肤的边框->  
43. design_bgroundedge="1" <!--皮肤边框圆角设置->  
44. design_bgshadow="0 0 9 0xFFFFFF 0.5" <!--皮肤的背景阴影->  
45. design_thumbborder_bgborder="4 0xFFFFFF 1.0" <!--皮肤的缩略图边框->  
46. design_thumbborder_padding="2" <!--皮肤缩略图边框间距->  
47. design_thumbborder_bgroundedge="5" <!--皮肤缩略图边框的圆角->  
48. design_text_css="color:#FFFFFF; font-family:Arial; font-weight:bold;"<!--皮肤文字样式->  
49. design_text_shadow="1" <!--皮肤的文字阴影->  

接下来我们看到krpano里的action元素,标签里的代码是载入一个场景（默认载入第一个场景），这个场景就是我们打开全景是看到的第一个画面

这里action元素里有两个属性

name属性 ：action的id叫startup

autorun属性：设置为onstart可以在打开浏览器运行全景漫游时就可以执行这个action

[html]  view plain  copy

1. <action name="startup" autorun="onstart">  
2.         if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); );  
3.         loadscene(get(startscene), null, MERGE);  
4.         if(startactions !== null, startactions() );  
5.     </action>  

如果加载成功就载入场景

[html]  view plain  copy

1. <span style="white-space:pre;">     </span>if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); );  

[html]  view plain  copy

1. loadscene(get(startscene), null, MERGE);  
2. if(startactions !== null, startactions() );  

最后只剩下一个scene元素了，以后搞过一段时间cocos2dx，所以当时看到这个元素时一看就知道是啥东东了。

顾名思义，scene中文翻译过来叫场景，我们看到的每一个全景漫游都是一个独立的场景，它们分别在一个独立scene中进行配置，在scene中可以调用比如上面的action动作等等巴拉巴拉的东西，scene相当于一个容器，可以在里面添加任意的东西，最后被krpano解析之后进行全景展示

下面我们来看看代码

这里havevrimage属性设置为true表示启用专门为VR模式准备的全景图，thumburl属性制定全景封面图片，lat,lng,heading则是一堆角度设置，都是系统自动生成好的

[html]  view plain  copy

1. <scene name="scene_1" title="1" onstart="" havevrimage="true" thumburl="panos/1.tiles/thumb.jpg" lat="26.90189194" lng="112.56277528" heading="0.0">  
2.   
3.         <view hlookat="0" vlookat="0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />  
4.   
5.         <preview url="panos/1.tiles/preview.jpg" />  
6.   
7.         <image type="CUBE" multires="true" tilesize="512" if="!webvr.isenabled">  
8.             <level tiledimagewidth="4608" tiledimageheight="4608">  
9.                 <cube url="panos/1.tiles/%s/l4/%0v/l4_%s_%0v_%0h.jpg" />  
10.             </level>  
11.             <level tiledimagewidth="2304" tiledimageheight="2304">  
12.                 <cube url="panos/1.tiles/%s/l3/%0v/l3_%s_%0v_%0h.jpg" />  
13.             </level>  
14.             <level tiledimagewidth="1152" tiledimageheight="1152">  
15.                 <cube url="panos/1.tiles/%s/l2/%0v/l2_%s_%0v_%0h.jpg" />  
16.             </level>  
17.             <level tiledimagewidth="640" tiledimageheight="640">  
18.                 <cube url="panos/1.tiles/%s/l1/%0v/l1_%s_%0v_%0h.jpg" />  
19.             </level>  
20.         </image>  
21.   
22.         <image if="webvr.isenabled">  
23.             <cube url="panos/1.tiles/vr/pano_%s.jpg" />  
24.         </image>  
25.   
26.         <!-- place your scene hotspots here -->  
27.   
28.     </scene>  

scene里的view元素，是指定全景浏览者观看时的视角，比如初始视角，缩放范围，视域范围等等

[html]  view plain  copy

1. <view hlookat="0" vlookat="0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />  

preview元素，指定浏览全景时的略缩图（因为全景图片一般都很大，导致加载慢，所以krpano准备了清晰度较小的略缩图方便加载，给清晰的图片加载缓冲时间）

[html]  view plain  copy

1. <preview url="panos/1.tiles/preview.jpg" />  

[html]  view plain  copy

1.   

[html]  view plain  copy

1. <image type="CUBE" multires="true" tilesize="512" if="!webvr.isenabled">  
2.             <level tiledimagewidth="4608" tiledimageheight="4608">  
3.                 <cube url="panos/1.tiles/%s/l4/%0v/l4_%s_%0v_%0h.jpg" />  
4.             </level>  
5.             <level tiledimagewidth="2304" tiledimageheight="2304">  
6.                 <cube url="panos/1.tiles/%s/l3/%0v/l3_%s_%0v_%0h.jpg" />  
7.             </level>  
8.             <level tiledimagewidth="1152" tiledimageheight="1152">  
9.                 <cube url="panos/1.tiles/%s/l2/%0v/l2_%s_%0v_%0h.jpg" />  
10.             </level>  
11.             <level tiledimagewidth="640" tiledimageheight="640">  
12.                 <cube url="panos/1.tiles/%s/l1/%0v/l1_%s_%0v_%0h.jpg" />  
13.             </level>  
14.         </image>  

image元素，全景漫游里使用的图片资源都在image元素里配置

krpano一大特色就是VR模式，下面的if语句就是说如果进入VR模式，则使用VR模式专用图片

[html]  view plain  copy

1. if="!webvr.isenabled"  

下面的代码都是图片资源的地址了，就在vtour文件夹下的panos/1.tiles下，这里使用了通配符匹配每个图片文件夹下图片名，让krpano能找到每个图片

总之，krpano自动生成的全景漫游，它的主XML文件里的结构就是通过<skin_settings>元素设置一系列皮肤属性设置，然后在<scene>场景里对全景进行编辑，比如加上action动作等（注意：action一定要声明在scene元素之外再引用）。

就这样，一个简单的krpano全景漫游的主XML就完成了。