搜索
您的当前位置:首页正文

krpano的JavaScript接口使用

来源:二三娱乐

本文主要介绍如何使用krpano的JavaScript接口,来实现播放器的展示数据以及效果添加。

创建全景播放器

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>

index.xml

<?xml version="1.0" encoding="utf-8" ?>
<krpano>
  <security>
    <allowdomain domain="*" />
  </security>
</krpano>

注:krpano默认的展示效果的相关数据,都由XML文件来指定。上述配置文件并没有相关的效果数据,所以创建好播放器后只有一个没有任何内容效果的空播放器。配置中security的allowdomain声明允许跨域调用的跨域域名,由dimain的值指定对应域名(*表示允许任意域名)。在非必要的情况下,为了安全性起见建议不要使用*

想要调用krpano的JS接口,光创建播放器还不够,还需要获得播放器的krpano Javascript-Interface object。

获取接口对象

在创建播放器时,可以通过config的onready参数传入回调函数来获取krpano Javascript-Interface object。修改页面的JS代码如下:

var krpanoReady = function(krpano){
  //函数传入的krpano参数就是krpano Javascript-Interface object
  //显示krpano打印窗口
  krpano.call("showlog()")
}
var config = {target: "container", swf: "krpano.swf", xml: "index.xml", html5: "prefer", onready: krpanoReady}
embedpano(config)

接口对象的方法

set(variable,value)

定义或者设置krpano动态脚本语言的变量值。使用例子如下:

//定义或设置变量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动态脚本语言的变量值,当变量值未定义时返回null。使用例子如下:

//获取变量值
var a = krpano.get("a")
//获取name为layer_1的layer对应visible属性
var visible = krpano.get("layer[layer_1].visible")

call(action)

执行指定的任意krpano动态语言语句。使用例子如下:

//显示krpano打印窗口
krpano.call("showlog()")

通过JavaScript添加场景

上述样例代码只创建了一个空播放器,那么我们怎么样使用JavaScript来添加场景等相关播放器数据呢?

我们先来看一下,如何添加并设置一个场景的图片资源。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)

loadxml不止可以添加场景,还可以添加任何krpano的XML配置允许的数据来达到展示效果。比如添加plugin、layer、hotspot等。但是loadxml有一定的限制,当执行loadxml时,会将没有声明keep属性为true的数据对象都移除并切换掉当前的场景。时间有限,今天的就先介绍到这里。使用loadxml相关注意的具体应用问题,在后续的文章中进行介绍。

Top