[转]写给Krpano小白们的最最最入门级教程（二）

来源：互联网发布：韩国网络电视成人直播编辑：程序博客网时间：2024/05/22 06:28

漫游场景的title搞定以后让我们回过头来了解一下tour.xml中其他的内容（图13）。

图13

skin_settings是默认皮肤的各项参数，修改这些参数你可以对皮肤中所显示的内容进行调整，但是并不能更换掉系统默认的皮肤。

在这一段之前有一个注释，它的内容是“设置皮肤项：必应地图？陀螺仪（重力控制）？缩略图控制？提示？”显然，为了方便对系统默认皮肤的控制，Krpano提供了一些基本参数。

bingmaps="false" <是否使用必应地图>

bingmaps_key="" <填写必应地图秘钥，如果需要使用必应地图请自行到https://www.bingmapsportal.com申请>

bingmaps_zoombuttons="false" <是否显示必应地图的缩放按钮>

gyro="true" <是否使用陀螺仪（重力感应），默认是开启的，当然这个选项只会在移动端的浏览器上实现>

thumbs_width="120" thumbs_height="80" thumbs_padding="10" thumbs_crop="0|40|240|160"

前两项属性分别代表缩略图的宽度和高度，第三项是每个缩略图之间的间距，第四项是crop，因为这些缩略图是从panos的thumb.jpg裁取出来的，thumb.jpg实际上是240*240的图，这里截取了240*160像素。

这里有一个crop，crop是指从图片的某一个坐标点开始截取一个区域，这里的"0|40|240|160"实际上是说从"x=0 y=40"的坐标点开始，截取一个x=240像素，y=160像素的图片，坐标我们可以参考Photoshop中的信息。一旦涉及在皮肤中添加按钮之类需要截取图片的语句，这个crop都会出现。

thumbs_opened="false" <是否在打开漫游时显示缩略图>

thumbs_text="true" <是否显示缩略图文本>

thumbs_dragging="true" <是否允许拖拽缩略图左右滑动>

thumbs_onhoverscrolling="false" <是否允许缩略图根据鼠标运动方向自动往两侧滑动>

thumbs_scrollbuttons="false" <是否显示缩略图两端的箭头按钮>

thumbs_scrollindicator="false" <是否显示缩略图下方的滑动条>

tooltips指的是提示文字，也就是当鼠标移动到对应的地方时鼠标上方所显示的文字提示。

tooltips_thumbs="true" <是否在缩略图上显示提示文字>

tooltips_hotspots="false" <是否在热点上显示提示文字>

tooltips_mapspots="false" <是否在地图热点上显示提示文字，是地图而不是你的漫游场景上>

controlbar_offset="20" <控制整条导航栏的垂直位置，数字越小越往下>

这是一个默认的logo放置代码，url=""是logo图片的链接，你可以把自己的logo图片放置在vtour目录下，然后把完整的文件名（包含后缀）填入双引号中间，scale是图片大小，0.25=25%，opened_onclick是点击后弹出，openurl后面的单引号中可以填入我们想要显示的内容，我将得图云的主页保存下来以后填在这里，这样当我们第一次点击logo时，logo会放大出现屏幕正中（图14），再次点击则会转入我们事先保存的页面。当然这里只是这个layer定义的很小一部分，更多的内容在skin文件夹的vtourskin.xml里面。

图14

打开vtourskin.xml，ctrl+F查找skin_logo我们会找到：

这样一行语句，keep="true"确保在切换场景时始终保持在相同的位置不会消失，align="righttop"是对齐浏览器的右上角，而x、y是指以右上角为原点，偏移x=5、y=5个像素。capture为false，那么当你用鼠标在logo上拖动时，下层的全景漫游也会跟着转动。accuracy="1"是坐标的精准度，state="small"是记录当前这个layer的状态。onclick则是一个鼠标行为，在单击logo时会检查logo状态是否为small，如果是，则放大（skin_openlogo）logo，如果不是small则执行分号之后的2个命令。

在这里我仅仅只对logo的设置做了简要的说明，如果有同学想要进一步研究可以查看Krpano课堂的《krpano快速入门教程（5）—设置LOGO》。

接下来让我们修改一下起始视点并添加一个热点，双击打开tour_editor.html转动视角到我们想要的位置，然后点击左上角的set as startup view（图15）保存一下“save tour.xml”，然后点击add hotspot添加1个热点（图16），给这个热点定义一个链接（图17），然后点击done完成，最后记得保存一下save tour.xml。

图15

图16

图17

刷新一下tour.html，我们会看到起始视点已经变成我们之前设定的那个地方，中间的位置多了一个箭头（图18），这个就是我们添加的热点，当然，这个死板板不会动的箭头是系统默认的，后面我会教大家怎么替换掉它，在这之前先让我们打开热点提示，这样鼠标移动到热点上时就会有下一个场景的文字说明了。

图18

