krpano - embedpano 属性

ps：上一篇：在Vue项目中加载krpano全景图

属性

embedpano({
    swf:"krpano.swf", // flash渲染器 
    xml:"krpano.xml", // 主配置文件   缺省的时候会调用krpano.xml和krpano.swf  不加载设置0即可
    target:"pano", // 嵌入容器id 
    id:"krpanoSWFObject", // 当前全景id，javascript接口调用会使用此id
    bgcolor:"#000000",// 背景颜色 
    html5:"auto", // html5模式（auto：自动；prefer：优先使用html5；fallback：优先flash；only：只使用html5；always：始终使用html5-仅用于测试；never：始终使用flash；可加上webgl或css3d渲染技术，如auto+css3d） 
    flash："auto",// flash模式（auto,prefer,fallback,only,never和html设置类似） 
    wmode:"window",// flash模式设置（window：窗口；opaque：不透明；opaque-flash：不透明，仅限flash；transparent：透明的；transparent-flash：透明的，仅限flash；direct：最佳性能，但可能不兼容旧系统和浏览器）     
    localfallback:"http://localhost:8090",
    vars:{},// 在xml加载解析后设置启动变量 
    initvars：{},// 在xml加载解析前设置启动变量，可以在地址进行查询（our.html?initvars.variable=value）
    basepath:...// 基本路径 （相对于krpano.swf）
    consolelog:false,// 是否在浏览器控制台打印日志信息
    mwheel:true,// 是否启用鼠标滚轮
    focus:true,// 获得焦点 
    webglsettings:{preserveDrawingBuffer:false, depth:false, stencil:false},//webgl设置
    mobilescale:0.5, // 移动设备缩放 
    fakedevice:"",// "mobile", "tablet", "desktop"；模拟设备 （仅限测试）
    onready:function(){},// 准备就绪回调函数，一般当javascript调用krpano接口的时候，需要在此方法内
    onerror:function(){},// 错误回调函数 
    passQueryParameters:true, // 启用url查询参数（ html5, flash, wmode, mobilescale, fakedevice, initvars）作为变量传递，如tour.html?html5=only&startscene=scene2&initvars.design=flat
    });
           

使用方法

<script src="krpano.js"></script>
<div id="pano" style="width:600px; height:400px;"></div>
<script>
let krpano = null ;
  embedpano({
  	swf:"krpano.swf",//用于Flashplayer，若只html5则不需要
   	xml:"pano.xml", //主xml，若没有设置，将会使用.swf，若没有该文件，将不会启动
   	bgcolor:"#000000",//背景颜色
   	html5:"auto",//auto、prefer、fallback、only、always、never//+webgl +css3d //例子：prefer+webgl
   	//flash：'',//和html5设置一样，但是与html5相反
   	basepath:...,
   	.
   	.
   	.
   	mobilescale: 1.0,
   	target:"pano",//视图渲染的id ===》<div id="pano">,若没有target将会alert报错
   	localfallback:'http://localhost:8090',
  	passQueryParameters: true,
  	id:'默认为krpanoSWFObject',
  	vars:{}, 
  	initvars:{mypath:"./panos1/"},
  	onready:function(krpano_interface){
  		krpano = krpano_interface;
  	},
  });
</script>
           

具体有哪些属性请参考：https://krpano.com/docu/html/#top

embedpano 属性

1、默认id:"krpanoSWFObject"将会用js接口方法中作为js对象,是唯一的

当已经存id的对象时，嵌入脚本将自动在id的末尾添加数字，直到它是唯一的。

2、localfallback:'http://localhost:8090’

本地运行 krpano testing server 的url

3、vars：{…}

在xml运行后执行vars里面的属性，往xml添加新属性以及覆盖旧属性

var settings = {};
settings["onstart"] = "trace('on start...')";
settings["view.hlookat"] = 30;
embedpano({xml:"pano.xml", target:"pano", vars:settings});
           

4、initvars：{…}

在xml运行之前执行vars里面的属性，往xml添加新属性以及覆盖旧属性

embedpano({..., initvars:{mypath:"./panos1/"} });

xml：
url="%$mypath%image.jpg"

同样可以直接在url上传递参数
tour.html?initvars.variable=value
           

5、onready:…Javascript-Function…

在xml运行之前执行vars里面的属性，往xml添加新属性以及覆盖旧属性

embedpano({target:"krpanoDIV", onready:krpanoReady});

function krpanoReady(krpano)
{
    krpano.call("trace(krpano is ready...)");
}
           

6、passQueryParameters:false

为true，url所有请求的参数将会作为变量传递到视图，所以启用时，可以在url上携带html5、flash、wmode、mobilescale、fakedevice和initvars设置。

tour.html?html5=only&startscene=scene2&initvars.design=flat
           

7、removepano(id)

为true，url所有请求的参数将会作为变量传递到视图，所以启用时，可以在url上携带html5、flash、wmode、mobilescale、fakedevice和initvars设置。

embedpano({target:"panoDIV", id:"pano1"});

...
removepano("pano1");