krpano 知识点.txt

krpano 知识点.txt

参考：
https://krpano.com/home/

一、应用
1.在 tour.html 中嵌入 街景。
<!-div#pano，用于存放街景，如：div#waihuanlu 对象。->
<div id="pano" style="width:100%;height:100%;"></div>
// krpano, 用于保存 krpano 接口。
let krpano = null;
// 加载一条路的街景。
embedpano({
    swf: "tour.swf",
    xml: "tour.xml",  // 街景的配置文件。
    target: "pano",  // div#pano，即，存放街景的 html dom 元素。
    html5: "auto",
    mobilescale: 1.0,
    passQueryParameters: true,
    id: "waihuanlu",  // div#waihuanlu，指定 id 的 div#krpanoSWFObject。
    // 通过 onready 字段绑定嵌入脚本的回调函数
    onready: krpano_onready_callback  // 获取 krpano js 接口对象。
});

function krpano_onready_callback(krpano_interface) {
        /*保存嵌入脚本的 krpano 接口。
        * krpano_interface，krpano js 接口对象。*/
        krpano = krpano_interface;

        /*console.log("krpano:", krpano);
        console.log("krpano_interface.parentNode:", krpano_interface.parentNode);
        console.log("view:", krpano.get("view"));
        console.log("view.fov:", krpano.get("view.fov"));
        console.log("hotspot:", krpano.get("hotspot"));
        console.log("scene:", krpano.get("scene"));
        setTimeout(function () {
            let scenes = krpano.get("scene").getArray();
            console.log("scenes:", scenes);
            console.log("scenes[1].name:", scenes[1].name);
        }, 1000);*/
}


二、krpano js 接口。
krpano，js 接口对象，即，上边的 krpano 变量，提供如下 js 函数：
    krpano.get(variable) - 返回给定 krpano 变量的值。
        variable，指的是 xml 中的全局变量。
        参考：https://krpano.com/docu/actions/#globalvarsreference
        // sceneName，当前已加载场景的名称，如：scene_ladybug_panoramic_000000。
        let sceneName = krpano.get("xml.scene");
        // 判断当前设备是否支持 html5。
        krpano.get("device.html5") -> true/false;
        krpano.get("hotspot[spot4]") -> hotspotObject[name = "spot4"]
        注：不能通过此方法，获取函数体。
    krpano.set(variable,value) - 设置给定 krpano 变量为给定的值。
    krpano.call(action) - 调用并执行任何 krpano 操作代码。
        此处的 action 指的是 tour.xml 中 action 标签中的代码。如：
        <!-- startup action - load the first scene -->
        <action name="startup" autorun="onstart">
            if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); );
            loadscene(get(startscene), null, MERGE);
            if(startactions !== null, startactions() );
        </action>
        参考：https://krpano.com/docu/actions/#actionsreference
    等。

    应用实例：
        获取并设置一个变量的值：
            let fov = Number( krpano.get("view.fov") );
            fov += 10.0;
            krpano.set("view.fov", fov);
        调用一个 krpano 操作，例如：加载另一组街景：
            krpano.call("loadpano('pano2.xml',null,MERGE,BLEND(1));");
        同一组街景中，切换下一帧（全景照片）。
            krpano.call("loadscene(" + scene[1].name + ", null, MERGE);");