krpano環物場景實現

<!-- 用krpano的onstart屬性執行buildframe，該action有兩個參數，第一個參數是圖像序列所在的路徑，第二個參數是圖像總數 -->  
<krpano version="1.0.8.15" onstart="buildframes(%CURRENTXML%/objects/toyota-avalon/,36);">
 
    <!-- 在改變瀏覽器窗口大小時和縮放環物全景時執行的兩個action，實際上最終都是為了保證環物圖片的尺寸在改變窗口大小（onresize）和縮放全景（onviewchange）時保持恰當的比例 -->  
    <events onresize="updateframes()" onviewchange="updateframesscale()" />
    
    <!-- 名為frame的style，是針對36個圖像plugins要載入的style，可以看到關鍵的onloaded中執行了updateframesize的action，同時ondown中的domouserotate是實現鼠標拖拽圖像實現環物圖片切換的關鍵action -->  
    <style name="frame" keep="true" visible="false"
        align="center"
        onloaded="updateframesize(get(name));set(plugin[loadingtext].visible,false);"
        ondown="copy(oldmousex,mouse.x);domouserotate();"
    />
    
    <!-- 圖片載入中的文字顯示，主要是為了安慰用戶焦躁的心，這里也可以運用動態熱點的方式。或者你直接簡單修改html屬性中的loading，將其改為載入中 -->  
    <plugin name="loadingtext" url="plugins/textfield.swf" keep="true" zorder="100" visible="true" enabled="false"
        preload="true"
        align="center"
        autoheight="true"
        width="100"
        background="false"
        html="[p]Loading...[/p]"
        css="p {color:#FFFFFF; font-family:arial; font-size:16px }"
    />
    
    <!-- 設置左右兩側的按鈕，用戶也可以通過點擊按鈕來實現環物瀏覽效果，這個按鈕位於右側，主要功能由ondown中的dorotate實現。使環物逆時針旋轉 -->  
    <layer name="gallerynext" url="gallerybtns.png" keep="true" 
        align="right" x="0" y="0" zorder="100"
        crop="100|0|100|100"
        onovercrop="100|100|100|100"
        ondowncrop="100|100|100|100"
        ondown="set(y,1);dorotate();"
        onup="set(y,0)"
        direction="-1"
    />
    
    <!-- 左側的按鈕，使得環物順時針旋轉 -->
    <layer name="galleryprev" url="gallerybtns.png" keep="true" 
        align="left" x="0" y="0" zorder="100"
        crop="0|0|100|100"
        onovercrop="0|100|100|100"
        ondowncrop="0|100|100|100"
        ondown="set(y,1);dorotate();"
        onup="set(y,0)"
        direction="1"
    />    
    
     <!-- 這個action就是在krpano的onstart中要執行的，它有兩個參數，第一個是路徑的前半部分，第二個是圖像總數，for是循環36次建立36個圖像layer，loadstyle為之前提到的名為frame的style，之后設定全局變量currentframe，也就是當前所在的圖像，framecount為圖像總數，oldmousex為鼠標的舊位置，這樣可以通過新舊兩個X坐標的對比，實現圖像的切換，在執行完這些action之后，就是跳到showframe，這里第一個參數是0，因為不是要執行下一張或上一張圖像，是要顯示第一張圖片，而krpano的序號都是從0開始 -->  
    <action name="buildframes">
        for(set(i,0), i LT %2, inc(i),
            txtadd(fname,frame,get(i));
            txtadd(furl,%1,get(i),.jpg);
            addplugin(get(fname));
            plugin[get(fname)].loadstyle(frame);
            copy(plugin[get(fname)].url,furl);
        );
        set(currentframe,0);
        set(framecount,%2);
        set(oldmousex,0);
        showframe(0);
    </action>
    
    <!-- 圖像的源寬度和高度與當前窗口的寬度與高度進行比較，讓圖像的寬高度始終適應窗口改變，保持環物圖片與窗口大小的相對比例 -->  
    <action name="updateframesize">
        if(plugin[%1].imagewidth GT stagewidth,
            set(plugin[%1].width,100%);
            set(plugin[%1].height,prop);
        ,
            if(plugin[%1].imageheight GT stageheight,
                set(plugin[%1].width,prop);
                set(plugin[%1].height,100%);
            ,
                plugin[%1].resetsize();
            );
        );
    </action>
    
    <!-- 鼠標滾輪縮放視角時，對36個圖像進行統一的縮放操作 -->  
    <action name="updateframesscale">
        for(set(i,0), i LT framecount, inc(i),
            txtadd(fname,frame,get(i));
            sub(temp,180,view.fov);
            div(newscale,temp,70);
            copy(plugin[get(fname)].scale,newscale);
        );    
    </action>
    
    <!-- 這個action是一個36次的循環，執行updateframesize，也就是瀏覽器窗口大小改變是相關的action -->  
    <action name="updateframes">
        for(set(i,0), i LT framecount, inc(i),
            txtadd(fname,frame,get(i));
            updateframesize(get(fname));
        );        
    </action>
    
    <!-- 決定顯示哪一張圖像的action，這里實際上%1只有三種可能的值，一個是0，這個也就是環物一開始載入時會遇到，另外兩個分別是-1和1，分別是控制下一個和上一個圖像。fname是當前圖像plugin的名字，tempstr的目的就是為了隱藏上一個圖像，兩個if分別限定currentframe在0與35之間。最后ifnot控制圖像完全載入之前的載入中文字顯示-->  
    <action name="showframe">
        txtadd(fname,frame,get(currentframe));
        txtadd(tempstr,'set(plugin[',get(fname),'].visible,false);');
        ifnot(%1 == 0, delayedcall(0.03,get(tempstr)); );
        add(currentframe,%1);
        if(currentframe LT 0, sub(currentframe,framecount,1); );
        if(currentframe == framecount, set(currentframe,0); );
        txtadd(fname,frame,get(currentframe));
        set(plugin[get(fname)].visible,true);
        ifnot(plugin[get(fname)].loaded, set(plugin[loadingtext].visible,true);, set(plugin[loadingtext].visible,false); );
    </action>
 
    <!-- 左右兩側按鈕按下pressed執行showframe，通過送入-1或者1控制環物是顯示上一張還是下一張圖像，也就是順時針還是逆時針旋轉。-->  
    <action name="dorotate">
        if(pressed,
            showframe(get(direction));
            delayedcall(0.05,dorotate(););
        );
    </action>
 
    <!-- 鼠標拖放控制，通過比較新舊鼠標的X值來判斷顯示上一張還是下一張圖像 -->  
    <action name="domouserotate">
        if(pressed,
            sub(temp,oldmousex,mouse.x);
            if(temp GT 0, set(temp,1); );
            if(temp LT 0, set(temp,-1); );
            showframe(get(temp));
            copy(oldmousex,mouse.x);
            delayedcall(0.03,domouserotate(););
        );
    </action>
 
        <!-- 開始自動旋轉 - set(objautorot,true); doautorotate(); 停止自動旋轉           - set(objautorot,false);--> 
       <action name="doautorotate">
        if(objautorot,
            showframe(-1);
            delayedcall(0.1,doautorotate(););
        );
        </action>
 
    
    
</krpano>