打开tour.xml进行编辑，前面我们讲到过的皮肤参数中有提到过，tooltips_hotspots="false"，把双引号中的false改为true。刷新一下tour.html（图19）。

图19

也许有人会说这个字体很丑，我想换一个，Krpano默认的情况下很多字体都会调用textstyle name="SKIN_TOOLTIPS"，它在vtourskin.xml中，如果你想给热点提示单独定义一种字体，那么需要创建一个新的textstyle name。（请记住，每一个name都必须是独一无二的，并且不能是数字开头）

先让我们来看一下这个textstyle：

这里定义了很多东西，font（字体）、fontsize（字体大小）、bold（黑体）、italic（斜体）、background（背景）、border（镶边）、textcolor（字体颜色）、effect（字体效果），dropshadow(1,45,0x000000,4,1)说明添加的是阴影，括号里的参数是指位置及颜色。fadeintime（渐隐延迟）、fadetime（消失延迟）

参考一下这个textstyle，我们把这一段复制一下，粘贴在下面，把textstyle name="SKIN_TOOLTIPS"改成textstyle name="hotspot_TOOLTIPS"，字体就试试楷体吧。当然这样还不够，因为我们的热点提示文字并没有指向这里，接下来找到style name="skin_hotspotstyle"，这个style中有一个onhover：

onhover="if(skin_settings.tooltips_hotspots, if(linkedscene, showtext(get(scene[get(linkedscene)].title), SKIN_TOOLTIPS)) );"

我们把onhover最后面的SKIN_TOOLTIPS改为hotspot_TOOLTIPS。（图20）

图20

搞定了热点的提示文字以后，我们换一个漂亮点的热点，还是刚才那个style name="skin_hotspotstyle"，这个style就是系统默认的那个热点，这里我们直接用官方的style，如果有同学觉得自己写代码太麻烦，可以简单粗暴一点。用下面这个style name="skin_hotspotstyle"直接覆盖掉原本的style。

distorted="false"

tooltip=""

onclick="if(linkedscene, skin_hidetooltips(); tween(scale,0.25,0.5); tween(oy,-20,0.5); tween(alpha,0,0.5); looktohotspot(); loadscene(get(linkedscene),null,get(skin_settings.loadscene_flags),get(skin_settings.loadscene_blend)); skin_updatescroll(); );"

onloaded="if(skin_settings.tooltips_hotspots, if(linkedscene, copy(tooltip,scene[get(linkedscene)].title); loadstyle(skin_tooltips); ));hotspot_animate();"

crop="0|0|64|64"

framewidth="64" frameheight="64" frame="0" lastframe="19"

onhover="if(skin_settings.tooltips_hotspots, if(linkedscene, showtext(get(scene[get(linkedscene)].title), hotspot_TOOLTIPS)) );"

热点图片url="hotspot_ani_white_64x64x20.png"，并没有在我们的skin文件夹中，它在x:\ Krpano\examples\examples\xml-usage\animated-hotspots文件夹里面（图21）。

图21（为了方便观看，充填了黑色背景并旋转了90度）

因为需要用到crop来进行动画，所以列出了png图片宽度、高度、第一帧开始位置是0，以及最后一帧是19，onloaded是载入后执行一个动画的action。

inc(frame,1,get(lastframe),0);

mul(ypos,frame,frameheight);

txtadd(crop,'0|',get(ypos),'|',get(framewidth),'|',get(frameheight));

delayedcall(0.03, if(loaded, hotspot_animate() ) );

</action>

热点动画action，每隔0.03秒改变crop的内容，从而实现动画效果，inc是一个每次递增指定数值的方法，这里是让frame这个变量每次增加1，当到达19时，则从0又开始递增。mul是乘法运算，将高度乘以当前帧序号，得到crop中y的位置。txtadd对crop的内容进行了设定。因为每一次ypos的值都会发生变化，所以crop中所显示的内容也发生变化。最后是0.03秒后再次执行自身。

保存刷新一下，我们就可以看到新的热点了。（图22）

图22

好了，热点动起来了，接下来我们要让整个场景动起来，最简单的办法无疑是加入一个自动旋转，当然，你也可以添加一个小行星开场，但是那已经超出新手的能力范围了，所以，让我们从简单的开始。

打开tour.xml编辑，我们需要为自动旋转加入这样一串代码（请添加在空白处，不要在action或scene标签内）：

<autorotate enabled="true"

waittime="1.0"

speed="10.0"

horizon="0.0"

tofov="120.0"

这里定义了waittime用户最后一次交互行为后开启旋转时的等待时间（单位：秒），speed旋转速度（角速度，正值向右，负值向左），horizon要到达的水平视点（0即为水平旋转），tofov旋转所要到达的视场。

不过一直这样转下去会让人觉得头很晕，因此我们需要添加一个开启（关闭）自动旋转的按钮，以便让它停下来。前面我们有提到过crop，这里就是利用crop来添加一个按钮到导航条里。

