文章目录
更新于 2020.11.19 krpano 1.20.9
导言
自动旋转与自动浏览全部场景,这是做全景时经常要用到的功能,涉及到一个重要的元素,即autorotate,autorotate是一个全局性的元素,通常写在scene标签的外面即可。我们可以通过action来更改autorotate设置。例如,在scene的onstart里进行设置。
默认皮肤添加自动浏览
在tour.xml的skin_settings中,将autotour设置为true
1 2 |
<skin_settings autotour="true" …… |
这样场景可以实现自动旋转,选择一圈后跳转到下一个场景,当全部场景自动浏览完毕后,跳转到第一个场景重新开始旋转和自动浏览。
在skin文件夹的vtourskin.xml可以找到关于默认皮肤自动浏览自动旋转的核心代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<autorotate enabled="calc:skin_settings.autotour == true" waittime="5.0" accel="0.7" speed="4.0" tofov="80" oneroundrange="360" /> <events name="skin_autotour" keep="true" onautorotatestart="if(skin_settings.autotour, skin_autotour_start(); );" onautorotatestop="if(skin_settings.autotour, skin_autotour_stop(); );" onautorotateoneround="if(skin_settings.autotour, skin_nextscene_loop(+1); );" /> <action name="skin_autotour_start" scope="PRIVATE:skin_autotour"> copy(loadscene_flags_backup, global.skin_settings.loadscene_flags); set(global.skin_settings.loadscene_flags, MERGE|KEEPVIEW|KEEPMOVING|PRELOAD); copy(loadscene_blend_next_backup, global.skin_settings.loadscene_blend_next); set(global.skin_settings.loadscene_blend_next, SLIDEBLEND(2.0, 0, 0.75, linear) ); </action> <action name="skin_autotour_stop" scope="PRIVATE:skin_autotour"> copy(global.skin_settings.loadscene_flags, loadscene_flags_backup); copy(global.skin_settings.loadscene_blend_next, loadscene_blend_next_backup); </action> |
可以对上面高亮部分的waittime、accel、speed、tofov以及oneroundrange进行设置,分别控制旋转前的等待时间、从停止到旋转稳定的加速度、旋转速度、旋转到的视域以及进行自动浏览时转一圈的范围。
注意自动旋转启用时会有一个短暂的waittime(即autorotate.waittime),也即是在autorotate.enabled设置为true后,还需要一个等待时间,如果不想要这个等待时间,可以考虑执行autorotate.start()
例如在某个按钮中设置(非默认皮肤做法)
1 |
onclick="if(autorotate.isrotating, autorotate.stop(), autorotate.start() );" |
krpano 1.19 pr4后的自动循环浏览
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<autorotate enabled="true" waittime="2.0" speed="-10.0" horizon="0.0" /> <events name="onautorotateevents" keep="true" onautorotateoneround="nextscene()"/> <action name="nextscene"> autorotate.stop();wait(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)); autorotate.start(); </action> |
如果在nextscene的loadscene中使用keepmoving会导致场景初始角度的不一致。
如需要按钮控制,onclick的部分为
1 |
onclick="if(autorotate.enabled,autorotate.stop(),autorotate.start());" |
以下代码运行器只提供VIP赞助会员,VIP会员说明请查看置顶文章
另一段1.19版本可用的代码
貌似比较繁琐
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<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() ); <!-- start timer --> delayed_autoloadscene(0,7); </action> <events onmousedown="set(bt,0); " /> <action name="delayed_autoloadscene"> set(bt,%1);inc(bt,1); delayedcall(timer_pause, 1, delayed_autoloadscene(get(bt),%2)); if(bt EQ %2, set(bt,0); nextscene(%2); ); </action> <action name="nextscene"> set(ns, get(scene[get(xml.scene)].index) ); set(maxs, get(scene.count) ); inc(ns); ifnot(ns EQ maxs, loadscene(get(scene[get(ns)].name ), null, MERGE, BLEND(1));delayedcall(1,delayed_autoloadscene(0,%1)); ); </action> |
1.19-1.20版本默认皮肤可使用的自动浏览代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!-- 移除加载中文字 (覆盖tour.xml的设置) --> <skin_settings loadingtext="" /> <!-- 启用自动旋转 --> <autorotate enabled="true" waittime="3.0" accel="3.0" speed="10.0" tofov="80" /> <!-- 旋转一圈后加载下一个场景 --> <events onautorotateoneround="blend_to_next_scene_during_autorotation()" /> <!-- 修改场景载入参数增加KEEPMOVING实现旋转过程中的无缝融合 --> <action name="blend_to_next_scene_during_autorotation"> <!-- 保存当前的loadscene设置 --> push(skin_settings.loadscene_flags); push(skin_settings.loadscene_blend_next); <!-- 为无缝融合设置新的设置 --> set(skin_settings.loadscene_flags, MERGE|KEEPVIEW|KEEPMOVING|NOPREVIEW); set(skin_settings.loadscene_blend_next, 'SLIDEBLEND(1.5, 0, 0.75, linear)'); <!-- 载入下一个场景 --> skin_nextscene_loop(+1); <!-- 恢复之前的设置 --> pop(skin_settings.loadscene_blend_next); pop(skin_settings.loadscene_flags); </action> <!-- 为右键菜单增加一个自动旋转的选项 --> <contextmenu> <item name="ar" onclick="switch(autorotate.enabled);" separator="true" /> </contextmenu> <!-- 根据实际状态刷新右键菜单显示文字 --> <events oncontextmenu="calc(contextmenu.item[ar].caption, (autorotate.enabled ? 'Disable' : 'Enable') + ' Autorotation');" /> |
基本的自动旋转代码
将方框内代码替换原有的<autorotate> 标签,如果原先没有<autorotate> 标签,则选择放在<scene>标签的外面的空白处。
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 |
<autorotate enabled="true" /> |
带各种设置的自动旋转代码
将方框内代码替换原有的<autorotate> 标签,如果原先没有<autorotate> 标签,则选择放在<scene>标签的外面的空白处。
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 |
<autorotate enabled="true" waittime="5.0" speed="-3.0" horizon="0.0" tofov="120.0" /> |
speed为旋转速度。当该数值为正值时向右旋转,为负值时向左旋转。
horizon为场景在自动旋转时将达到的水平位置。
tofov为旋转中要达到的视场角。
场景开始时旋转,点击按钮切换旋转状态
1. 将下述方框的任一代码(A或B)替换原有的<autorotate> 标签,如果原先没有<autorotate> 标签,则选择放在<scene>标签的外面的空白处。
代码A
1 |
<autorotate enabled="true" /> |
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 |
<autorotate enabled="true" waittime="5.0" speed="-3.0" horizon="0.0" tofov="120.0" /> |
1 |
<layer ... onclick="switch(autorotate.enabled);" ... /> |
无按钮控制的自动旋转
自动旋转场景,场景旋转一圈后自动进入下一个场景,最后一个场景浏览结束后,进入第一个场景。
1. 将下述方框的任一代码(A或B)替换原有的<autorotate> 标签,如果原先没有<autorotate> 标签,则选择放在<scene>标签的外面的空白处。
代码A
1 |
<autorotate enabled="true" /> |
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 |
<autorotate enabled="true" waittime="5.0" speed="-3.0" horizon="0.0" tofov="120.0" /> |
1 2 3 4 |
<action name="startup"> if(startscene === null, copy(startscene,scene[0].name)); loadscene(get(startscene), null, MERGE); </action> |
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 |
<action name="startup"> if(startscene === null, copy(startscene,scene[0].name)); loadscene(get(startscene), null, MERGE); if(autorotate.enabled,bombtimer(0)); </action> |
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<events onmousedown="set(bt,0);" /> <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,360,bt_1); add(bt_2,autorotate.waittime); if(bt GE bt_2, set(bt,0); nextscene();); </action> <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> |
按钮控制的自动旋转
1. 将下述方框的任一代码(A或B)替换原有的<autorotate> 标签,如果原先没有<autorotate> 标签,则选择放在<scene>标签的外面的空白处。
代码A
1 |
<autorotate enabled="true" /> |
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 |
<autorotate enabled="true" waittime="5.0" speed="-3.0" horizon="0.0" tofov="120.0" /> |
1 |
<layer ... onclick="switch(autorotate.enabled);" ... /> |
有按钮控制的自动浏览场景
自动旋转场景,场景旋转一圈后自动进入下一个场景,最后一个场景浏览结束后,进入第一个场景。
1. 将下述方框的任一代码(A或B)替换原有的<autorotate> 标签,如果原先没有<autorotate> 标签,则选择放在<scene>标签的外面的空白处。
代码A
1 |
<autorotate enabled="true" /> |
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 |
<autorotate enabled="true" waittime="5.0" speed="-3.0" horizon="0.0" tofov="120.0" /> |
1 2 3 4 |
<action name="startup"> if(startscene === null, copy(startscene,scene[0].name)); loadscene(get(startscene), null, MERGE); </action> |
1 2 3 4 5 |
<action name="startup"> if(startscene === null, copy(startscene,scene[0].name)); loadscene(get(startscene), null, MERGE); if(autorotate.enabled,bombtimer(0)); </action> |
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<events onmousedown="set(bt,0);" /> <action name="bombtimer"> set(autorotate.enabled,true); set(bt,%1); add(bt,1); delayedcall(bomb,1, bombtimer(get(bt))); copy(bt_1,autorotate.speed); Math.abs(bt_1); div(bt_2,360,bt_1); add(bt_2,autorotate.waittime); if(bt GE bt_2, set(bt,0); nextscene();); </action> <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> |
1 |
onclick="if(autorotate.enabled,set(autorotate.enabled,false);stopdelayedcall(bomb),set(autorotate.enabled,true);bombtimer(0));" |
自动浏览全部场景时,控制单独场景的浏览视场以及速度
下面代码不包含autorotate自身的旋转代码,
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!-- 控制自动旋转的设置,包括速度、等待时间等--> <autorotate enabled="true" waittime="3.0" speed="-2.5" horizon="0.0" tofov="110.0" /> <!-- 控制当用户鼠标点击全景时,自动循环计时复位--> <events onmousedown="set(bt,0);" /> <!-- 计时器代码部分--> <action name="bombtimer" > set(autorotate.enabled,true); if(%1 == null,set(bt,0);); set(bt,%1); add(bt,1); delayedcall(bomb,1, bombtimer(get(bt))); copy(bt_1,autorotate.speed); Math.abs(bt_1); if(xml.scene === 'scene_1',set(bt_3,1);set(autorotate.speed,-2.5)); if(xml.scene === 'scene_2',set(bt_3,90);set(autorotate.speed,-2.5)); if(xml.scene === 'scene_3',set(bt_3,235);set(autorotate.speed,2.5)); if(xml.scene === 'scene_4',set(bt_3,135);set(autorotate.speed,-2.5)); if(xml.scene === 'scene_5',set(bt_3,340);set(autorotate.speed,2.5)); if(xml.scene === 'scene_6',set(bt_3,360);set(autorotate.speed,2.5)); if(xml.scene === 'scene_7',set(bt_3,260);set(autorotate.speed,2.5)); if(xml.scene === 'scene_8',set(bt_3,185);set(autorotate.speed,2.5)); div(bt_2,bt_3,bt_1); add(bt_2,autorotate.waittime); if(bt GE bt_2, set(bt,0); nextscene();); </action> <!-- 进入下一个场景--> <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> |
1.实际上我们要修改的是bombtimer里的bt_2, 在其它代码不变的情况下,我们不需要计算bt_2,而是使用确定的数值进行取代。
1 2 3 4 5 6 7 |
<action name="bombtimer"> set(autorotate.enabled,true); set(bt,%1); add(bt,1); delayedcall(bomb,1, bombtimer(get(bt))); if(bt GE 10, set(bt,0); nextscene();); </action> |
按钮控制跳转到下一个场景
1 |
onclick="loadscene(calc(scene[get(xml.scene)].index == scene.count - 1 ? scene[0].name : scene[calc(scene[get(xml.scene)].index + 1)].name),null, MERGE, BLEND(1));" |
自动旋转以及循环浏览全部场景(适用于1.18以上)
1 2 3 4 5 |
<krpano version="1.18" title="Corfu Holiday Trip" onstart="wait(0);startup();"> <include url="skin/vtourskin.xml" /> <include url="autorotate.xml" /> |
- 将下载的autorotate.xml放在根目录下,也就是与tour.xml同一目录。
- 同时加入上述高亮的代码,也就是include进相应的xml文件。
- 如果你的漫游有按钮是控制切换自动旋转的,请更改onclick属性为
1onclick="if(autorotate.enabled,set(autorotate.enabled,false);stopdelayedcall(bomb),set(autorotate.enabled,true);bombtimer(0));"
以下隐藏内容只提供VIP赞助会员,VIP会员说明请查看置顶文章
自动循环浏览全部场景(按照规定时间)
效果说明
这是一个常见的自动浏览代码,可以实现场景自动循环浏览,每个场景按照规定的时间在没有用户交互的情况下自动旋转特定的时间,然后跳转到下一个场景,当浏览完最后一个场景时,则跳转到第一个场景,继续循环。
在线演示
代码说明
使用时首先把timer.xml放在根目录下
然后在tour.xml中输入下面的代码
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<events name="autotour" keep="true" onxmlcomplete="autotour.reset();" onmousedown="autotour.pause();" onmouseup="autotour.reset();" autotour=" trace('event callback'); if(autorotate.enabled, add(sceneindex,scene[get(xml.scene)].index,1); if(sceneindex == scene.count, set(sceneindex,0); ); loadscene(get(sceneindex),null,merge,blend(0.7)); ); " /> |
注意,第一行高亮的krpano元素的onstart属性只需要写
1 |
timer.start(autotour,5); |
5是每个场景在用户没有与漫游发生交互时停留的时间,也就是5秒之后,进入下一个场景。
autorotate元素的内容可以自己写。
下载案例
链接:http://pan.baidu.com/s/1pLi6sg7 密码:
密码只提供VIP赞助会员,VIP会员说明请查看置顶文章