漫游场景的title搞定以后让我们回过头来了解一下tour.xml中其他的内容(图13)。
图13
skin_settings是默认皮肤的各项参数,修改这些参数你可以对皮肤中所显示的内容进行调整,但是并不能更换掉系统默认的皮肤。
<!-- set skin settings: bingmaps? gyro? thumbnail controlling? tooltips? -->
在这一段之前有一个注释,它的内容是“设置皮肤项:必应地图?陀螺仪(重力控制)?缩略图控制?提示?”显然,为了方便对系统默认皮肤的控制,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" <控制整条导航栏的垂直位置,数字越小越往下>
<layer name="skin_logo" url="" scale="0.25" opened_οnclick="openurl('...',_blank);" />
这是一个默认的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我们会找到:
<layer name="skin_logo" keep="true" url="" x="5" y="5" capture="false" accuracy="1" state="small" οnclick="if(state == 'small', skin_openlogo(); , skin_closelogo('now'); opened_onclick(); );" />
这样一行语句,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:
<textstyle name="SKIN_TOOLTIPS" font="Arial" fontsize="16" bold="true" italic="false" background="false" border="false" textcolor="0xFFFFFF" effect="dropshadow(1,45,0x000000,4,1);" fadeintime="0.1" fadetime="0.05" />
这里定义了很多东西,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。
<style name="skin_hotspotstyle" url="hotspot_ani_white_64x64x20.png" scale="0.5" edge="top" oy="0"
distorted="false"
tooltip=""
οnclick="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。
<action name="hotspot_animate">
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度)