本文主要介紹如何使用krpano的JavaScript接口，來實現(xiàn)播放器的展示數(shù)據(jù)以及效果添加。
創(chuàng)建全景播放器
創(chuàng)建播放器是krpano在線展示的一個必經(jīng)過程，那么如何創(chuàng)建播放器呢？將krpano客戶端對應的krpano.js代碼和krpano.swf等相關資源文件，存放到一個站點可以訪問的位置。假如存放到站點的根目錄下，訪問基礎地址為http://localhost/。那么構建播放器的樣例代碼如下：
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三項是必填的。想要了解更多參數(shù)請點這里。那么為什么在這里的html5參數(shù)設置了prefer呢？個人經(jīng)過試驗，在大多數(shù)支持html5播放的情況下，使用html5模式會比flash模式擁有更佳的性能和體驗。
index.xml
<?xml version="1.0" encoding="utf-8" ?>
<krpano>
<security>
<allowdomain domain="*" />
</security>
</krpano>
注：krpano默認的展示效果的相關數(shù)據(jù)，都由XML文件來指定。上述配置文件并沒有相關的效果數(shù)據(jù)，所以創(chuàng)建好播放器后只有一個沒有任何內(nèi)容效果的空播放器。配置中security的allowdomain聲明允許跨域調(diào)用的跨域域名，由dimain的值指定對應域名（
*表示允許任意域名）。在非必要的情況下，為了安全性起見建議不要使用*。
krpano Javascript-Interface object
想要調(diào)用krpano的JS接口，光創(chuàng)建播放器還不夠，還需要獲得播放器的krpano Javascript-Interface object。
獲取接口對象
在創(chuàng)建播放器時，可以通過config的onready參數(shù)傳入回調(diào)函數(shù)來獲取krpano Javascript-Interface object。修改頁面的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)
接口對象的方法
krpano Javascript-Interface object擁有 set(variable,value)、 get(variable)、 call(action)、 spheretoscreen(h,v)、 screentosphere(x,y)這五個方法。那么要通過JS來設置播放器的效果，主要通過set、get、call這三個方法。使用這些方法前，需要先點這里了解一下krpano實現(xiàn)的簡單動態(tài)腳本語言。
set(variable,value)
定義或者設置krpano動態(tài)腳本語言的變量值。使用例子如下：
//定義或設置變量a為1
krpano.set("a", 1)
//設置name為layer_1的layer對應visible屬性為false
krpano.set("layer[layer_1].visible", false)
//設置name為layer_1的layer對應html屬性為'txt'
krpano.set("layer[layer_1].html", "txt")
get(variable)
獲取krpano動態(tài)腳本語言的變量值，當變量值未定義時返回null。使用例子如下：
//獲取變量值
var a = krpano.get("a")
//獲取name為layer_1的layer對應visible屬性
var visible = krpano.get("layer[layer_1].visible")
call(action)
執(zhí)行指定的任意krpano動態(tài)語言語句。使用例子如下：
//顯示krpano打印窗口
krpano.call("showlog()")
通過JavaScript添加場景
上述樣例代碼只創(chuàng)建了一個空播放器，那么我們怎么樣使用JavaScript來添加場景等相關播放器數(shù)據(jù)呢？
我們先來看一下，如何添加并設置一個場景的圖片資源。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ù)主要通過調(diào)用krpano動態(tài)語言的loadxml方法實現(xiàn)。那么loadscene方式的作用是：根據(jù)指定scene的name來加載并渲染指定的場景。詳細請參考krpano文檔。
loadxml不止可以添加場景，還可以添加任何krpano的XML配置允許的數(shù)據(jù)來達到展示效果。比如添加plugin、layer、hotspot等。但是loadxml有一定的限制，當執(zhí)行l(wèi)oadxml時，會將沒有聲明keep屬性為true的數(shù)據(jù)對象都移除并切換掉當前的場景。時間有限，今天的就先介紹到這里。使用loadxml相關注意的具體應用問題，在后續(xù)的文章中進行介紹。
