最近刚开工,工作节奏还没找到,项目又不紧急,想着年前写了一个闲来无事系列(一),今天就再来第二弹,闲来无事系类(二)——多功能悬浮按钮。
功能?是不是有啥新玩意啦?——没有。。。。这次核心是把多个功能做个集合,比如导航、电话、主页、跳转商铺、扫码分享等,这些功能并不是刚需,但是时不时会用到,把它放到主屏上又觉得碍眼,占地方,干脆把它们收到一个按钮里,点击按钮时在弹出子功能集,类似iphone上的小白点:
我今天的主题就是在全景中实现“小白点”。通过本篇文章,不仅能了解到插件的使用方法,而且文章还是对一些知识点的总结,所以无论是否使用插件,这篇文章都是值得去读一读的。
首先,插件的核心文件是suspendbtns.xml,在主文件tour.xml中引入:
...
<include url="suspendbtns.xml" />
...
注意,由于使用了鼠标悬浮显示文字功能,需要引入showtext.xml,不过不用担心,showtext.xml我已经在根目录中,并且在suspendbtns.xml中引入了,所以就不用操心,大胆使用就好啦!
多功能,其实就是多个功能按钮集合,这里集成了常用的导航、电话、主页、扫码分享和店铺五个功能。
其次,按钮集合分成两个部分,一个是类似“小白点”的主按钮,用于唤起子功能按钮集合,主按钮支持拖拽,图层的拖拽想必大家在@肥宗的krpano360中文网上有所了解(http://www.krpano360.com/yihuajiemu-8/),这里对拖拽做了升级,支持边缘防溢出,所谓的防溢出,就是当按钮拖拽到屏幕边缘时,不会拖到屏幕外,而基本的拖拽方法无法做到,防溢出函数为stopoverflow,具体函数可以查看源码。这里拖动五角星,会带动按钮的拖动效果。
为了达到更好的表现效果,按钮由父子两层layer组成,父层为白色半透明,type="container",可对其添加各种效果,子层为图片(五角星),拖拽是作用在子层上,为此又写了一个子层带动父层拖拽的函数draglayer2。
演示如下:
第三、参数设置。
skin_settings中的参数为系统参数:
showtext:是否开启鼠标悬浮显示文字(默认为true);
panel_bgcolor:功能盘背景色;
panel_bgalpha:功能盘背景透明度;
panel_bgshadow:功能盘背景阴影;
user_infos中的参数为用户信息参数,主要是各个功能的参数:
homeurl:主页地址;
phonenumber:电话号码;
navurl:导航链接;
shopurl:店铺链接;
shareqrcode:分享二维码图片路径;
注意导航,相信大家已经见到许多导航插件了,其实有个十分便捷的方法来导航(以高德地图为例,其他地图类似),首先打开地图,搜索要导航的目的地,点击目的地红点,如下:
左侧会出现该地点的相关信息,在右下方有个分享,点击分享,
会出现分享链接,这个分享链接就可以作为导航链接啦,既方便有准确!
以上就是多功能按钮集合的使用,如果想修改或更换各个功能,请单独修改,功能盘为suspend_items层: