将近年关,闲来无事(为啥闲来无事,因为我技术好,把活都做完了呗~),展望一下明年的工作,觉得有一个项目的一项功能可以抽出来做个独立的功能,这次的发的内容不同以往,之前是先有工作,用过几轮之后才发的插件(功能),这次是先来干货,工作神马的用不用以后再说,所以,这次是——
首发!!
大概是这个样子滴~
功能其实非常简单,点击热点,会弹出多个热点选项,类似一个热点版的二级菜单。功能实现起来并不难,想弹出三个热点,就写三个热点,排好位置,先隐藏掉,点击控制热点在弹出来,想要顺滑些,在来个动画(就像上边这样),但是,写一组容易,很多组的时候一个一个写出来就麻烦了,所以热点选择板插件就是解决这个问题,把一些共性,规律性的东西封装一下,做到“拿来即用”。
使用:
1.插件核心文件是hotspot_items.xml,在主文件tour.xml中引入该文件
...
<include url="hotspot_items.xml" />
...
2.通过编辑器向全景中添加热点,修改热点属性如下:
...
<hotspot name="spot1" style="circle_blur_style" ath="-0.438" atv="14.111" items="3" onloaded="create_hsitem(hs_item)" />
...
需要注意:将热点的样式style修改为circle_blur_style,添加items属性,该属性表示弹出的选择板热点的数量,items >=1,数量最多不要超过6个,create_hsitem()用来渲染热点,并指明弹出热点的图片。这里规定:热点图片的命名规则是连续命名,即:hs_item1.png、hs_item2.png、hs_item3.png,
可以看出,create_hsitem()中的参数即为图名称去掉数字的部分,而数字部分就是图片的索引,create_hsitem()采用循环渲染的方式添加图片,这样可以省去大量重复的代码,但是在图片命名和参数引用时需要特别注意;
3.create_hsitem()接收两个参数,第一个参数是出去数字的图片名称,第二个参数是该组选择板热点的起始索引值,因为各个组的选择板热点相互独立,并无关联,所以索引值需要手动添加,这样做的好处是可以为各个组别的热点选择板创建独立的索引;如果缺省第二个参数,则该组的热点选择板的索引从0计算;例如:
第一组有三个选择板热点,缺省第二个参数,则这三个选择板的索引依次为0,1,2;创建第二组选择板热点,这组有两个热点选择板,items="2",create_hsitem(hs_item) 省略第二个参数,则该组热点的索引同样是从0开始,如果想接着第一组往下排,这需要第二个参数来定义这组索引的起始位置,create_hsitem(hs_item,3)表示这组起始索引为3,接着第一组的索引,当然也可以设置其他数值,形成不连续的跳动索引;
4.选择板热点点击事件。插件的设计初衷是点击各个分组的选择板可以根据索引值跳转对应的场景,如果需要自定义某个热点选择板的事件,需要根据其索引值单独处理;
如上图,针对不同索引值做了单独处理,index在[0,2]之间,加载对应索引的场景;index在[3,4]之间,打开大图,index=5,跳转到第一个场景;
tips:circle_blur_style的style为动态热点,如果项目中不需要动态热点,可以修改成其他style,并为热点添加点击事件:onclick="toggle_hs_items()" ,toggle_hs_items()会触发热点选择板的弹出和隐藏。
总结起来共以下两点:
1.修改热点属性,添加style,items属性,onloaded事件;
2. 注意图片命名规则;
3.热点选择板点击事件可自定义特性;