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");