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

原创已于 2023-02-22 14:41:04 修改 · 2.6k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #html #前端

于 2019-08-07 17:37:02 首次发布

Krpano 同时被 2 个专栏收录

22 篇文章

订阅专栏

全景

14 篇文章

订阅专栏

本文详细介绍了如何在JavaScript与Krpano之间进行交互，提供了互动的实现示例代码，对于前端开发者在使用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对象后通过get\set\call方法进行交互的案例：

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>