文章目录

更新 2024.4.19 krpano 1.21.2

这次我们专门来讲讲tour.xml里的静态元素的作用以及如何更换在1.21中更换皮肤。

krpano根元素

<krpano version="1.21" title="Virtual Tour">

1	<krpano version="1.21" title="Virtual Tour">

上次已经提及了krpano元素是krpano xml文件的根元素（krpano元素官方文档、krpano元素完全解析），我们可以看到整个xml文件一头一尾都是由krpano所闭合的。而在krpano元素中version是版本号，它是一个系统内置属性。title是自定义属性，title定义的值在默认皮肤下是显示在缩略图左上角的文字。

include元素

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

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

详细说明看 include元素完全解析主要是嵌入了 vtourskin.xml，将这个xml的全部内容引入到include所在的位置后，相当于合并成一个大的xml内容后再一同解析。

skin_settings元素

该元素为自定义元素，非内置元素。主要是为了默认皮肤的各自设置而设计的。

<skin_settings maps="false"
               maps_type="google"
               maps_bing_api_key=""
               maps_google_api_key=""
               maps_zoombuttons="false"
               maps_loadonfirstuse="true"
               gyro="true"
               gyro_keeplookingdirection="false"
               webvr="true"
               webvr_keeplookingdirection="true"
               webvr_prev_next_hotspots="true"
               autotour="false"
               littleplanetintro="false"
               followmousecontrol="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=""
               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_txtshadow="1 1 4 0x000000 1.0"
               />

<skin_settings maps="false"

maps_type="google"

maps_bing_api_key=""

maps_google_api_key=""

maps_zoombuttons="false"

maps_loadonfirstuse="true"

gyro="true"

gyro_keeplookingdirection="false"

webvr="true"

webvr_keeplookingdirection="true"

webvr_prev_next_hotspots="true"

autotour="false"

littleplanetintro="false"

followmousecontrol="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=""

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_txtshadow="1 1 4 0x000000 1.0"

对应的意思是

maps="false"  <!-- 是否使用必应地图或谷歌地图 ->
maps_type="bing"  <!-- 选择使用谷歌地图或必应地图 ->
maps_bing_api_key=""   <!-- 必应地图所需的API密钥，需申请 ->
maps_google_api_key=""   <!-- 谷歌地图所需的API密钥，需申请 ->
maps_zoombuttons="false"   <!-- 是否在地图上显示缩放按钮 ->
maps_loadonfirstuse="true" <!-- 是否在点击地图按钮时才加载在线地图，默认为true，如果设置为false，则全景加载时便加载在线地图 ->
gyro="true"   <!-- 是否使用陀螺仪 ->
gyro_keeplookingdirection="false" <!-- 在陀螺仪状态中切换场景时是否保持场景加载前的方位 -->
webvr="true"    <!-- 是否启用VR ->
webvr_gyro_keeplookingdirection="false" <!-- 进入陀螺仪或VR时是否保持观看方向 ->
webvr_prev_next_hotspots="true"  <!-- 在VR下是否启用导航到前后场景的链接热点->
autotour="false" <!-- 是否自动旋转及浏览 -->
littleplanetintro="false"    <!-- 是否使用小行星开场 ->
followmousecontrol="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" <!--皮肤的文字阴影->

maps="false" <!-- 是否使用必应地图或谷歌地图 ->

maps_type="bing" <!-- 选择使用谷歌地图或必应地图 ->

maps_bing_api_key="" <!-- 必应地图所需的API密钥，需申请 ->

maps_google_api_key="" <!-- 谷歌地图所需的API密钥，需申请 ->

maps_zoombuttons="false" <!-- 是否在地图上显示缩放按钮 ->

maps_loadonfirstuse="true" <!-- 是否在点击地图按钮时才加载在线地图，默认为true，如果设置为false，则全景加载时便加载在线地图 ->

gyro="true" <!-- 是否使用陀螺仪 ->

gyro_keeplookingdirection="false"

webvr="true" <!-- 是否启用VR ->

webvr_gyro_keeplookingdirection="false" <!-- 进入陀螺仪或VR时是否保持观看方向 ->

webvr_prev_next_hotspots="true" <!-- 在VR下是否启用导航到前后场景的链接热点->

autotour="false"

littleplanetintro="false" <!-- 是否使用小行星开场 ->

followmousecontrol="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" <!--皮肤的文字阴影->

如果你要更改皮肤样式，你可以改变上面的<skin_settings>数值，或者选择性地include下面一个预设的设计，可以通过移除特定include元素的if属性或者在html文件的embedpano()中增加initvar:{design:’flat_light’}。

<include url="skin/vtourskin_design_glass.xml"       if="design === 'glass'"       />
<include url="skin/vtourskin_design_flat.xml"        if="design === 'flat'"        />
<include url="skin/vtourskin_design_flat_light.xml"  if="design === 'flat_light'"  />
<include url="skin/vtourskin_design_ultra_light.xml" if="design === 'ultra_light'" />
<include url="skin/vtourskin_design_117.xml"         if="design === '117'"         />

