Krpano_关于js与krpano之间互动(交互)的方法

62 阅读 0 评论 41 点赞

我是靠谱客的博主安详小虾米，最近开发中收集的这篇文章主要介绍Krpano_关于js与krpano之间互动(交互)的方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

原文地址:关于js与krpano之间互动的方法 | 域图新视界

我们在js中，可以通过以下两种方式建立krpano对象，从而可以调用对应语法与krpano进行交互：

方法一：通过onready回调获取krpano HTML DOM元素:

var krpano = null;

embedpano({..., onready:krpano_onready_callback});

function krpano_onready_callback(krpano_interface)

{

krpano = krpano_onready_callback;

}

方法二：通过 document.getElementById方法建立对象，krpano默认id是krpanoSWFObject

(注意，该方法在全景div嵌入完成后时才执行，执行时间较第一个方法要迟，该方法比较常用）:

var krpano = document.getElementById("krpanoSWFObject");

***建立krpano对象后通过getsetcall方法进行交互的案例：

1、获取krpano变量:

var fov = Number( krpano.get("view.fov") );

2、设置krpano变量：

fov += 10.0;

krpano.set("view.fov", fov);

3、执行一个krpano的内部动作或自定义动作：

krpano.call("loadpano('pano2.xml',null,MERGE,BLEND(1));");

示例代码:

<!DOCTYPE html>
<html>
<head>
<title>pano</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta http-equiv="x-ua-compatible" content="IE=edge"/>
<!-- TODO ADD METADATA WITH THE DOLLHOUSE THUMB -->
<style>html{height:100%;}body{height:100%;overflow:hidden;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;font-size:16px;color:#FFFFFF;background:#000000;}</style>
</head>
<body>
<script src="tour.js"></script>
<div id="pano" style="width:100%;height:100%;">
<noscript>
<table style="width:100%;height:100%;">
<tr style="vertical-align:middle;text-align:center;">
<td>ERROR:<br><br>Javascript not activated<br><br></td>
</tr>
</table>
</noscript>
<script>
var krpano = null;
//
embedpano({
//
xml: "main.xml",
// id : "krpanoSWFObject",
//
target: "pano",
//
bgcolor: "#b1b1b1",
//
html5: "webgl+only",
//
mobilescale: 1.0,
//
consolelog: true,
//
passQueryParameters: true,
//
onready: function(jsapi) {
//
// window.krpano = jsapi.get("global");
//
var krpano = document.getElementById("krpanoSWFObject");
//
// krpano.call("");
//
// console.log("scene_00 :"+krpano.get("scene[scene_00]"));
//
// krpano.set("view.hlookat", Math.random() * 360.0 - 180.0 );]
//
krpano.set("view.fov", 500);
//
}
//
});
// embedpano({
// // swf : "../../../krpano.swf",
// path to flash viewer (use null if no flash fallback will be requiered)
// id : "krpanoSWFObject",
// xml : "main.xml",
// html5: "webgl+only",
// target : "pano",
// mobilescale: 1.0,
// consolelog : true,
// trace krpano messages also to the browser console
// passQueryParameters : true,
// pass query parameters of the url to krpano
// onready : krpano_onready_callback
// });
embedpano({
xml: "main.xml",
id : "krpanoSWFObject",
target: "pano",
bgcolor: "#b1b1b1",
html5: "webgl+only",
mobilescale: 1.0,
consolelog: true,
passQueryParameters: true,
//对应下方krpano_onready_callback函数
onready: krpano_onready_callback
});
// callback function that will be called when krpano is embedded and ready for using
function krpano_onready_callback(krpano_interface)
{
krpano = krpano_interface;
// console.log(krpano);
if(krpano){
// krpano.set("view.fov", 500);
var num = 2000;
krpano.call("testJsApi("+num+")");
krpano.set("events.onloadcomplete",
//全景图加载完时候调用 不然获取不到
function(){
krpano.set("layer[logo].scale",0.5);
console.log(krpano.get("view.hlookat"));
console.log(krpano.get("view.fov"));
console.log(krpano.get("layer[logo].scale"));
}
);
}
}
</script>
</div>
</body>
</html>