krpano中有很多object,krpano Plugin Interface, krpano Plugin Object, krpano Base Object, krpano Interface Object, krpano Javascript Interface… 至心以为官方文档的组织形式太艰涩了,所以这里整顿下
krpano Plugin Interface
定义krpano plugin的时刻须要遵照的接口。
http://krpano.com/docu/plugininterface
定义krpano插件的时刻,基本上就是定义一个叫krpanoplugin的function,这个function会在krpano加载插件的时刻挪用到。
krpanoplugin的要领里,有几个特别的处所:
this
指向当前的plugin对象须要根据krpano Plugin Interface,在this下定义并完成几个要领。
registerplugin
,unloadplugin
必选;onresize
可选
registerplugin
当krpano要去加载该插件的时刻被挪用,挪用时会传三个参数:依次是krpano Interface Object, plugin path, krpano Plugin Object
比方:
/*
krpano HTML5 Javascript Plugin Example
*/
function krpanoplugin () {
var local = this; // save the 'this' pointer from the current plugin object
var krpano = null; // the krpano and plugin interface objects
var plugin = null;
var xml_value = 100.0; // the value for a custom xml attribute
// registerplugin - startup point for the plugin (required)
// - krpanointerface = krpano interface object
// - pluginpath = the fully qualified plugin name (e.g. "plugin[name]")
// - pluginobject = the xml plugin object itself
local.registerplugin = function (krpanointerface, pluginpath, pluginobject) {
// get the krpano interface and the plugin object
krpano = krpanointerface;
plugin = pluginobject;
// first - say hello
krpano.trace(1, "hello from plugin[" + plugin.name + "]");
// add plugin attributes
plugin.registerattribute("mode", "normal");
plugin.registerattribute("value", xml_value, value_setter, value_getter);
// add plugin action (the attribute needs to be lowercase!)
plugin.dosomething = action_dosomething;
// optionally - add some graphical content:
// register the size of the content
plugin.registercontentsize(200,200);
// use 100% width/height for automatic scaling with the plugin size
var text = document.createElement("div");
text.style.cssText = "width:100%;height:100%;"+
"display:flex;color:white;background:rgba(10,50,100,0.5);"+
"align-items:center;justify-content:center;text-align:center;";
text.innerHTML = "HTML5<br>TEST PLUGIN<br>click me";
// the plugin 'sprite' variable is the internal html element of the plugin
plugin.sprite.appendChild(text);
}
// unloadplugin - exit point for the plugin (optionally)
// - will be called from krpano when the plugin will be removed
// - everything that was added by the plugin should be removed here
local.unloadplugin = function() {
plugin = null;
krpano = null;
}
// onresize (optionally)
// - width,height = the new size for the plugin
// - when not defined then only the krpano plugin html element will be sized
local.onresize = function(width,height) {
// not used in this example
// the plugin content will resize automatically because
// of the width=100%, height=100% CSS style
return false;
}
function value_setter(newvalue) {
if (newvalue != xml_value) {
krpano.trace(1, "'value' will be changed from " + xml_value + " to " + newvalue);
xml_value = newvalue;
}
}
function value_getter () {
return xml_value;
}
function action_dosomething () {
// trace the given action arguments
krpano.trace(1, "dosomething() was called with " + arguments.length + " arguments:");
for (var i=0; i < arguments.length; i++)
krpano.trace(1, "arguments[" + i + "]=" + arguments[i]);
// trace some infos
krpano.trace(1, "mode=" + plugin.mode);
krpano.trace(1, "lookat=" + krpano.view.hlookat + " / " + krpano.view.vlookat);
// call krpano actions
plugin.accuracy = 1; // disable grid fitting for smoother size changes
krpano.call("tween(width|height, 500|100)", plugin);
krpano.call("lookto(0,0,150); wait(1.0); lookto(90,0,90);");
krpano.call("tween(width|height, 200|200)", plugin);
}
}
krpano Plugin Object
在定义krpano plugin时,个中一个接口registerplugin中的第三个参数,指代plugin对象自身。
http://krpano.com/docu/plugininterface/#plugininterface
在plugin定义时的registerplugin要领中的第三个参数krpano plugin object,实际上是xml文件中<plugin>元素的内部显现。然则除了<plugin>元素的种种属性不测,plugin object另有几个特别的属性和要领:
sprite
HTML5 – The HTML <div> element of the plugin object.
The sprite object can be used for adding custom display elements (DisplayList elements in Flash, HTML DOM elements in HTML5) to the plugin itself.
Note – when using the plugin as hotspot, then the sprite object is only available when rendering the hotspot via CSS3D (see the renderer setting)!
videoDOM
A special attribute to allow the plugin providing a HTML5 video object for rendering.
The krpano viewer will use that video object for rendering when using the plugin as hotspots or as pano image (via url=”plugin:video”).
Setup: videowidth and videoheight attributes with the size of the video need to be added to plugin object, and once the video is ready for rendering the onvideoreadyCB function of the plugin be called. For all details please see the example source code of the videoplayer plugin.
Special usage: with some tricks it’s also possible to use a HTML5 canvas object as video source. Use the canvas as videoDOM and add these ‘faked’ properties to it: readyState=4, videoWidth=canvas.width, currentTime=time or frame number (should change when the content changes).
registercontentsize(width, height)
Define the ‘default’ size of the plugin display content.
This is the size that will be used when the user hasn’t set the width or height.
updatepos()
Parse the position related settings and update the internal display object of the plugin.
After calling this function the pixelwidth and pixelheight variables will contain the final pixel sizes of the plugin element.
getfullpath()
Returns the xml embedding path/name – e.g. “plugin[name]” or “hotspot[name]”.
_assignEvents(htmlelement, mode)
krpano Interface Object
在定义krpano plugin时,个中一个接口registerplugin中的第一个参数,是内部接见krpano的直接序言(接口对象)。
http://krpano.com/docu/plugininterface/#krpanointerface
这个接口对象供应了接见全部krpano的一切构造和要领,以外还分外供应了一些要领来做数据接见,action挪用等。
这些分外的要领有:
1. set(variable, value)
2. get(variable)
3. call(actioncode, callerobject*)
4. trace(code, message)
5. parsepath(path)
6. loadFile(file, donecallback, errorcallback*)
7. loadImage(fiel, donecallback, errorcallback*)
8. screentosphere(x, y)
9. spheretoscreen(v, h)
krpano Base Object
http://krpano.com/docu/plugininterface/#baseobject
一切的xml中定义的元素、对象和数组对象,包含krpano Interface Object都是继续与krpano Base Object。(上面说过krpano Plugin Interface就是xml中的<plugin>元素,所以它也继续了base)
Base供应了一些基本的增加/注册属性或许建立子数组构造的要领:
1. registerattribute(attributename, defaultvalue, setter*, getter*)
2. removeattribute(attributename)
3. getattributes()
4. createobject(objectname)
5. removeobject(objectname)
6. createarray(arrayname)
7. removearray(arrayname)
krpano Array and Array-Item Objects
http://krpano.com/docu/plugininterface/#array
krpano中的数组对象,不同于javascript中的数组。当在xml中一个元素定义了name属性,那末实在就建立了一个krpano数组;或许是当给一个变量设置了array-path,即’arrayname[itemname].variable’时,也建立了krpano数组。
数组中的元素也是继续与krpano Base Object,而且分外供应了name
和index
属性。这些数组元素能够用来保留任何属性,要领或许是别的一个krpano数组。
比方:
var kr = document.getElementById('krSWFObject');
var hotspots = kr.get('hotspot'); // hotspots就是krpano array
var aHotspot = hotspot['spot1']; // aHotspot就是krpano array item
krpano Array Object供应的属性和要领:
1. count
2. createItem(name or index)
3. getItem(name or index)
4. renameItem(oldname:String, newname:String)
5. removeItem(name or index) / removearrayitem(name or index)
6. getArray()
krpano Array-item Object供应的属性:
1. name
2. count
krpano Javascript Interface / krpano Javascript-Interface Object
http://krpano.com/docu/js/#top
在krpano外部同步javascript操纵krpano的接口,完成这个接口的对象就是krpano Javascript-Interface Object
这个对象供应的接口有:
1. set(variable, value)
2. get(variable)
3. call(action)
4. spheretoscreen(h, v)
5. screentosphere(x, y)
ygjack: 能够看到这个接口是krpano Interface Object供应接口的子集
取得krpano Javascript-Interface Object:
var kr = document.getElementById('krpanoSWFObject'); // 'krpanoSWFObject'是默许id