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

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

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，

<krpano onstart="loadscene(0);">
<plugin name="box" keep="true"
url="%SWFPATH%/plugins/combobox.swf"
alturl="%SWFPATH%/plugins/combobox.js" native="false"
align="leftbottom" x="10" y="10"
onloaded="fill_with_scenes();"
/>
<action name="fill_with_scenes">
for(set(i,0), i LT scene.count, inc(i),
txtadd(itemcall, 'loadscene(',get(scene[get(i)].name),',null,MERGE,BLEND(1));');
addIdItem(get(scene[get(i)].name), get(scene[get(i)].title), get(itemcall));
);
</action>
<action name="select_box_item">
if(plugin[box].loaded,
plugin[box].selectIdItem(%1);
,
delayedcall(0.1, select_box_item(%1));
);
</action>
<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();" />
<scene name="scene1" title="Scene 1" onstart="select_box_item(scene1);">
<view hlookat="-15" vlookat="-10" fov="90" />
<preview url="pano1.jpg" />
<image>
<cubestrip url="pano1.jpg" />
</image>
<hotspot name="spot2" style="hotspotstyle" url="spot2.png" ath="-42" atv="-12" onclick="looktohotspot(spot2); loadscene(scene2, null, MERGE, BLEND(1));" />
</scene>
<scene name="scene2" title="Scene 2" onstart="select_box_item(scene2);">
<view hlookat="-110" vlookat="8" fov="100" />
<preview url="pano2.jpg" />
<image>
<cubestrip url="pano2.jpg" />
</image>
<hotspot name="spot1" style="hotspotstyle" url="spot1.png" ath="165" atv="0" onclick="looktohotspot(spot1); loadscene(scene1, null, MERGE, BLEND(1));" />
<hotspot name="spot3" style="hotspotstyle" url="spot3.png" ath="265" atv="0" onclick="looktohotspot(spot3); loadscene(scene3, null, MERGE, BLEND(1));" />
</scene>
<scene name="scene3" title="Scene 3" onstart="select_box_item(scene3);">
<view hlookat="-174" vlookat="5" fov="75" />
<preview url="pano3.jpg" />
<image>
<cubestrip url="pano3.jpg" />
</image>
<hotspot name="spot3" style="hotspotstyle" url="spot2.png" ath="0" atv="0" onclick="looktohotspot(spot3); loadscene(scene2, null, MERGE, BLEND(1));" />
</scene>
</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，这样在我们的左上角就会出现一个场景的组合框。

<plugin name="box" keep="true"
url="%SWFPATH%/plugins/combobox.swf"
alturl="%SWFPATH%/plugins/combobox.js" native="false"
align="lefttop" x="10" y="10"
onloaded="fill_with_scenes();"
/>
<action name="fill_with_scenes">
for(set(i,0), i LT scene.count, inc(i),
txtadd(itemcall, 'loadscene(',get(scene[get(i)].name),',null,MERGE,BLEND(1));');
addIdItem(get(scene[get(i)].name), get(scene[get(i)].title), get(itemcall));
);
</action>
<action name="select_box_item">
if(plugin[box].loaded,
plugin[box].selectIdItem(get(scene[get(xml.scene)].name));
,
delayedcall(0.1, select_box_item(get(scene[get(xml.scene)].name)));
);
</action>

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

相关推荐