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

漫游场景的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度)

图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')" οnclick="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));这段代码
<action name="startup">
              if(startscene === null, copy(startscene,scene[0].name));
              loadscene(get(startscene), null, MERGE);
              if(autorotate.enabled,bombtimer(0));
 </action>
然后在标签外的空白处加入:
<events οnmοusedοwn="set(bt,0); " />
这一行代码的意思是在用户交互动作之后重置bombtimer。
接下来在标签外的空白处加入一个action:
<action name="bombtimer"> 
              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度。
然后我们在标签外的空白处再加入以下代码:
<action name="nextscene"> 
              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的效果了,在没有交互动作或关闭自动旋转的情况下,每一个场景都会旋转一周后自动切换到下一个场景,然后这样周而复始
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值