进阶教程（9）- 添加组合框combobox

标签：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);">

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

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

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

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

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

9. onloaded="fill_with_scenes();"

10. />

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

14. <action name="fill_with_scenes">

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

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

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

18. );

19. </action>

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

22. <action name="select_box_item">

23. if(plugin[box].loaded,

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

25. ,

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

27. );

28. </action>

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

32. <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();" />

35. <!-- 场景，在onstart时执行select_box_item -->

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

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

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

41. <image>

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

43. </image>

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

47. </scene>

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

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

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

54. <image>

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

56. </image>

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

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

61. </scene>

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

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

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

68. <image>

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

70. </image>

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

74. </scene>

76. </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. />

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

11. <action name="fill_with_scenes">

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

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

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

15. );

16. </action>

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

19. <action name="select_box_item">

20. if(plugin[box].loaded,

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

22. ,

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

24. );

25. </action>

进阶教程（9）- 添加组合框combobox

标签：krpano   全景   

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