您的位置: 首页  >  文章  >  基于web的全景漫游自动生成加编辑平台的技术实现（三）----krpano主XML文件

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

分类: 文章 • 2024-10-12 21:35:57

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

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

基于web的全景漫游自动生成加编辑平台的技术实现（三）----krpano主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能找到每个图片

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



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

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


相关推荐