我们如果要更改为Ultra Light风格，我们可以改为：

<include url="skin/vtourskin_design_glass.xml"       if="design === 'glass'"       />
<include url="skin/vtourskin_design_flat.xml"        if="design === 'flat'"        />
<include url="skin/vtourskin_design_flat_light.xml"  if="design === 'flat_light'"  />
<include url="skin/vtourskin_design_ultra_light.xml" />
<include url="skin/vtourskin_design_117.xml"         if="design === '117'"         />

注意，当你使用了以上五种皮肤时，对应的皮肤设置需要在对应的xml文件修改，例如glass的部分皮肤设置，需要在skin文件夹的vtourskin_design_glass.xml进行修改。

具体可查看 krpano1.19切换皮肤

action元素

接下来是自启动的action，这里的action使用了autorun属性，其中onstart数值将使得这个action可以在项目启动时执行，因此可以看到是执行了loadscene这个动作。默认是载入第一个场景。

<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>

if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); );

loadscene(get(startscene), null, MERGE);

if(startactions !== null, startactions() );

</action>

scene元素

接下来我们看到一堆scene元素（scene元素官方说明文档、scene元素完全解析）我们知道scene就相当于一个暂时不被解析的代码存储体，只有当前被loadscene的scene才会被解析其中的内容：

<scene name="scene_R0010047" title="R0010047" onstart="" havevrimage="true" thumburl="panos/R0010047.tiles/thumb.jpg" lat="" lng="" heading="">

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

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

		<image type="CUBE" multires="true" tilesize="512" if="!webvr.isenabled">
			<level tiledimagewidth="1664" tiledimageheight="1664">
				<cube url="panos/R0010047.tiles/%s/l2/%v/l2_%s_%v_%h.jpg" />
			</level>
			<level tiledimagewidth="768" tiledimageheight="768">
				<cube url="panos/R0010047.tiles/%s/l1/%v/l1_%s_%v_%h.jpg" />
			</level>
		</image>

		<image if="webvr.isenabled">
			<cube url="panos/R0010047.tiles/vr/pano_%s.jpg" />
		</image>

		<!-- place your scene hotspots here -->

	</scene>

</level>

</level>

</image>

</image>

</scene>

这里我们看到了几个元素，包括scene、view、image以及preview。

scene有点类似于krpano元素的感觉，只是它是写在krpano元素里面的。在scene元素里也可以放其它各种的元素，这些元素只在这个scene场景中起作用，意思是说，通常在跳转到其它scene时，上一个scene元素的内容就会被移除。在1.19 pr4后多了自定义属性havevrimage，这个是因为新版生成了专门为VR准备的全景图。我们可以直接查看conifg配置。

# 生成专门优化的非切片的低分辨率的VR用全景图
customimage[vr].size=1536
customimage[vr].path=%INPUTPATH%/vtour/panos/%BASENAME%.tiles/vr/pano_%s.jpg
customimage[vr].imagesettings=jpegquality=82 jpegsubsamp=444 jpegoptimize=true
customimage[vr].xmlsceneparameters=havevrimage="true"
customimage[vr].xmlimageparameters=if="!webvr.isenabled"
customimage[vr].xmllevel=krpano
customimage[vr].xml=<image if="webvr.isenabled">[NL][TAB]<cube url="[PATH]" />[NL]</image>

# 生成专门优化的非切片的低分辨率的VR用全景图

customimage[vr].size=1536

customimage[vr].path=%INPUTPATH%/vtour/panos/%BASENAME%.tiles/vr/pano_%s.jpg

customimage[vr].imagesettings=jpegquality=82 jpegsubsamp=444 jpegoptimize=true

customimage[vr].xmlsceneparameters=havevrimage="true"

customimage[vr].xmlimageparameters=if="!webvr.isenabled"

customimage[vr].xmllevel=krpano

customimage[vr].xml=<image if="webvr.isenabled">[NL][TAB]<cube url="[PATH]" />[NL]</image>

view元素

是控制浏览者在查看全景时的视角设置，例如起始位置、视域范围、可缩放范围、是否限制，限制观看的区域等等。

preview元素

控制预览图设置。

image元素

控制全景图设置。针对VR图使用if了属性，当进入VR时使用VR专用全景图。

注意scene里面的元素只对这个scene有效，因此每个scene都有一套对应的设置。

最后是krpano根元素收尾。

请继续阅读：循序渐进（12）- krpano的26个内置元素

循序渐进（11）- 1.21版本的默认tour.xml解析与换肤

krpano根元素

include元素

skin_settings元素

action元素

scene元素

view元素

preview元素

image元素

在 “循序渐进（11）- 1.21版本的默认tour.xml解析与换肤” 上有 1 条评论

发表评论取消回复

krpano根元素

include元素

skin_settings元素

action元素

scene元素

view元素

preview元素

image元素

在 “循序渐进（11）- 1.21版本的默认tour.xml解析与换肤” 上有 1 条评论

发表评论 取消回复

发表评论取消回复