案例官方下载包路径
你电脑的路径\krpano-1.19-pr14\viewer\examples\flyout-hotspots\index.html
提示:如果不明白下载包路径是什么,请查看 循序渐进(3)- krpano下载包的使用说明
热点飞出演示
效果简述
各个热点正常状态下都是变形热点,也就是distorted属性为true,当点击热点时,热点图片飞出,固定在画面中央,如同一个定位在中心的图层,当再次点击该热点时,热点飞回到原来的位置,或是点击其它在正常状态下的热点时,原来在飞出状态的热点会飞回原来的位置,新点击的热点则飞出到中央位置。
代码解释
首先热点必须是变形热点,这样的话每个热点应该具有同样的style,例如
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 |
<hotspot name="spot1" style="flyoutimage" url="image1.jpg" zorder="1" ath="45" atv="54" scale="0.4" rx="-22.5" ry="-26.25" rz="-50.1" /> <hotspot name="spot2" style="flyoutimage" url="image2.jpg" zorder="2" ath="60" atv="54" scale="0.4" rx="-22.5" ry="-26.25" rz="-50.1" /> <hotspot name="spot3" style="flyoutimage" url="image3.jpg" zorder="3" ath="75" atv="58" scale="0.4" rx="-22.5" ry="-26.25" rz="-50.1" /> |
这三个热点都有共同的style,也就是flyoutimage。如果你有其它style,例如还有一个xx1的style,那么你的热点代码应该这样写。
1 2 3 4 5 6 7 8 |
<hotspot name="spot3" style="flyoutimage|xx1" url="image3.jpg" zorder="3" ath="75" atv="58" scale="0.4" rx="-22.5" ry="-26.25" rz="-50.1" /> |
style属性里使用分隔号”|”来调用多个style。既然调用了flyoutimage,自然也得有对应的style元素。
1 2 3 4 5 6 7 8 9 |
<style name="flyoutimage" distorted="true" flying="0.0" backup_state="" backup_zorder="" flying_state="in" capture="false" onclick="flyout_hotspot()" /> |
flying属性是控制热点飞出行为的。0.0就是没有飞出的,1.0是完全飞出固定在画面中央了。
backup_state、backup_zorder、flying_state是自定义属性。
backup_state是在热点飞出时记录正常状态下的flying、rx、ry、rz与scale。以便飞回时使用tween变回对应的数值。
backup_zorder是在热点飞出时记录下正常状态下的zorder值,以便飞回时使用tween变回对应的的数值。
flying_state是记录当前热点的状态,包括了正常下、已经飞出到位、正飞出、正飞回四种状态。
另外我们把onclick对应的action也放在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 |
<!-- flyout hotspot actions --> <action name="flyout_hotspot"> for(set(i,0), i LT hotspot.count, inc(i), copy(hs, hotspot[get(i)]); if(hs.name != name AND hs.style == 'flyoutimage' AND (hs.flying_state == 'out' OR hs.flying_state == 'flyingout'), callwith(hs, flyout_hotspot() ); ); ); if(flying_state == 'flyingout', set(flying_state, 'flyingin'); , if(flying_state == 'flyingin', set(flying_state, 'flyingout'); ); ); if(flying_state == 'in', calc(backup_state, '0.0|' + rx + '|' + ry + '|' + rz + '|' + scale); copy(backup_zorder, zorder); set(flying_state, 'flyingout'); ); if(flying_state == 'out', set(flying_state, 'flyingin'); ); if(flying_state == 'flyingout', set(zorder, 99); tween(flying|rx|ry|rz|scale, '1.0|0.0|0.0|0.0|1.0', 0.5, default, set(flying_state,'out'); set(capture,true); ); ); if(flying_state == 'flyingin', sub(zorder,1); set(capture,false); tween(flying|rx|ry|rz|scale, get(backup_state), 0.5, default, set(flying_state,'in'); copy(zorder,backup_zorder); ); ); </action> |
简而言之,就是两个步骤
- 把flyout_hotspot的action代码和flyoutimage的style代码放到xml中。scene元素的外面。
- 在需要应用飞出效果的hotspot中,调用flyoutimage这个style。