更新于 2017.9.21 krpano 1.19-pr13
官方下载包路径
你电脑的路径\krpano-1.19-pr13\viewer\examples\demotour-corfu-skinselect
提示:如果不明白下载包路径是什么,请查看 循序渐进(3)- krpano下载包的使用说明
krpano 1.19有个切换皮肤的案例,这对于自行选择皮肤的是个不错的案例。下面是演示。
那到底是怎么实现的呢?首先我们还是正常使用MAKE VTOUR droplet生成默认的项目。
原理解析
然后我们在vtour文件夹里新建一个skinselect.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 26 27 28 29 30 31 32 33 |
<krpano> <!-- 嵌入主xml --> <include url="tour.xml" /> <!-- 嵌入可选的皮肤选项 --> <include url="skin/vtourskin_design_flat_light.xml" if="design == 'flat_light'" /> <include url="skin/vtourskin_design_glass.xml" if="design == 'glass'" /> <include url="skin/vtourskin_design_ultra_light.xml" if="design == 'ultra_light'" /> <include url="skin/vtourskin_design_117.xml" if="design == '117'" /> <include url="skin/vtourskin_design_117round.xml" if="design == '117_round'" /> <include url="skin/vtourskin_design_black.xml" if="design == 'black'" /> <!-- 无加载文字,保持缩略图开启或关闭状态 --> <skin_settings loadingtext="" thumbs_opened="calc:skin_thumbs_last_state === 'opened' ? true : false" /> <layer name="skin_selector" keep="true" type="container" align="lefttop" x="10" y="10" width="100" height="300"> <layer name="skin1" style="webvr_button_style" html="Flat Skin (Default)" align="lefttop" y="0" onclick="change_skin_design('default');" /> <layer name="skin2" style="webvr_button_style" html="Flat Light Skin" align="lefttop" y="50" onclick="change_skin_design('flat_light');" /> <layer name="skin4" style="webvr_button_style" html="Ultra Light Skin" align="lefttop" y="100" onclick="change_skin_design('ultra_light');" /> <layer name="skin3" style="webvr_button_style" html="Glass Skin" align="lefttop" y="150" onclick="change_skin_design('glass');" /> <layer name="skin5" style="webvr_button_style" html="Version 1.17 Skin" align="lefttop" y="200" onclick="change_skin_design('117');" /> <layer name="skin6" style="webvr_button_style" html="Version 1.17 Round Skin" align="lefttop" y="250" onclick="change_skin_design('117_round');" /> <layer name="skin7" style="webvr_button_style" html="Black Skin" align="lefttop" y="300" onclick="change_skin_design('black');" /> </layer> <action name="change_skin_design"> set(design, %1); copy(skin_thumbs_last_state, layer[skin_thumbs].state); loadpanoscene('%CURRENTXML%/skinselect.xml', get(xml.scene), null, IGNOREKEEP|KEEPVIEW|KEEPMOVING, BLEND(0.5)); </action> </krpano> |
http://krpano360.com/wp-content/uploads/krpano/skinselect/tour.html?xml=skinselect.xml
1 |
skin_selector |
这是一个透明的父元素layer,设置在左上角,所有按钮都是它的子元素。接下来就是7个按钮,使用了textfield插件来显示按钮文字,值得注意的是onclick动作,它调用的是一个名为change_skin_design的动作。
这个action记录了第一个参数,也就是design,因为我们看到tour.xml有这么几句代码
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 |
<include url="skin/vtourskin_design_glass.xml" if="design === 'glass'" /> <include url="skin/vtourskin_design_flat.xml" if="design === 'flat'" /> <include url="skin/vtourskin_design_flat_light.xml" if="design === 'flat_light'" /> <include url="skin/vtourskin_design_ultra_light.xml" if="design === 'ultra_light'" /> <include url="skin/vtourskin_design_117.xml" if="design === '117'" /> |
同时记录下当前缩略图是否弹出。
loadpanoscene是一个1.19才有的action,就是可以加载xml中的指定的scene,第一个参数就是xml地址,也就是再次加载自身,然后是当前scene的name,因为切换皮肤不用同时加载到第一个场景。最后我们将之前记录好的缩略图是否弹出的布尔值赋值回skin_settings的thumbs_opened中。
本站特供皮肤
链接:http://pan.baidu.com/s/1dEFCA5b 密码:bpr2