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

创建全景播放器

创建播放器是krpano在线展示的一个必经过程，那么如何创建播放器呢？将krpano客户端对应的krpano.js代码和krpano.swf等相关资源文件，存放到一个站点可以访问的位置。假如存放到站点的根目录下，访问基础地址为http://localhost/。那么构建播放器的样例代码如下：

index.html

html,body{width:100%;height:100%;}varconfig = {target:"container", swf:"krpano.swf", xml:"index.xml", html5:"prefer"}    embedpano(config)

注：config参数中，只有target、swf、xml三项是必填的。想要了解更多参数请点这里。那么为什么在这里的html5参数设置了prefer呢？个人经过试验，在大多数支持html5播放的情况下，使用html5模式会比flash模式拥有更佳的性能和体验。

index.xml

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

krpano Javascript-Interface object

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

获取接口对象

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

varkrpanoReady =function(krpano){//函数传入的krpano参数就是krpano Javascript-Interface object//显示krpano打印窗口krpano.call("showlog()")}varconfig = {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实现的简单动态脚本语言。

set(variable,value)

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

//定义或设置变量a为1krpano.set("a",1)//设置name为layer_1的layer对应visible属性为falsekrpano.set("layer[layer_1].visible",false)//设置name为layer_1的layer对应html属性为'txt'krpano.set("layer[layer_1].html","txt")

get(variable)

获取krpano动态脚本语言的变量值，当变量值未定义时返回null。使用例子如下：

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

call(action)

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

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

通过JavaScript添加场景

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

我们先来看一下，如何添加并设置一个场景的图片资源。JS代码如下：

varkrpanoReady =function(krpano){varxml ='

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

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

作者：洧點憾覺

转载自：//www.greatytc.com/p/284f614cc95e

链接：//www.greatytc.com/p/284f614cc95e

此为本人记录笔记

下面是官网的

loadpano(xmlpath, vars*, flags*, blend*)loadscene(scenename, vars*, flags*, blend*)loadpanoscene(xmlpath, scenename, vars*, flags*, blend*)loadxml(xmlstring, vars*, flags*, blend*)

Actions to load a new panos.

Note - only the layer, plugin, hotspot, event and lensflare elements with keep="true" will be kept when loading new panos! 

Parameters:

xmlpath (for loadpano)

The path/url of the new pano xml file to be loaded (use null for none).

When a relative path will be used then the file will be loaded from the basedirfolder, which is %FIRSTXML% by default. That means that the paths in all loadpano calls are relative to the first loaded xml file.

xmlstring (for loadxml)

The content of a xml file as string / text to be loaded (should be escaped).

scenename (for loadscene)

The name of the  element that should to be loaded.

vars (optionally)

Custom variables to set (use null for none).

These variables will be set after parsing / resolving the xml but before starting to load the pano images. This way these variables can be used either to overwrite settings from the xml or to set addtional ones.

Variables can be defined as var1=val1 pairs separated by &.

flags (optionally)

Addtional flags for loading (use null for none).

Several flags can be combined by a | character.

Available flags:

MERGE (the recommended flag)

Merges all settings from the current and the next pano.

If there are plugins and hotspots in the new panorama with the same name as the kept ones, the new elements will not be loaded.

This is the recommended setting for virtual tours.

KEEPIMAGE - keep the current image (HTML5 only)

KEEPVIEW - keep current view settings

KEEPMOVING - keep moving during the blending (HTML5 only)

KEEPSCENES - keep current scenes (loadpano only)

KEEPDISPLAY - keep current display settings

KEEPCONTROL - keep current control settings

KEEPPLUGINS - keep current loaded plugins

KEEPHOTSPOTS - keep current loaded hotspots

NOPREVIEW - ignore the tag of the new xml

KEEPBASE - a predefined combination of:

KEEPDISPLAY | KEEPCONTROL | KEEPPLUGINS

KEEPALL - a predefined combination of:

KEEPVIEW | KEEPDISPLAY | KEEPCONTROL | KEEPPLUGINS

REMOVESCENES - remove all currently defined scene elements (the same like - set(scene.count,0); )

IGNOREKEEP - ignore the keep flags and remove also the elements with keep="true"

IMAGEONLY - load only the image (and the preview) (HTML5 only, not for loadpanoscene)

blend (optionally)

Blend / fade to next panoroma - transition animation.

Available blending modes:

NOBLEND

No blending, just switch directly to the next panorama (the default).

BLEND(time, tweentype)

Blend / Cross-fade from current panorama to next one.

Parameters:

time - The blending time in seconds (default=2.0).

tweentype - The blending curve / motion shape, type of the blending animation (default=easeInCubic) - see tweentypes.

(WebGL only)COLORBLEND(time, color, tweentype)

Blend to a color and then from that color to the next panorama.

Parameters:

time - The blending time in seconds (default=2.0).

color - The in-between color in hex format (default=0x000000 = black).

tweentype - The blending curve / motion shape, type of the blending animation (default=easeOutSine) - see tweentypes.

(WebGL only)LIGHTBLEND(time, color, colorscale, tweentype)

Add or subtract a color and then cross-fade to the next panorama.

Parameters:

time - The blending time in seconds (default=2.0).

color - The color to add in hex format (default=0xFFFFFF = white).

colorscale - The scaling factor of the color, use negative values for subtracting (default=2.0).

tweentype - The blending curve / motion shape, type of the blending animation (default=easeInCubic) - see tweentypes.

(WebGL only)SLIDEBLEND(time, angle, smooth, tweentype)

A slide animation between the current and the next panorama.

Parameters:

time - The blending time in seconds (default=2.0).

angle - The angle / direction of the slide in degrees (default=0.0).

smooth - The smoothing / blurring of the transition line (0.0 to 1.0, default=0.2).

tweentype - The blending curve / motion shape, type of the blending animation (default=linear) - see tweentypes.

(WebGL only)OPENBLEND(time, shape, smooth, zoom, tweentype)

An opening animation between the current and the next panorama.

Parameters:

time - The blending time in seconds (default=2.0).

shape - A factor that defines the opening shape (-1.0 to +1.0) - 0.0=circle opening, -1.0=vertical opening, +1.0=horizontal opening (default=0.0).

smooth - The smoothing / blurring of the transition line (0.0 to 1.0, default=0.2).

zoom - Additionally zoom-out the old panorama (0.0 to 1.0, default=0.0).

tweentype - The blending curve / motion shape, type of the blending animation (default=linear) - see tweentypes.

(Flash or WebGL only)ZOOMBLEND(time, zoom, tweentype)

Zoom into the current view and cross-fade to the next panorama.

Parameters:

time - The blending time in seconds (default=2.0).

zoom - The zoom factor (default=2.0).

tweentype - The blending curve / motion shape, type of the blending animation (default=easeInOutSine) - see tweentypes.

DEMO: Pano Blending Demo (Source: blending-demo.xml)

Note - When the selected blending mode will be not supported (e.g. when using a 'WebGL only' mode and only Flash or CSS3D is available), then it will automatically fallback to the default blending mode. 

 Examples