码迷,mamicode.com
首页 > 其他好文 > 详细

进阶教程(9)- 添加组合框combobox

时间:2014-12-04 18:05:51      阅读:541      评论:0      收藏:0      [点我收藏+]

标签:krpano   全景   

combobox是krpano一个非常常见的组件,它是我们在网页常见的组合框,你可以利用组合框来实现场景导航或者功能分类、缩略图分组等功能。在官网案例有一个自动添加所有场景到一个combobox的案例,不过这个案例没有和cofu skin结合,本次课程我们就是把combobox和默认漫游ui结合。


首先,combobox的位置是examples/virtual-tours/scenes-with-combobox/

在线预览地址(手机可看,为HTML5样式)是

http://www.krpano.com/examples/117/examples/virtual-tours/scenes-with-combobox/scenes-with-combobox.html


在我们来看源代码是怎么一回事之前,你要确保你的plugins文件夹已经有了combobox.js和combobox.swf,



  1. <krpano onstart="loadscene(0);">

  2. <!-- combobox 插件 -->

  3. <plugin name="box" keep="true"

  4. url="%SWFPATH%/plugins/combobox.swf"

  5. alturl="%SWFPATH%/plugins/combobox.js" native="false"

  6. align="leftbottom" x="10" y="10"

  7. onloaded="fill_with_scenes();"

  8. />

  9. <!-- 自动填充combobox的一个action -->

  10. <action name="fill_with_scenes">

  11. for(set(i,0), i LT scene.count, inc(i),

  12. txtadd(itemcall, ‘loadscene(‘,get(scene[get(i)].name),‘,null,MERGE,BLEND(1));‘);

  13. addIdItem(get(scene[get(i)].name), get(scene[get(i)].title), get(itemcall));

  14. );

  15. </action>

  16. <!--场景改变时更新combobox中场景名称的action -->

  17. <action name="select_box_item">

  18. if(plugin[box].loaded,

  19. plugin[box].selectIdItem(%1);

  20. ,

  21. delayedcall(0.1, select_box_item(%1));

  22. );

  23. </action>

  24. <!-- 热点的style-->

  25. <style name="hotspotstyle" scale="0.6" zoom="true" alpha="0.3" onover="tween(alpha,1);tween(scale,1);" onout="tween(alpha,0.3);tween(scale,0.6);" ondown="onover();" onup="onout();" />

  26. <!-- 场景,在onstart时执行select_box_item -->

  27. <scene name="scene1" title="Scene 1" onstart="select_box_item(scene1);">

  28. <view hlookat="-15" vlookat="-10" fov="90" />

  29. <preview url="pano1.jpg" />

  30. <image>

  31. <cubestrip url="pano1.jpg" />

  32. </image>

  33. <hotspot name="spot2" style="hotspotstyle" url="spot2.png" ath="-42" atv="-12" onclick="looktohotspot(spot2); loadscene(scene2, null, MERGE, BLEND(1));" />

  34. </scene>

  35. <scene name="scene2" title="Scene 2" onstart="select_box_item(scene2);">

  36. <view hlookat="-110" vlookat="8" fov="100" />

  37. <preview url="pano2.jpg" />

  38. <image>

  39. <cubestrip url="pano2.jpg" />

  40. </image>

  41. <hotspot name="spot1" style="hotspotstyle" url="spot1.png" ath="165" atv="0" onclick="looktohotspot(spot1); loadscene(scene1, null, MERGE, BLEND(1));" />

  42. <hotspot name="spot3" style="hotspotstyle" url="spot3.png" ath="265" atv="0" onclick="looktohotspot(spot3); loadscene(scene3, null, MERGE, BLEND(1));" />

  43. </scene>

  44. <scene name="scene3" title="Scene 3" onstart="select_box_item(scene3);">

  45. <view hlookat="-174" vlookat="5" fov="75" />

  46. <preview url="pano3.jpg" />

  47. <image>

  48. <cubestrip url="pano3.jpg" />

  49. </image>

  50. <hotspot name="spot3" style="hotspotstyle" url="spot2.png" ath="0" atv="0" onclick="looktohotspot(spot3); loadscene(scene2, null, MERGE, BLEND(1));" />

  51. </scene>

  52. </krpano>


虽说这个看着很自动化,实际上在我看来在更新combobox的时候需要手动填写第一个参数名,也就是场景名字这一点,还是挺笨的,你如果想得到的话,可以用我之前在自定义地图改造所用过的方法,利用select_box_item(get(scene[get(xml.scene)].name)) ,这样就不用每次都要改一下了。当然你可以将get(scene[get(xml.scene)].name)放在action里写,以免onstart看得太臃肿。这样就是onstart=“select_box_item()”,把下面的代码拷贝到我们的tour.xml,这样在我们的左上角就会出现一个场景的组合框。





  1. <!-- combobox 插件 -->

  2. <plugin name="box" keep="true"

  3. url="%SWFPATH%/plugins/combobox.swf"

  4. alturl="%SWFPATH%/plugins/combobox.js" native="false"

  5. align="lefttop" x="10" y="10"

  6. onloaded="fill_with_scenes();"

  7. />

  8. <!-- 自动填充combobox的一个action -->

  9. <action name="fill_with_scenes">

  10. for(set(i,0), i LT scene.count, inc(i),

  11. txtadd(itemcall, ‘loadscene(‘,get(scene[get(i)].name),‘,null,MERGE,BLEND(1));‘);

  12. addIdItem(get(scene[get(i)].name), get(scene[get(i)].title), get(itemcall));

  13. );

  14. </action>

  15. <!--场景改变时更新combobox中场景名称的action -->

  16. <action name="select_box_item">

  17. if(plugin[box].loaded,

  18. plugin[box].selectIdItem(get(scene[get(xml.scene)].name));

  19. ,

  20. delayedcall(0.1, select_box_item(get(scene[get(xml.scene)].name)));

  21. );

  22. </action>

进阶教程(9)- 添加组合框combobox

标签:krpano   全景   

原文地址:http://blog.csdn.net/smyife/article/details/41726127

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!