krpano插件接口

更新 2023.3.21 krpano 1.20.11

krpano为开发者提供了简单轻便的接口用于开发第三方插件。krpano插件可以是纯代码插件，用于扩展功能或控制krpano，也可以是在屏幕上展示或处理某些事情的“图形化插件”。有两种类型的插件：

插件的基础结构里含有以下公共函数，它们将在krpano中被调用：

registerplugin函数 – 当插件载入时，该插件从krpano中被调用。该函数提供了krpano Interface Object以及krpano Plugin Object。
unloadplugin函数 – 当插件从krpano中移除时，该函数被调用。这样插件添加的所有元素和事件将被移除。
此外提供了onresize函数允许插件根据屏幕大小改变插件的尺寸。

插件本身可以将自定义函数或属性直接添加/设置到krpano对象或插件对象中，实现向krpano添加自定义函数或属性。对于设置从xml中传递来的属性，提供了registerattribute函数，它可以使得属性既可以有自己的默认值，也可以接受从xml传递来的数值。registerattribute函数可以用来添加setter/getter属性-这些属性在访问变量时自动调用get或set函数-可用于在属性更改时获得通知。

HTML5 Javascript插件

krpano的Javascript插件与普通的Javascript代码是相同的。

无需特别的工具用于编译和构建，但推荐压缩代码减少文件体积。

下面是一个Javascript的插件例子：

/*
    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);
    }
}

100

101

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);

}

演示

下载地址

https://krpano.com/docu/plugininterface/pluginexample.zip

压缩HTML5 Javascript插件代码

这个步骤是可选的，但推荐压缩代码来减少js文件的体积。下面是推荐的工具。

此外，压缩过的js文件可以使用krpano加密工具进一步压缩和加密以及保护。

VIP课程仅供会员阅读，加入会员请查看网站顶部加入会员说明