具體效果請(qǐng)查看原文

krpano制作的全景在國(guó)內(nèi)應(yīng)用最多的場(chǎng)景應(yīng)該就是在微信上展示,。因?yàn)槲⑿磐c公眾號(hào)有關(guān)系，客戶希望在展示全景的同時(shí)也希望用戶能夠關(guān)注其公眾號(hào),。關(guān)注公眾號(hào)的辦法很多,，其中一種就是在微信中長(zhǎng)按二維碼進(jìn)行識(shí)別，然后便跳轉(zhuǎn)到其公眾號(hào)頁(yè)面中,。

因此以下都是按照HTML5的情況進(jìn)行講解：

如果我們?cè)趉rpano使用layer進(jìn)行彈出圖片,，無(wú)論怎么長(zhǎng)按都是識(shí)別不了。但我們知道普通頁(yè)面放個(gè)img標(biāo)簽的二維碼是可以正常在微信的瀏覽器識(shí)別的,。于是按照這個(gè)思路,，決定做個(gè)div將img標(biāo)簽放在其中，然后要把這個(gè)div放在全景所在的div的后面,，也就是在html文件中,，二維碼div要在全景的div的后面，不然的話彈出來也是會(huì)被擋?。ㄟ@個(gè)在后面證明其實(shí)意義不大）,。

也就是我們有一個(gè)按鈕實(shí)現(xiàn)了html中img標(biāo)簽的圖片的彈出。但問題是還是識(shí)別不了,。這是怎么回事呢,？于是嘗試著把全景這個(gè)div刪除掉，發(fā)現(xiàn)是可以識(shí)別二維碼的,。原來如此,，在全景這個(gè)div顯示的情況下是識(shí)別不了的。但我們不可能說真的刪掉全景這個(gè)div,，我們可以用隱藏div的方法,。也就是在xml中我們這樣寫：

<layer name="counttext" url="%SWFPATH%/plugins/textfield.swf"  vcenter="true" visible="true" alpha="1" html="二維碼" autowidth="true" keep="true" autoheight="true" align="bottom"  x="0" y="4%" css="font-family: Verdana; font-size:40px; color:#00AFC4; text-align:center; line-height:36px;" padding="5" roundedge="5"  background="true" 

       backgroundcolor="0x000000"  state="closed"

       backgroundalpha="0.65" border="true" enabled="true"

       bordercolor="0x00AFC4"

       borderalpha="1.0"

       borderwidth="5.0" onclick="if(state == closed,qrcode();set(state,opend),qrcode2();set(state,closed));"/> 

    <action name="qrcode">

    jscall('dingwei.style.visibility = "visible";');

    jscall('pano.style.visibility = "hidden";');

    </action>

    <action name="qrcode2">

    jscall('dingwei.style.visibility = "hidden";');

    jscall('pano.style.visibility = "visible";');

    </action>

counttext是一個(gè)按鈕，實(shí)現(xiàn)彈出二維碼的功能。我們給這個(gè)按鈕加了一個(gè)自定義屬性為state來記錄目前是哪個(gè)狀態(tài),，從而決定點(diǎn)擊按鈕是顯示二維碼還是關(guān)閉二維碼,。

qrcode和qrcode分別對(duì)兩個(gè)div對(duì)象進(jìn)行了隱藏和顯示。在顯示二維碼的時(shí)候就隱藏pano,，在關(guān)閉二維碼時(shí)就顯示pano,。pano也就是全景本身。注意不包括layer以及hotspot,。也就是我們盡管關(guān)閉了全景圖的顯示,，但對(duì)應(yīng)的layer和hotspot還是會(huì)顯示的，因此建議另外加一層全屏的背景層來遮擋住皮膚,，也可以另外在這個(gè)時(shí)候顯示一個(gè)關(guān)閉按鈕在右上角,，取代二維碼的關(guān)閉功能。

下面是html的代碼部分,。注意只需要確定二維碼一開始是隱藏的,。

<style>

a{ color:#fff;}

#dingwei{

padding:10px;

z-index:100;

background-color:#000000;

filter:Alpha(opacity=0);

color:#FFFFFF;

visibility:hidden;

width:500px;

height:500px;

display:block;

position: absolute;

top:50%;

left:50%;

margin-left:-250px;

margin-top:-250px;

}

img{

max-width:90%;height:auto;

}

</style>

<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;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>

<script>

embedpano({swf:"tour.swf", xml:"tour.xml", target:"pano", html5:"prefer" });

</script>

</div>

<div id="dingwei">

<div align="center" ><img src="qrcode.jpg" height="400" width="400"/></div> 

</div>

紅色的兩個(gè)div就是我們?cè)趚ml操作的對(duì)象。注意xml中jscall僅適用于krpano 1.19,，其它版本可以直接使用js,。