插件简述
该插件是js代码+xml代码，只要简单地将js代码放到你的tour.html，以及将xml代码放到你的tour.xml，即可实现将一个显示浏览者当前时间的实时运行的壁钟贴合在全景环境的墙壁中，从而增强交互。
DEMO
需要点击钟面
使用方法
将案例下载到本地，将两个png图片拷贝项目文件夹，打开tour.html，将其中以下代码拷贝到你的tour.html中。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> function getTime() { var krpano = document.getElementById("krpanoSWFObject"); var date = new Date(); var hr = date.getHours(); var min = date.getMinutes(); var sec = date.getSeconds(); krpano.call("setTime(" + hr + "," + min + "," + sec + ")"); } </script> |
然后打开tour.xml，将以下代码拷贝到你的tour.xml空白处（scene代码的外面）
|
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 |
<action name="dosec" > delayedcall(1, add(hotspot[sec].rotate,6); dosec(); ifnot(hotspot[sec].rotate LT 360, set(hotspot[sec].rotate,0); add(hotspot[min].rotate,6); add(hotspot[hour].rotate,0.5); ); ifnot(hotspot[min].rotate LT 360, set(hotspot[min].rotate,0); ); ifnot(hotspot[hour].rotate LT 720, set(hotspot[hour].rotate,0); ); ); </action> <action name="setTime"> mul(hotspot[hour].rotate,%1,30); mul(hotspot[min].rotate,%2,6); mul(hotspot[sec].rotate,%3,6); mul(hdelta,%2,0.5); add(hotspot[hour].rotate,hdelta); </action> |
打开tour.xml，然后在你自己的tour.xml希望加入壁钟的scene标签里加入下面的hotspot代码，更改下面hotspot中的ath、atv来调整壁钟在全景中的三维位置，可使用editor插件进行微调。
|
1 2 3 4 5 6 7 8 9 10 11 |
<hotspot name="bg" url="%CURRENTXML%/bg.png" keep="false" edge="center" ath="0" atv="0" distorted="true" onclick="js(getTime());" /> <hotspot name="hour" url="%CURRENTXML%/st.png" keep="false" edge="bottom" ath="0" atv="0" width="20" height="95" distorted="true" zorder="1" /> <hotspot name="min" url="%CURRENTXML%/st.png" keep="false" edge="bottom" ath="0" atv="0" width="10" height="130" distorted="true" zorder="2" /> <hotspot name="sec" url="%CURRENTXML%/st.png" keep="false" edge="bottom" ath="0" atv="0" width="5" height="130" distorted="true" zorder="3" /> |
然后在对应的scene标签的onstart属性写上
|
1 |
onstart="dosec();js(getTime());" |
注意，因为调用了js，在本地演示时，请使用Safari浏览器查看。
案例下载地址
http://pan.baidu.com/s/1pJx9Svx