本文主要介紹如何使用krpano的JavaScript接口贵少，來(lái)實(shí)現(xiàn)播放器的展示數(shù)據(jù)以及效果添加悯嗓。
創(chuàng)建全景播放器
創(chuàng)建播放器是krpano在線(xiàn)展示的一個(gè)必經(jīng)過(guò)程县钥，那么如何創(chuàng)建播放器呢伺绽？將krpano客戶(hù)端對(duì)應(yīng)的krpano.js代碼和krpano.swf等相關(guān)資源文件甲馋，存放到一個(gè)站點(diǎn)可以訪(fǎng)問(wèn)的位置埂奈。假如存放到站點(diǎn)的根目錄下，訪(fǎng)問(wèn)基礎(chǔ)地址為http://localhost/定躏。那么構(gòu)建播放器的樣例代碼如下：
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="./krpano.js"></script>
<style type="text/css">
html,body{width:100%;height:100%;}
</style>
</head>
<body>
<div id="container" style="width:100%;height:100%;"></div>
<script type="text/javascript">
var config = {target: "container", swf: "krpano.swf", xml: "index.xml", html5: "prefer"}
embedpano(config)
</script>
</body>
</html>
注：config參數(shù)中账磺，只有target芹敌、swf、xml三項(xiàng)是必填的垮抗。想要了解更多參數(shù)請(qǐng)點(diǎn)這里氏捞。那么為什么在這里的html5參數(shù)設(shè)置了prefer呢？個(gè)人經(jīng)過(guò)試驗(yàn)冒版，在大多數(shù)支持html5播放的情況下液茎，使用html5模式會(huì)比f(wàn)lash模式擁有更佳的性能和體驗(yàn)。
index.xml
<?xml version="1.0" encoding="utf-8" ?>
<krpano>
<security>
<allowdomain domain="*" />
</security>
</krpano>
注：krpano默認(rèn)的展示效果的相關(guān)數(shù)據(jù)辞嗡，都由XML文件來(lái)指定捆等。上述配置文件并沒(méi)有相關(guān)的效果數(shù)據(jù)，所以創(chuàng)建好播放器后只有一個(gè)沒(méi)有任何內(nèi)容效果的空播放器续室。配置中security的allowdomain聲明允許跨域調(diào)用的跨域域名栋烤，由dimain的值指定對(duì)應(yīng)域名（
*表示允許任意域名）。在非必要的情況下猎贴，為了安全性起見(jiàn)建議不要使用*班缎。
krpano Javascript-Interface object
想要調(diào)用krpano的JS接口，光創(chuàng)建播放器還不夠她渴，還需要獲得播放器的krpano Javascript-Interface object达址。
獲取接口對(duì)象
在創(chuàng)建播放器時(shí)，可以通過(guò)config的onready參數(shù)傳入回調(diào)函數(shù)來(lái)獲取krpano Javascript-Interface object趁耗。修改頁(yè)面的JS代碼如下：
var krpanoReady = function(krpano){
//函數(shù)傳入的krpano參數(shù)就是krpano Javascript-Interface object
//顯示krpano打印窗口
krpano.call("showlog()")
}
var config = {target: "container", swf: "krpano.swf", xml: "index.xml", html5: "prefer", onready: krpanoReady}
embedpano(config)
接口對(duì)象的方法
krpano Javascript-Interface object擁有 set(variable,value)沉唠、 get(variable)、 call(action)苛败、 spheretoscreen(h,v)满葛、 screentosphere(x,y)這五個(gè)方法。那么要通過(guò)JS來(lái)設(shè)置播放器的效果罢屈，主要通過(guò)set嘀韧、get、call這三個(gè)方法缠捌。使用這些方法前锄贷，需要先點(diǎn)這里了解一下krpano實(shí)現(xiàn)的簡(jiǎn)單動(dòng)態(tài)腳本語(yǔ)言。
set(variable,value)
定義或者設(shè)置krpano動(dòng)態(tài)腳本語(yǔ)言的變量值曼月。使用例子如下：
//定義或設(shè)置變量a為1
krpano.set("a", 1)
//設(shè)置name為layer_1的layer對(duì)應(yīng)visible屬性為false
krpano.set("layer[layer_1].visible", false)
//設(shè)置name為layer_1的layer對(duì)應(yīng)html屬性為'txt'
krpano.set("layer[layer_1].html", "txt")
get(variable)
獲取krpano動(dòng)態(tài)腳本語(yǔ)言的變量值谊却，當(dāng)變量值未定義時(shí)返回null。使用例子如下：
//獲取變量值
var a = krpano.get("a")
//獲取name為layer_1的layer對(duì)應(yīng)visible屬性
var visible = krpano.get("layer[layer_1].visible")
call(action)
執(zhí)行指定的任意krpano動(dòng)態(tài)語(yǔ)言語(yǔ)句哑芹。使用例子如下：
//顯示krpano打印窗口
krpano.call("showlog()")
通過(guò)JavaScript添加場(chǎng)景
上述樣例代碼只創(chuàng)建了一個(gè)空播放器炎辨，那么我們?cè)趺礃邮褂肑avaScript來(lái)添加場(chǎng)景等相關(guān)播放器數(shù)據(jù)呢？
我們先來(lái)看一下聪姿，如何添加并設(shè)置一個(gè)場(chǎng)景的圖片資源碴萧。JS代碼如下：
var krpanoReady = function(krpano){
var xml = '<scene name="scene_1"><image><sphere url="sphere.jpg" /></image></scene>'
krpano.call("loadxml(" + xml + ");loadscene(scene_1);")
}
var config = {target: "container", swf: "krpano.swf", xml: "index.xml", html5: "prefer", onready: krpanoReady}
embedpano(config)
添加數(shù)據(jù)主要通過(guò)調(diào)用krpano動(dòng)態(tài)語(yǔ)言的loadxml方法實(shí)現(xiàn)乙嘀。那么loadscene方式的作用是：根據(jù)指定scene的name來(lái)加載并渲染指定的場(chǎng)景。詳細(xì)請(qǐng)參考krpano文檔破喻。
loadxml不止可以添加場(chǎng)景乒躺，還可以添加任何krpano的XML配置允許的數(shù)據(jù)來(lái)達(dá)到展示效果。比如添加plugin低缩、layer、hotspot等曹货。但是loadxml有一定的限制咆繁，當(dāng)執(zhí)行l(wèi)oadxml時(shí)，會(huì)將沒(méi)有聲明keep屬性為true的數(shù)據(jù)對(duì)象都移除并切換掉當(dāng)前的場(chǎng)景顶籽。時(shí)間有限玩般，今天的就先介紹到這里。使用loadxml相關(guān)注意的具體應(yīng)用問(wèn)題礼饱，在后續(xù)的文章中進(jìn)行介紹坏为。