首先我们需要修改一下vtourskin.png这个文件，因为这张图片中没有我们需要用到的按钮图片（图23），我们需要自行添加一对按钮在这张图片的底部，对于会Photoshop的同学来说这应该不是什么难事（图24）。

图23（为了方便观看，充填了黑色背景并旋转了90度）

图24（为了方便观看，充填了黑色背景并旋转了90度）

然后在vtourskin.xml中找到layer name="skin_btn_fs"（全屏按钮）在这一行代码的下方添加以下代码：

<layer name="skin_btn_autorotate" style="skin_base|skin_glow" crop="0|640|64|64" align="bottom" x="140" y="4" scale="0.5" onloaded="if(autorotate.enabled,set(crop,'64|640|64|64'),set(crop,'0|640|64|64')" onclick="if(autorotate.enabled,set(layer[skin_btn_autorate].crop,'0|640|64|64');set(autorotate.enabled,false);stopall(),

set(layer[skin_btn_autorate].crop,'64|640|64|64');set(autorotate.enabled,true);bombtimer(0));" />

保存一下刷新，按钮出现在下面的导航条里了，不过出了点小问题（图25），开启（关闭）旋转的按钮和全屏按钮重叠了，我们需要适当调节一下全屏按钮的位置，把layer name="skin_btn_fs"代码中的x=140修改为x=180，这样全屏按钮就会向右边移动40像素，给我们的旋转按钮腾出一个位置来（图26）。

图25

图26

如果你跟着我的教程边学边做直到这里，那么恭喜你，这样的全景已经具备最基本的展示要求，logo、能够引起观看者注意的热点、以及自动旋转演示，同时也感谢你能耐心看完前面5000多字的枯燥教程，下面我们需要提高一点难度。不过在这之前需要说明一下什么是bombtimer，细心的朋友也许注意到了，前面添加layer name="skin_btn_autorotate"这行代码时，结尾有bombtimer(0)这样一段代码。

在多个场景的漫游中仅仅只有自动旋转是不够的，我们需要在一个场景旋转一段时间之后自动的切换到下一个场景中，并且当所有的场景全部浏览完成之后回到开头，这样无限循环下去，这个功能在自动展示中非常实用，而bombtimer就是为了实现这个功能。简而言之，bombtimer（定时炸弹）是一个通过控制时间变量而实现场景切换的代码。

首先我们需要修改一下action name="startup"。

在action name="startup"的action标签中加入if(autorotate.enabled,bombtimer(0));这段代码

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

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

if(autorotate.enabled,bombtimer(0));

</action>

然后在标签外的空白处加入：

这一行代码的意思是在用户交互动作之后重置bombtimer。

接下来在标签外的空白处加入一个action：

set(autorotate.enabled,true);

set(bt,%1);

add(bt,1);

delayedcall(1,bombtimer(get(bt)));

copy(bt_1,autorotate.speed);

Math.abs(bt_1);

div(bt_2,405,bt_1);

add(bt_2,autorotate.waittime);

if(bt GE bt_2, set(bt,0); nextscene(););

</action>

这个名为bombtimer的action是一个计时器函数，它先接受一个传递来的参数，也就是从第几秒开始计算，假设我们是从0开始，接着增加这个action，使bt（bombtimer）的变量增加1，直到我们设定的值然后“引爆”，delayedcall指的是延迟执行，延迟执行什么呢，bombtimer(get(bt)，设置延迟执行的主要目的是为了我们之前加入的关闭（开启）旋转按钮能够继续生效。

那么当这个bombtimer的变量增加到多少时“引爆”呢，div(bt_2,405,bt_1); 这个代码中的405指的是当画面旋转405度的时候“引爆”然后进入下一个场景nextscene()，为什么是405度而不是360，因为在这个全景漫游中，我们默认的开场视角是90度，而旋转开始的角度是从视角的最右边开始计算，也就是说，旋转开始时计数器中的参数是45度而不是我们视场中心所处的0度，这样我们增加45度以便旋转一周后能够让视场的中心回到0度。

然后我们在标签外的空白处再加入以下代码：

set(ns, get(scene[get(xml.scene)].index));

set(maxs, get(scene.count));

add(ns,1);

if(ns == maxs, set(ns,0));

loadscene(get(scene[get(ns)].name), null, MERGE, BLEND(1.5));

</action>

这个action是为ns变量载入当前场景的序号，为maxs载入场景总数，每当ns增加1时，检查它是否是最后一个场景，如果是的话，就将ns重置为0，因为第一个场景的序号index就是0，请注意Krpano中，许多系统变量都是从0开始计算，而不是1！

将前面这几段代码添加进你的tour.xml之后，你就可以开始调试一下bombtimer的效果了，在没有交互动作或关闭自动旋转的情况下，每一个场景都会旋转一周后自动切换到下一个场景，然后这样周而复始

原文链接：http://www.detu.com/huati/detail/98

阅读全文

0 0