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

2017-06-03 0 Comments 903 Views 0 Times

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

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

[html] view plain copy

<krpano version=“1.19” title=“Virtual Tour”>
<include url=“skin/vtourskin.xml” />
<!– customize skin settings: maps, gyro, webvr, thumbnails, tooltips, layout, design, … –>
<skin_settings maps=“true”
maps_type=“google”
maps_bing_api_key=“”
maps_zoombuttons=“false”
gyro=“true”
webvr=“true”
littleplanetintro=“false”
title=“true”
thumbs=“true”
thumbs_width=“120” thumbs_height=“80” thumbs_padding=“10” thumbs_crop=“0|40|240|160”
thumbs_opened=“false”
thumbs_text=“false”
thumbs_dragging=“true”
thumbs_onhoverscrolling=“false”
thumbs_scrollbuttons=“false”
thumbs_scrollindicator=“false”
thumbs_loop=“false”
tooltips_buttons=“false”
tooltips_thumbs=“false”
tooltips_hotspots=“false”
tooltips_mapspots=“false”
deeplinking=“false”
loadscene_flags=“MERGE”
loadscene_blend=“OPENBLEND(0.5, 0.0, 0.75, 0.05, linear)”
loadscene_blend_prev=“SLIDEBLEND(0.5, 180, 0.75, linear)”
loadscene_blend_next=“SLIDEBLEND(0.5, 0, 0.75, linear)”
loadingtext=“loading…”
layout_width=“100%”
layout_maxwidth=“814”
controlbar_width=“-24”
controlbar_height=“40”
controlbar_offset=“20”
controlbar_offset_closed=“-40”
controlbar_overlap.no-fractionalscaling=“10”
controlbar_overlap.fractionalscaling=“0”
design_skin_images=“vtourskin.png”
design_bgcolor=“0x2D3E50”
design_bgalpha=“0.8”
design_bgborder=“0”
design_bgroundedge=“1”
design_bgshadow=“0 4 10 0x000000 0.3”
design_thumbborder_bgborder=“3 0xFFFFFF 1.0”
design_thumbborder_padding=“2”
design_thumbborder_bgroundedge=“0”
design_text_css=“color:#FFFFFF; font-family:Arial;”
design_text_shadow=“1”
/>
<!–
For an alternative skin design either change the <skin_settings> values
from above or optionally include one of the predefined designs from below.
—>
<!– <include url=”skin/vtourskin_design_flat_light.xml” /> –>
<!– <include url=”skin/vtourskin_design_glass.xml” /> –>
<!– <include url=”skin/vtourskin_design_ultra_light.xml” /> –>
<!– <include url=”skin/vtourskin_design_117.xml” /> –>
<!– <include url=”skin/vtourskin_design_117round.xml” /> –>
<!– <include url=”skin/vtourskin_design_black.xml” /> –>
<!– startup action – load the first scene –>
<action name=“startup” autorun=“onstart”>
if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); );
loadscene(get(startscene), null, MERGE);
if(startactions !== null, startactions() );
</action>
<scene name=“scene_1” title=“1” onstart=“” havevrimage=“true” thumburl=“panos/1.tiles/thumb.jpg” lat=“26.90189194” lng=“112.56277528” heading=“0.0”>
<view hlookat=“0” vlookat=“0” fovtype=“MFOV” fov=“120” maxpixelzoom=“2.0” fovmin=“70” fovmax=“140” limitview=“auto” />
<preview url=“panos/1.tiles/preview.jpg” />
<image type=“CUBE” multires=“true” tilesize=“512” if=“!webvr.isenabled”>
<level tiledimagewidth=“4608” tiledimageheight=“4608”>
<cube url=“panos/1.tiles/%s/l4/%0v/l4_%s_%0v_%0h.jpg” />
</level>
<level tiledimagewidth=“2304” tiledimageheight=“2304”>
<cube url=“panos/1.tiles/%s/l3/%0v/l3_%s_%0v_%0h.jpg” />
</level>
<level tiledimagewidth=“1152” tiledimageheight=“1152”>
<cube url=“panos/1.tiles/%s/l2/%0v/l2_%s_%0v_%0h.jpg” />
</level>
<level tiledimagewidth=“640” tiledimageheight=“640”>
<cube url=“panos/1.tiles/%s/l1/%0v/l1_%s_%0v_%0h.jpg” />
</level>
</image>
<image if=“webvr.isenabled”>
<cube url=“panos/1.tiles/vr/pano_%s.jpg” />
</image>
<!– place your scene hotspots here –>
</scene>
</krpano>

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

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

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

[html] view plain copy

<krpano version=“1.19” title=“Virtual Tour”>

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

[html] view plain copy

<include url=“skin/vtourskin.xml” />

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

[html] view plain copy

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

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

这里action元素里有两个属性

name属性：action的id叫startup

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

[html] view plain copy

<action name=“startup” autorun=“onstart”>
if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); );
loadscene(get(startscene), null, MERGE);
if(startactions !== null, startactions() );
</action>

如果加载成功就载入场景

[html] view plain copy

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

[html] view plain copy

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

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

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

下面我们来看看代码

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

[html] view plain copy

<scene name=“scene_1” title=“1” onstart=“” havevrimage=“true” thumburl=“panos/1.tiles/thumb.jpg” lat=“26.90189194” lng=“112.56277528” heading=“0.0”>
<view hlookat=“0” vlookat=“0” fovtype=“MFOV” fov=“120” maxpixelzoom=“2.0” fovmin=“70” fovmax=“140” limitview=“auto” />
<preview url=“panos/1.tiles/preview.jpg” />
<image type=“CUBE” multires=“true” tilesize=“512” if=“!webvr.isenabled”>
<level tiledimagewidth=“4608” tiledimageheight=“4608”>
<cube url=“panos/1.tiles/%s/l4/%0v/l4_%s_%0v_%0h.jpg” />
</level>
<level tiledimagewidth=“2304” tiledimageheight=“2304”>
<cube url=“panos/1.tiles/%s/l3/%0v/l3_%s_%0v_%0h.jpg” />
</level>
<level tiledimagewidth=“1152” tiledimageheight=“1152”>
<cube url=“panos/1.tiles/%s/l2/%0v/l2_%s_%0v_%0h.jpg” />
</level>
<level tiledimagewidth=“640” tiledimageheight=“640”>
<cube url=“panos/1.tiles/%s/l1/%0v/l1_%s_%0v_%0h.jpg” />
</level>
</image>
<image if=“webvr.isenabled”>
<cube url=“panos/1.tiles/vr/pano_%s.jpg” />
</image>
<!– place your scene hotspots here –>
</scene>