krpano Javascript接口Version 1.21
要从Javascript访问 krpano,需要 krpano Javascript-Interface object。此接口与 krpano HTML5 Viewer 和 krpano Flash Viewer 相同,可以相同的方式控制两个viewer。
可通过以下某种方式获取对象:
- 使用 embedding script 的 onready 回调函数(推荐方法)。
- 或通过Javascript 调用: document.getElementById(id)
id参数是viewer的唯一性id(默认为”krpanoSWFObject“)可在embedding script中进行设置。
krpano Javascript接口对象
接口对象提供以下JS函数:
- set(variable,value) – 将指定的数值赋值给指定的krpano变量。
- get(variable) – 返回指定krpano变量的数值。
- call(action) – 调用和执行任意krpano动作代码。
- spheretoscreen(h,v) – 直接调用spheretoscreen动作。
- screentosphere(x,y) – 直接调用screentosphere动作。
spheretoscreen / screentosphere函数返回一个带有x、y属性的对象。
使用JavaScript直接访问krpano(仅在HTML5下使用)
当不需要Flash支持时,可以使用下面的调用对krpano获取更直接的使用
1 |
krpano = krpano.get("global"); |
global对象是整个krpano API结构的根级别对象,调用后可以直接访问所有变量、对象和函数。对于性能而言,这将是使用krpano的最快方式。
使用案例
使用krpano JavaScript接口访问(Flash和HTML5)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
embedpano({..., html5:"auto",onready:function(krpano) { var is_flash = krpano.get("device.flash"); ... krpano.set("view.hlookat", 40); krpano.set("view.vlookat", 30); krpano.set("view.fov", 120); krpano.call("loadpano(image.xml,null,MERGE|KEEPVIEW)"); ... krpano.call("addhotspot(spot1)"); krpano.set("hotspot[spot1].url", "spot.png"); krpano.set("hotspot[spot1].ath", 123.4); krpano.set("hotspot[spot1].atv", 12.3); krpano.set("hotspot[spot1].onclick", "loadpano(pano2.xml,null,MERGE,BLEND(0.5)"); }); |
直接访问(HTML5下)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
embedpano({..., html5:"only", onready:function(krpano) { krpano = krpano.get("global"); krpano.view.hlookat = 40; krpano.view.vlookat = 30; krpano.view.fov = 120; krpano.actions.loadpano('image.xml',null,'MERGE|KEEPVIEW'); ... var hs = krpano.addhotspot(); hs.url = "spot.png"; hs.ath = 123.4; hs.atv = 12.3; hs.onclick = function() { krpano.actions.loadpano('pano2.xml',null,'MERGE','BLEND(0.5)'); } }); |
Javascript辅助函数
可直接使用部分JavaScript函数
- krpano.loadFile()
- krpano.parsePath()
- krpano.toBoolean(var)
- krpano.roundNumber(var,dp=0)
- krpano.screentosphere()
- krpano.spheretoscreen()
- krpano.spheretospace()
- krpano.spacetosphere()
Javascript Polyfills
注意 – 当下面的函数在浏览器中不可用时,krpano viewer会自动为这些 Javascript 函数安装 Polyfills:
- Object.prototype.__defineGetter__()
- Object.prototype.__defineSetter__()
- Object.assign()
- String.prototype.trim()
- Array.prototype.forEach()