移花接木(4)- 使用导航条按钮

更新于 2019.10.2 krpano 1.20.1

在线演示(1.18版本)

纯按钮

按钮导航条

 

需求说明

我们希望把案例中的导航条放到我们自己的项目中使用,在使用之前,首先要明确一点,就是默认皮肤tour.xml有这么一句:

这一句就是嵌入默认皮肤模版的代码。所以你需要先将这一句代码去掉,然后再进行下面的步骤。我们的三个案例分别在krpano 1.18.6下载包

examples/xml-usage/buttons/buttons.html

examples/xml-usage/buttonsbar/buttonsbar.html

examples/xml-usage/buttonsbar2/buttonsbar.html

提示:如果不明白下载包路径是什么,请查看 循序渐进(3)- krpano下载包的使用说明

 

方法

可以发现这三个文件夹结构是基本相似的。在这里只针对第一个路径examples/xml-usage/buttons/buttons.html进行移花接木。

首先我们把buttons-2.pngbuttons-png-include.xml放到自己项目的根目录下。然后我们在自己的主xml文件的scene元素(tour.xml)加入

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

 

QQ图片20150528160529

当然,我们这个移花接木只是为了体验一下“移花接木”,如果这是一个多场景的漫游,你现在是没有任何跳转到其它场景的缩略图形式的。因为我们已经将

<include url=”skin/vtourskin.xml” />

删掉了。

 

现在来看看buttonsbar-include.xml的核心代码:

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

我们的按钮都在一个名为defaultskin_buttons的容器内,也就是一个container里。align和y确定了该容器的位置,width和height确定容器尺寸。同时要有keep属性为true,这样才能在场景切换时不被移除。

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

同时我们还可以用style来简化代码,具体我们可以看 style元素完全解析来了解style的用法。

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

这些按钮的核心功能都体现在了其ondown、onup以及onclick事件中。例如第一个按钮的
fov_moveforce是全局变量,相当于施加一个将全景缩小的力。

如果你觉得-1或者+1对全景施加的幅度太大,可以使用绝对值较小的数值。

接下来是对在全屏设备的按钮的一个补充。使用了devices属性,注意有个感叹号,即对不支持全屏的设备有效。

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

这个events主要是考虑到除了按钮切换全屏和控制模式,也有可能在其它地方切换了,这样的话对应的按钮应该即时更新样式,因此利用了events来更新按钮样式,分别对应了两个不同的action。

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

 

延伸阅读

krpano中使用Font Awesome图标设置导航条按钮

krpano中使用html代码作为图标

在 “移花接木(4)- 使用导航条按钮” 上有 2 条评论

发表评论