移花接木(25)- 动态切换皮肤

更新于 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文件。代码如下:

点击代码窗口最右侧按钮,在新窗口打开后复制代码

然后我们在地址后面加上?xml=skinselect.xml就可以了。例如

http://krpano360.com/wp-content/uploads/krpano/skinselect/tour.html?xml=skinselect.xml

这是一个透明的父元素layer,设置在左上角,所有按钮都是它的子元素。接下来就是7个按钮,使用了textfield插件来显示按钮文字,值得注意的是onclick动作,它调用的是一个名为change_skin_design的动作。

这个action记录了第一个参数,也就是design,因为我们看到tour.xml有这么几句代码

点击代码窗口最右侧按钮,在新窗口打开后复制代码

如果在元素中加入if属性,那么if中的变量必须是在载入xml之前就定义后,因为我们看到先是定义好了design,这样才能在载入tour.xml应用到上述代码的其中一行。

同时记录下当前缩略图是否弹出。

loadpanoscene是一个1.19才有的action,就是可以加载xml中的指定的scene,第一个参数就是xml地址,也就是再次加载自身,然后是当前scene的name,因为切换皮肤不用同时加载到第一个场景。最后我们将之前记录好的缩略图是否弹出的布尔值赋值回skin_settings的thumbs_opened中。

 

本站特供皮肤

QQ图片20161010071535_副本

QQ图片20161010071630_副本

链接:http://pan.baidu.com/s/1dEFCA5b 密码:bpr2