krpano的JavaScript接口使用

比眉伴天荒 2022-09-29 14:52 382阅读 0赞

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

## 创建全景播放器 ##

创建播放器是krpano在线展示的一个必经过程，那么如何创建播放器呢？将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参数中，只有target、swf、xml三项是必填的。想要了解更多参数请点[这里][Link 1]。那么为什么在这里的html5参数设置了prefer呢？个人经过试验，在大多数支持html5播放的情况下，使用html5模式会比flash模式拥有更佳的性能和体验。

index.xml

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

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

## [krpano Javascript-Interface object][] ##

> 想要调用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)

### 接口对象的方法 ###

krpano Javascript-Interface object拥有 `set(variable,value)`、 `get(variable)`、 `call(action)`、 `spheretoscreen(h,v)`、 `screentosphere(x,y)`这五个方法。那么要通过JS来设置播放器的效果，主要通过set、get、call这三个方法。使用这些方法前，需要先[点这里][Link 2]了解一下krpano实现的简单动态脚本语言。

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)

> 添加数据主要通过调用krpano动态语言的loadxml方法实现。那么loadscene方式的作用是：根据指定scene的name来加载并渲染指定的场景。详细请参考[krpano文档][krpano]。

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

[Link 1]: http://krpano.com/docu/html/#embeddingparameters
[krpano Javascript-Interface object]: http://krpano.com/docu/js/#interfaceobject
[Link 2]: http://krpano.com/docu/actions/#top
[krpano]: http://krpano.com/docu/actions/#loadxml