本文介紹了使用krpano制作全景圖的一些基礎(chǔ)知識碉怔，krpano可以在瀏覽器上實(shí)現(xiàn)全景圖效果僧凰，支持flash和HTML5模式筷畦。
1.基礎(chǔ)要點(diǎn)
這里只介紹HTML5用法下的情況窒百。最少需要HTML文件黍判，XML文件以及圖片。
HTML格式
<script src=“krpano.js”></script> <!-- 引入JS腳本 -->
<!-- 包裹層篙梢，對應(yīng)于target顷帖，需要對應(yīng)id -->
<div id="pano" style="width: 600px; height: 400px; "> </div>
<script>
embedpano({ xml: "pano.xml", target: "pano" });//初始化
</script>
embedpano的參數(shù)的onready屬性，可以傳入一個函數(shù)，函數(shù)的第一個參數(shù)即為該krpano對象贬墩，使用js操作全景圖都需要使用到它榴嗅。
HTML5模式下，Swf可以省略不寫陶舞。
xml格式
<krpano>
<scene name="pano1" onstart="">
<image>
<cube url="src/pano1/pano_%s.jpg" />
</image>
</scene>
<krpano>
最外層的核心是krpano標(biāo)簽嗽测，所有內(nèi)容都需要放進(jìn)去。
image標(biāo)簽肿孵，存放場景圖片唠粥，可以有兩種模式，1圖模式以及6圖模式颁井。
1圖模式寫法
<image>
<cubestrip url="pano1.jpg" />
</image>
6圖模式寫法
<image>
<cube url="src/pano1/pano_%s.jpg" />
</image>
原生的可以使用XML語法實(shí)現(xiàn)功能厅贪，本文使用js api實(shí)現(xiàn)相同的效果。
核心方法整理
- set(variable, value) 設(shè)置屬性值
- get(variable) 獲取屬性值
- call(action) 調(diào)用xml中的各種方法
2.切換場景
在xml文件中添加<scene>標(biāo)簽來實(shí)現(xiàn)切換場景的效果雅宾，對應(yīng)的<image>標(biāo)簽需要放入<scene>中养涮。
然后使用krpano.call("loadscene(name);")方法加載場景，這里的name即為對應(yīng)xml文件中的scene的name眉抬。
用法：
loadscene(scenename, vars*, flags*, blend*);
- scenename是
<scene>的name贯吓； - vars是用于設(shè)置自定義屬性值，這些屬性值將在解析/解析xml之后蜀变，但在開始加載全景圖像之前設(shè)置悄谐。這樣，這些變量可以用來覆蓋xml的設(shè)置或設(shè)置附加的設(shè)置库北；
- flags表示加載場景的狀態(tài)標(biāo)識爬舰；
- blend表示場景切換時的效果等。例如給定值BLEND(0.5)寒瓦，表示場景切換時使用淡入淡出效果情屹，時間是0.5s。
第一個參數(shù)最常用杂腰，后三個參數(shù)都是可選的垃你，第四個參數(shù)在某些情景下也比較適用。
3.增加熱點(diǎn)
熱點(diǎn)即加在全景圖上面的標(biāo)志物喂很，如箭頭等惜颇。
在xml中，可以使用<hotspot>標(biāo)簽生成熱點(diǎn)少辣，標(biāo)簽屬性上能設(shè)置圖片資源凌摄，能設(shè)置hover事件，鼠標(biāo)點(diǎn)擊事件等等漓帅。這對于靜態(tài)的熱點(diǎn)生成會比較合適望伦，同時要求使用xml語法林说。我們希望熱點(diǎn)能動態(tài)生成，同時避免使用不熟悉的xml語法屯伞，于是使用js完成相應(yīng)操作腿箩。我們使用krpano.call("addhotspot(hs_name);")添加熱點(diǎn)，隨后給熱點(diǎn)設(shè)置各項屬性劣摇，設(shè)置熱點(diǎn)位置珠移，熱點(diǎn)圖片，以及熱點(diǎn)的各種事件等末融。
熱點(diǎn)添加后钧惧，各種屬性的設(shè)置方式：
| 描述 | 代碼 | 備注 |
|---|---|---|
| 設(shè)置熱點(diǎn)的圖片鏈接 | krpano.set("hotspot[hs_name].url", url); |
|
| 設(shè)置熱點(diǎn)的水平方向的角度 | krpano.set("hotspot[hs_name].ath", ath); |
|
| 設(shè)置熱點(diǎn)的垂直方向的角度 | krpano.set("hotspot[hs_name].atv", atv); |
ath和atv綜合決定熱點(diǎn)所在的位置 |
| 設(shè)置熱點(diǎn)是否設(shè)置3d變形 | krpano.set("hotspot[hs_name].distorted", true); |
|
| 鼠標(biāo)點(diǎn)擊的事件 | krpano.set("hotspot[hs_name].onclick", function); |
|
| 鼠標(biāo)移入的事件 | krpano.set("hotspot[hs_name].onhover", function); |
|
| 鼠標(biāo)移出的事件 | krpano.set("hotspot[hs_name].onout", function); |
注意點(diǎn)：
- 同一個場景下，各個hotspot的name不能相同勾习，否則后者會覆蓋前者浓瞪，造成只會顯示一個熱點(diǎn)的情況。
- 有可能會出現(xiàn)熱點(diǎn)不出現(xiàn)的情況巧婶，據(jù)猜測是因為乾颁，在使用addhotspot生成熱點(diǎn)后，立即設(shè)置上屬性的話艺栈，有可能加入的熱點(diǎn)還沒有生成英岭，造成屬性并沒有設(shè)置上的問題，因此可以設(shè)置短暫的延時來完成屬性的設(shè)置湿右。
4.雜項
整理視角的一些方法
- krpano.set("view.hlookat", 90) 水平方向鏡頭移動诅妹，相當(dāng)于鼠標(biāo)左右移動
- krpano.set("view.vlookat", 90) 垂直方向鏡頭移動，相當(dāng)于鼠標(biāo)上下移動
- krpano.set("view.fov", 90) 視角場毅人，相當(dāng)于鼠標(biāo)滾輪轉(zhuǎn)動
