Krpano的插件可以方便的实现一些效果，尤其是在 xml 中使用 js 代码比较多的时候。

1. 基本结构


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

整个插件就是一个 krpanoplugin 方法，registerplugin 方法注册并初始化插件，此时获得 krpano 对象，可以进行全景的相关操作。

整个插件外部只能有这一个方法，不能有其它语句，否则会报错，因此想在外面使用诸如 import 'library' 之类的语句导入一些其它库是不行的，只能在内部使用动态导入。

文档：https://krpano.com/docu/plugininterface/

2. 注册属性

注册的属性可获取 xml 标签里设置的值，在 registerattribute 后可通过 plugin.attributename (属性名) 来获取到。registerattribute(attributename, default, setter, getter)。

3. 注册函数

注册函数后，作为 plugin 的方法，可在 xml 中被 action 调用。直接给 plugin 设置对应方法即可（方法名为小写）：


local.registerplugin = function(krpanointerface, pluginpath, pluginobject) {
  // get the krpano interface and the plugin object
  krpano = krpanointerface;
  plugin = pluginobject;

  // 必须为小写
  plugin.dosomething = doSomething;
  ...
}

function doSomething() {
  
}

如果有参数，可直接通过定义参数获得，或者使用 arguments ：


function doSomething(paramA, paramB) {
  console.log(paramA);
}
function doSomething() {
  console.log(arguments[0]);
}

4. 注册回调函数

这里主要是指 xml 中设置了某属性为 krpano action， 在 plugin 中被调用，与上面的函数相反：


<krpano>
    <plugin name="test"
            url="test.js"
            onpluginready="some_action();"
    />
    <action name="some_action">
        trace('some action called');
    </action>
</krpano>



local.registerplugin = function(krpanointerface, pluginpath, pluginobject) {
  // get the krpano interface and the plugin object
  krpano = krpanointerface;
  plugin = pluginobject;

  plugin.registerattribute('onpluginready', null);
  ...

  initPlugin();
}

function initPlugin() {
  setTimeout(() => {
    Krpano.call(krpano.onpluginready, plugin); // 调用注册的函数
  }, 2000);
}

调用时传入了 plugin 对象，因此可以在 xml 定义的 action 中直接 get() plugin 属性，而不必添加 plugin[xx]. 这样的前缀。

5. 获取 krpano 的一些对象与方法调用

获取 layer、hotspot、plugin：


// hotspot 与 plugin 同理
const layer = krpano.layer.getItem(name) // 通过 name 获取
// 遍历
krpano.layer.getArray().forEach(item => {
});

set、get 相关属性：


// 常规
Krpano.call('set(layer[a].x, 10)');
Krpano.set('layer[a].x', 10);
// 获取到对象
const layer = Krpano.layer.getItem('a');
layer.x = 10;

// 获取对象后直接获取属性
const x = layer.x;
//通过get方法
const x = Krpano.get('layer[a].x');

同时，其他的一些方法可通过 js 直接调用：


// tween
// call
Krpano.call('tween(view.fov, 10, 0.6, default, done_action();)');
// js 调用
krpano.actions.tween('view.fov', 10, 0.6, 'default', () => {
    console.log('tween finish');
});

相关方法可打印 krpano 对象查看到，文档中貌似没写，但很多可以通过 krpano.actions.xxx 调用。

Tagged in: