更新于 2019.10.2 krpano 1.20.1
在线演示(1.18版本)
纯按钮
按钮导航条
需求说明
我们希望把案例中的导航条放到我们自己的项目中使用,在使用之前,首先要明确一点,就是默认皮肤tour.xml有这么一句:
1 |
<include url="skin/vtourskin.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.png与buttons-png-include.xml放到自己项目的根目录下。然后我们在自己的主xml文件的scene元素(tour.xml)加入
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 |
<include url="buttonsbar-include.xml" /> |
当然,我们这个移花接木只是为了体验一下“移花接木”,如果这是一个多场景的漫游,你现在是没有任何跳转到其它场景的缩略图形式的。因为我们已经将
<include url=”skin/vtourskin.xml” />
删掉了。
现在来看看buttonsbar-include.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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<krpano> <!-- 控制按钮 --> <style name="defaultskin_button" url="buttons-2.png" scale="0.5" align="lefttop" /> <layer name="defaultskin_buttons" type="container" width="360" height="40" align="bottom" y="10" scalechildren="true" scale="1.0" keep="true"> <layer name="btn_in" x="0" style="defaultskin_button" crop="320|0|80|80" onovercrop="320|80|80|80" ondown="set(fov_moveforce,-1);" onup="set(fov_moveforce,0);" /> <layer name="btn_out" x="40" style="defaultskin_button" crop="400|0|80|80" onovercrop="400|80|80|80" ondown="set(fov_moveforce,+1);" onup="set(fov_moveforce,0);" /> <layer name="btn_left" x="80" style="defaultskin_button" crop= "0|0|80|80" onovercrop= "0|80|80|80" ondown="set(hlookat_moveforce,-1);" onup="set(hlookat_moveforce,0);" /> <layer name="btn_right" x="120" style="defaultskin_button" crop= "80|0|80|80" onovercrop= "80|80|80|80" ondown="set(hlookat_moveforce,+1);" onup="set(hlookat_moveforce,0);" /> <layer name="btn_up" x="160" style="defaultskin_button" crop="160|0|80|80" onovercrop="160|80|80|80" ondown="set(vlookat_moveforce,-1);" onup="set(vlookat_moveforce,0);" /> <layer name="btn_down" x="200" style="defaultskin_button" crop="240|0|80|80" onovercrop="240|80|80|80" ondown="set(vlookat_moveforce,+1);" onup="set(vlookat_moveforce,0);" /> <layer name="btn_ctrlmode" x="240" style="defaultskin_button" crop="800|0|80|80" onovercrop="800|80|80|80" onclick="switch(control.mousetype,moveto,drag2d); switch(control.touchtype,moveto,drag2d); update_ctrl_mode();" /> <layer name="btn_autorot" x="280" style="defaultskin_button" crop="480|0|80|80" onovercrop="480|80|80|80" onclick="switch(autorotate.enabled);" /> <layer name="btn_fs" x="320" style="defaultskin_button" crop="560|0|80|80" onovercrop="560|80|80|80" onclick="switch(fullscreen);" visible="true" devices="fullscreensupport" /> </layer> <!-- 不支持全屏时 => 去掉全屏按钮 => 容器宽度变小 --> <layer name="defaultskin_buttons" width="320" devices="!fullscreensupport" /> <events name="defaultskin_buttons" keep="true" onxmlcomplete="update_ctrl_mode(); update_fs_button();" onenterfullscreen="update_fs_button();" onexitfullscreen ="update_fs_button();" /> <action name="update_ctrl_mode"> if(control.mousetype == drag2d, set(layer[btn_ctrlmode].crop, 720|0|80|80); set(layer[btn_ctrlmode].onovercrop, 720|80|80|80); , set(layer[btn_ctrlmode].crop, 800|0|80|80); set(layer[btn_ctrlmode].onovercrop, 800|80|80|80); ); </action> <action name="update_fs_button"> if(fullscreen, set(layer[btn_fs].crop, 640|0|80|80); set(layer[btn_fs].onovercrop, 640|80|80|80); , set(layer[btn_fs].crop, 560|0|80|80); set(layer[btn_fs].onovercrop, 560|80|80|80); ); </action> </krpano> |
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 |
<layer name="defaultskin_buttons" type="container" width="360" height="40" align="bottom" y="10" scalechildren="true" scale="1.0" keep="true"> |
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 |
<style name="defaultskin_button" url="buttons-2.png" scale="0.5" align="lefttop" /> |
1 |
ondown="set(fov_moveforce,-1);" onup="set(fov_moveforce,0);" |
如果你觉得-1或者+1对全景施加的幅度太大,可以使用绝对值较小的数值。
接下来是对在全屏设备的按钮的一个补充。使用了devices属性,注意有个感叹号,即对不支持全屏的设备有效。
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 |
<layer name="defaultskin_buttons" width="320" devices="!fullscreensupport" /> |
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 |
<events name="defaultskin_buttons" keep="true" onxmlcomplete="update_ctrl_mode(); update_fs_button();" onenterfullscreen="update_fs_button();" onexitfullscreen ="update_fs_button();" /> |
在 “移花接木(4)- 使用导航条按钮” 上有 2 条评论