krpano各種Objects

n7then 發(fā)布于2019-08-21 14:08 / 3614人閱讀

摘要：在定義時(shí)的方法中的第三個(gè)參數(shù)，實(shí)際上是文件中元素的內(nèi)部呈現(xiàn)。但是除了元素的各種屬性意外，還有幾個(gè)特殊的屬性和方法在定義時(shí)，其中一個(gè)接口中的第一個(gè)參數(shù)，是內(nèi)部訪問(wèn)的直接媒介接口對(duì)象。數(shù)組中的元素也是繼承與，并且額外提供了和屬性。

krpano中有好多object，krpano Plugin Interface, krpano Plugin Object, krpano Base Object, krpano Interface Object, krpano Javascript Interface... 真心覺(jué)得官方文檔的組織形式太晦澀了，所以這里整理下

krpano Plugin Interface

定義krpano plugin的時(shí)候需要遵循的接口。
http://krpano.com/docu/plugininterface

定義krpano插件的時(shí)候，基本上就是定義一個(gè)叫krpanoplugin的function，這個(gè)function會(huì)在krpano加載插件的時(shí)候調(diào)用到。

krpanoplugin的方法里，有幾個(gè)特殊的地方：

this指向當(dāng)前的plugin對(duì)象

需要按照krpano Plugin Interface，在this下定義并實(shí)現(xiàn)幾個(gè)方法。registerplugin, unloadplugin必選；onresize可選

registerplugin當(dāng)krpano要去加載該插件的時(shí)候被調(diào)用，調(diào)用時(shí)會(huì)傳三個(gè)參數(shù)：依次是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
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);
    }
}

krpano Plugin Object

在定義krpano plugin時(shí)，其中一個(gè)接口registerplugin中的第三個(gè)參數(shù)，指代plugin對(duì)象本身。
http://krpano.com/docu/plugininterface/#plugininterface

在plugin定義時(shí)的registerplugin方法中的第三個(gè)參數(shù)krpano plugin object，實(shí)際上是xml文件中元素的內(nèi)部呈現(xiàn)。但是除了元素的各種屬性意外，plugin object還有幾個(gè)特殊的屬性和方法：

sprite

HTML5 - The HTML

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時(shí)，其中一個(gè)接口registerplugin中的第一個(gè)參數(shù)，是內(nèi)部訪問(wèn)krpano的直接媒介（接口對(duì)象）。
http://krpano.com/docu/plugininterface/#krpanointerface

這個(gè)接口對(duì)象提供了訪問(wèn)整個(gè)krpano的所有結(jié)構(gòu)和方法，之外還額外提供了一些方法來(lái)做數(shù)據(jù)訪問(wèn)，action調(diào)用等。

這些額外的方法有：

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中定義的元素、對(duì)象和數(shù)組對(duì)象，包括krpano Interface Object都是繼承與krpano Base Object。（上面說(shuō)過(guò)krpano Plugin Interface就是xml中的元素，所以它也繼承了base）

Base提供了一些基礎(chǔ)的添加/注冊(cè)屬性或者創(chuàng)建子數(shù)組結(jié)構(gòu)的方法：

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中的數(shù)組對(duì)象，不同于javascript中的數(shù)組。當(dāng)在xml中一個(gè)元素定義了name屬性，那么其實(shí)就創(chuàng)建了一個(gè)krpano數(shù)組；或者是當(dāng)給一個(gè)變量設(shè)置了array-path，即"arrayname[itemname].variable"時(shí)，也創(chuàng)建了krpano數(shù)組。

數(shù)組中的元素也是繼承與krpano Base Object，并且額外提供了name和index屬性。這些數(shù)組元素可以用來(lái)保存任何屬性，方法或者是另外一個(gè)krpano數(shù)組。

例如：

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外部同步j(luò)avascript操作krpano的接口，實(shí)現(xiàn)這個(gè)接口的對(duì)象就是krpano Javascript-Interface Object

這個(gè)對(duì)象提供的接口有：

1. set(variable, value)
2. get(variable)
3. call(action)
4. spheretoscreen(h, v)
5. screentosphere(x, y)

ygjack: 可以看到這個(gè)接口是krpano Interface Object提供接口的子集

獲得krpano Javascript-Interface Object:

var kr = document.getElementById("krpanoSWFObject"); // "krpanoSWFObject"是默認(rèn)id

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/87808.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

n7then

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

jsp代碼實(shí)例第105課

閱讀 3383·2021-11-23 09:51
OneTechCloud：雙11鉅惠正式開(kāi)啟！日本CN2上新，全場(chǎng)季付8折，充值余額多送10%

閱讀 2531·2021-11-09 09:46
Css Sprite(雪碧圖、精靈圖)<圖像拼合技術(shù)>

閱讀 1543·2019-08-30 15:54
HTML,CSS,JavaScript的思維導(dǎo)圖

閱讀 3223·2019-08-30 14:22
2017-05-28 前端日?qǐng)?bào)

閱讀 2970·2019-08-29 12:40
Javascript克隆對(duì)象

閱讀 1684·2019-08-26 10:33
終于搞懂這些的區(qū)別了 clientX、offsetX、screenX、pageX

閱讀 1863·2019-08-23 17:09
es6刪除數(shù)組元素或者對(duì)象元素

閱讀 1621·2019-08-23 16:11

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

krpano各種Objects

相關(guān)文章

**使用 krpano 實(shí)現(xiàn)全景視頻**

**ThinkPHP3.2+Krpano實(shí)現(xiàn)全景圖**

10-django——RESTful API 之序列化

2-django——模型

ES6引入的數(shù)據(jù)結(jié)構(gòu) - ES6 - ECMAScript特性 - Javascript核心

發(fā)表評(píng)論

0條評(píng)論

n7then

男|高級(jí)講師

TA的文章

jsp代碼實(shí)例第105課

OneTechCloud：雙11鉅惠正式開(kāi)啟！日本CN2上新，全場(chǎng)季付8折，充值余額多送10%

Css Sprite(雪碧圖、精靈圖)<圖像拼合技術(shù)>

HTML,CSS,JavaScript的思維導(dǎo)圖

2017-05-28 前端日?qǐng)?bào)

Javascript克隆對(duì)象

終于搞懂這些的區(qū)別了 clientX、offsetX、screenX、pageX

es6刪除數(shù)組元素或者對(duì)象元素

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

krpano各種Objects

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！