给Krpano小白们的最最最入门级教程(二)

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

给Krpano小白们的最最最入门级教程(二)_第1张图片

图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里面。

给Krpano小白们的最最最入门级教程(二)_第2张图片

图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

给Krpano小白们的最最最入门级教程(二)_第3张图片

图17

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

给Krpano小白们的最最最入门级教程(二)_第4张图片

图18

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

给Krpano小白们的最最最入门级教程(二)_第5张图片

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

给Krpano小白们的最最最入门级教程(二)_第6张图片

图20

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