krpano插件接口

更新 2022.3.7 krpano 1.20.11

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

用于krpano HTML5 viewer 的HTML5 Javascript 插件 (.js)
用于 krpano Flash viewer的Flash Actionscript3 插件 (.swf)

插件到krpano以及krpano到插件的基础接口对于HTML5和Flash插件是几乎相同的，只有系统和语言上的区别。

插件的基础结构里含有以下公共函数，它们将在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加密工具进一步压缩和加密以及保护。

Actionscript3 Flash插件

用于krpano Flash viewer的krpano flash插件可以使用Flex SDK (推荐)或 Flash Professional CS 来编译。

下面是flash插件的例子：

*
    krpano Flash AS3 Plugin Example
    for the mxmlc compiler
*/

package
{
    import flash.display.*;
    import flash.text.*;
    import flash.events.*;
    import flash.utils.*;
    import flash.system.*;
    
    [SWF(width="200", height="200", backgroundColor="#000000")]
    public class pluginexample extends Sprite
    {
        // krpano and plugin interfacing objects
        public var krpano : Object = null;
        public var plugin : Object = null;

        private var xml_value : Number = 100.0;  // the value for a custom xml attribute
        private var text : TextField = null;     // example content (text)

        public function pluginexample()
        {
            if (stage == null)
            {
                // normal startup when loaded as plugin inside krpano
                // do nothing here, wait for the 'registerplugin' call from krpano
            }
            else
            {
                // direct/standalone startup - show the plugin information / version
                stage.scaleMode = "noScale";
                stage.align = "TL";

                var txt:TextField = new TextField();
                txt.defaultTextFormat = new TextFormat("_sans",14,0xFFFFFF,false,false,false,null,null,"center");
                txt.autoSize = "center";
                txt.htmlText = "krpano\npluginexample\nversion 1.0";
                addChild(txt);

                var resizefu:Function = function(event:Event=null):void
                {
                    txt.x = (stage.stageWidth - txt.width)/2;
                    txt.y = (stage.stageHeight - txt.height)/2;
                }

                stage.addEventListener(Event.RESIZE, resizefu);

                resizefu();
            }
        }

        // 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
        public function registerplugin(krpanointerface:Object, pluginfullpath:String, pluginobject:Object):void
        {
            // 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);

            // draw a background (on the plugin itself)
            var g:Graphics = this.graphics;
            g.beginFill(0x0A3264, 0.5);
            g.drawRect(0,0, 200,200);
            g.endFill();

            // add a textfield
            text = new TextField();
            text.defaultTextFormat = new TextFormat("_sans",14,0xFFFFFF,false,false,false,null,null,"center");
            text.autoSize = "center";
            text.multiline = true;
            text.mouseEnabled = false;
            text.htmlText = "Flash<br>TEST PLUGIN<br>click me";

            // the plugin itself is already a Flash Sprite Object,
            // so to add addtional Flash DisplayObjects
            // just add them to the plugin itself (to this):
            this.addChild(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
        public function unloadplugin():void
        {
            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
        // - can be used to resize sub elements manually
        // return:
        // - return true to let krpano scale the plugin automatically
        // - return false to disable any automatic scaling
        public function onresize(width:int, height:int):Boolean
        {
            // redraw the background with the new size
            var g:Graphics = this.graphics;
            g.clear();
            g.beginFill(0x0A3264, 0.5);
            g.drawRect(0,0, width,height);
            g.endFill();

            // center the text element
            text.x = width/2 - text.textWidth/2;
            text.y = height/2 - text.textHeight/2;

            return false;   // don't do any automatically scaling
        }

        private function value_setter(newvalue:Number):void
        {
            if (newvalue != xml_value)
            {
                krpano.trace(1, "'value' will be changed from " + xml_value + " to " + newvalue);
                xml_value = newvalue;
            }
        }

        private function value_getter():Number
        {
            return xml_value;
        }

        private function action_dosomething(...rest):void
        {
            // trace the given action arguments
            krpano.trace(1, "dosomething() was called with " + rest.length + " arguments:");
            for (var i:int=0; i < rest.length; i++)
                krpano.trace(1, "arguments[" + i + "]=" + rest[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

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

krpano Flash AS3 Plugin Example

for the mxmlc compiler

package

{

import flash.display.*;

import flash.text.*;

import flash.events.*;

import flash.utils.*;

import flash.system.*;

[SWF(width="200", height="200", backgroundColor="#000000")]

public class pluginexample extends Sprite

{

// krpano and plugin interfacing objects

public var krpano : Object = null;

public var plugin : Object = null;

private var xml_value : Number = 100.0; // the value for a custom xml attribute

private var text : TextField = null; // example content (text)

public function pluginexample()

{

if (stage == null)

{

// normal startup when loaded as plugin inside krpano

// do nothing here, wait for the 'registerplugin' call from krpano

}

else

{

// direct/standalone startup - show the plugin information / version

stage.scaleMode = "noScale";

stage.align = "TL";

var txt:TextField = new TextField();

txt.defaultTextFormat = new TextFormat("_sans",14,0xFFFFFF,false,false,false,null,null,"center");

txt.autoSize = "center";

txt.htmlText = "krpano\npluginexample\nversion 1.0";

addChild(txt);

var resizefu:Function = function(event:Event=null):void

{

txt.x = (stage.stageWidth - txt.width)/2;

txt.y = (stage.stageHeight - txt.height)/2;

}

stage.addEventListener(Event.RESIZE, resizefu);

resizefu();

}

// 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

public function registerplugin(krpanointerface:Object, pluginfullpath:String, pluginobject:Object):void

{

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

// draw a background (on the plugin itself)

var g:Graphics = this.graphics;

g.beginFill(0x0A3264, 0.5);

g.drawRect(0,0, 200,200);

g.endFill();

// add a textfield

text = new TextField();

text.defaultTextFormat = new TextFormat("_sans",14,0xFFFFFF,false,false,false,null,null,"center");

text.autoSize = "center";

text.multiline = true;

text.mouseEnabled = false;

text.htmlText = "Flash<br>TEST PLUGIN<br>click me";

// the plugin itself is already a Flash Sprite Object,

// so to add addtional Flash DisplayObjects

// just add them to the plugin itself (to this):

this.addChild(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

public function unloadplugin():void

{

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

// - can be used to resize sub elements manually

// return:

// - return true to let krpano scale the plugin automatically

// - return false to disable any automatic scaling

public function onresize(width:int, height:int):Boolean

{

// redraw the background with the new size

var g:Graphics = this.graphics;

g.clear();

g.beginFill(0x0A3264, 0.5);

g.drawRect(0,0, width,height);

g.endFill();

// center the text element

text.x = width/2 - text.textWidth/2;

text.y = height/2 - text.textHeight/2;

return false; // don't do any automatically scaling

}

private function value_setter(newvalue:Number):void

{

if (newvalue != xml_value)

{

krpano.trace(1, "'value' will be changed from " + xml_value + " to " + newvalue);

xml_value = newvalue;

}

private function value_getter():Number

{

return xml_value;

}

private function action_dosomething(...rest):void

{

// trace the given action arguments

krpano.trace(1, "dosomething() was called with " + rest.length + " arguments:");

for (var i:int=0; i < rest.length; i++)

krpano.trace(1, "arguments[" + i + "]=" + rest[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

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

krpano插件接口说明文档

krpano插件接口

HTML5 Javascript插件

压缩HTML5 Javascript插件代码

Actionscript3 Flash插件

在 “krpano插件接口说明文档” 上有 1 条评论

发表评论取消回复

krpano插件接口

HTML5 Javascript插件

压缩HTML5 Javascript插件代码

Actionscript3 Flash插件

在 “krpano插件接口说明文档” 上有 1 条评论

发表评论 取消回复

发表评论取消回复