krpano+JS：在网页中创建hotspot的思路

krpano之中默认为虚拟漫游创建hotspot（热点）的工具是一个叫editor.swf的插件，只要在xml文档中添加一行 <plugin name="editor" url="plugins/editor.swf" /> 即可（在虚拟漫游的时候还可以添加 keep="true" 参数）。

这个工具对于少量全景图的，或者不常用作在网上展示的虚拟漫游而言是好的，它的缺点是每次创建hotspot的时候都要选择文件，复制代码时不是只复制hotspot的代码，而是整个xml代码一起复制，而且自动生成的hotspot代码很累赘，一些不常用的参数也列出来，难免遇到麻烦。

特别是在网页程序上，如果靠editor.swf拷贝hotspot的代码，这样做，效率未免太低了。

如果要在一个网上的虚拟漫游管理平台中快速生成hotspot代码，只能通过krpano所支持的Flash和JavaScript之间的交互功能。在网页上可以用JS控制Flash，在Flash上也可以控制网页中的JS行为。

首先，网页上加载了krpano viewer，并且指定了ID（krpanoSWFObject），如
embedpano({swf:"pano.swf", id:"krpanoSWFObject", xml:"pano.xml", target:"pano", wmode:"transparent"});
并利用全局参数定义 var krpano=$('#krpanoSWFObject')[0]; 这样会方便很多。

当网页要执行创建hotspot的动作，就要用 krpano.call(); 调用 krpano viewer (Flash) 中的函数 addhotspot(); 。

// 创建一个叫newhotspot的hotspot，然后为newhotspot载入white样式
// white(hotspot_ani_white)是krpano的一个hotspot样式
krpano.call("addhotspot(newhotspot); hotspot[newhotspot].loadstyle(white)");

// 初始位置设在 (hla,vla) 的位置
krpano.set("hotspot[newhotspot].ath",hla);
krpano.set("hotspot[newhotspot].atv",vla);

// 设置鼠标拖动newhotspot的行为，触发网页上的repo()（重新定位）函数
krpano.set("hotspot[newhotspot].ondown","js(repo(1))");
krpano.set("hotspot[newhotspot].onup","js(repo(0))");

移动newhotspot：

// repo(1):
// 监控
repoI=setInterval(function(){
	// 鼠标在viewer上的坐标转换为球面坐标
	krpano.call("screentosphere(mouse.x, mouse.y, mouseath, mouseatv)");

	// 将newhotspot的坐标设置为球面坐标
	mah=parseFloat(krpano.get('mouseath')%360).toFixed(2);
	mav=parseFloat(krpano.get('mouseatv')).toFixed(2);
	krpano.set("hotspot[newhotspot].ath",mah);
	krpano.set("hotspot[newhotspot].atv",mav);
},10);

// repo(0):
// 停止监控
clearInterval(repoI);

然后可以根据各种参数自定义hotspot，可以简化地得到hotspot代码。上述hla和vla等参数都是可以通过监控krpano相关参数获得。

预览

No related posts.