1、 寫給Krpano小白們的最最最入門級教程（一）本教程案例使用krpano 1.16.9制作，與最新版本有一定區別，但不影響學習和使用。首先感謝“肥宗”的Krpano課堂，我在使用Krpano制作全景漫游時也是看著肥宗的教程一步步走過來，文中會有部分內容引用Krpano課堂教程。教程的第一部分主要是教大家如何使用Krpano并對標題做簡單修改。這篇文章不是教你如何拍攝、拼接全景照片，如果你僅僅是全景愛好者，那我想720yun提供的后臺完全能夠滿足你，因此，對全景漫游有商業需求，一定要給客戶提供HTML5網頁格式文件或者SWF文件的朋友，這篇文章能夠引導你一步步的制作出第一個屬于你自己的全景漫游

2、網頁文件。首先讓我們看看Krpano是什么樣的，打開Krpano的文件夾（圖1）。圖1一般人會想要先找應用程序，但是Krpano并不是傳統意義上的軟件，它沒有圖形界面也沒有可以雙擊打開的exe文件（加密保護文件除外），那我們怎么用它來制作全景漫游？！仔細看，你會發現文件夾里有許多Make . droplet命名的批處理文件（.bat），這些批處理文件其實就是最常用的Krpano工具（圖2）。圖2讓我們來看一下文件名MAKE OBJECT droplet；MAKE PANO (FLAT、MULTIRES、NORMAL、SINGLE-SWF) droplet；MAKE VTOUR (MULTIRE

3、S、NORMAL) droplet，從字面意思看不難理解（當然英語不好的同學可以多利用百度翻譯）MAKE OBJECT droplet指的是生成物體全景。請注意，是一件物體的全景，而不是我們平常意義的標準全景或漫游，對環物全景有興趣的同學可以試驗一下。PANO指的是標準全景，VTOUR自然就是全景漫游了，MULTIRES指的是漸進分辨率，沒有尺寸及像素限制、NORMAL指的是生成尺寸最大為2200的標準全景圖，MULTIRES和NORMAL最大的區別在于NORMAL有分辨率限制但是可以一次性載入，而MULTIRES不限制分辨率，載入時是分層漸進的，網絡帶寬有限的情況下非常適用。SINGLE-S

4、WF會生成一個最大分辨率為2200的Flash文件（請注意是一個文件，不是一個文件夾）（圖3）。FLAT可以生成一個多層漸進的2D全景圖片，不限制分辨率，適用于矩陣拼接的大型圖片圖3這里僅對我們今后所使用的工具做一個簡要介紹，本文的案例所要用到的是MAKE VTOUR (MULTIRES) droplet，制作多層漸進分辨率的全景漫游（圖4）。圖4接下來讓我們開始制作全景漫游，不過，在我們制作全景漫游之前還有一個步驟，修改文件名。說到這個就不得不說一下關于CMD命令提示符這個東西，也許很多朋友對CMD命令提示符比較陌生，你可以把它理解為運行在windows系統下的DOS操作系統，批處理文件（.

5、bat）正是以指令的形式在CMD下運行的一種特殊的程序，而CMD命令提示符本身對指令的長度是有限制的，這個限制在XP或更高版本系統系統下運行時是8191個字符，不要認為這個長度你就可以為所欲為了，事實證明，當你的照片幾乎都是中文命名并且藏在n個文件夾之后時，你是不可能完成一個20張圖片的全景漫游的。因為當你從“X:我的照片全景照片xxxxx公園”拖動3張照片到MAKE VTOUR (MULTIRES) droplet上面時，Krpano調用的命令是x:krpanokrpanotools64.exe makepano -config=templatesvtour-multires.config

6、x:我的照片全景照片xxxxx公園image1.jpg x:我的照片全景照片xxxxx公園image2.jpg x:我的照片全景照片xxxxx公園image3.jpg一旦超出長度限制，系統就會跳過或忽略，從而導致命令中斷。（詳見Krpano課堂：K經驗（5）-解決MAKE VTOUR可生成場景數的限制）之前有同學認為這個是Krpano對于生成漫游的場景數量限制，事實上Krpano本身對這方面是沒有任何限制的，唯一的限制就是CMD調用命令提示符時所生成的命令長度。解決這個問題很簡單（當然方法不止一種，這里我只說一個最簡單的，畢竟不是每個人都有耐心去輸入一長串指令），全選你需要扔進droplet的

7、圖片（最好保證它們都在一個文件夾里）點擊鼠標右鍵選擇重命名，隨便輸入一個最最最簡單的字符，比如a，你會得到a（123）命名的23張圖片（圖5）。圖5好了，現在讓我們全選這23張圖片把它們全部扔進MAKE VTOUR (MULTIRES) droplet（全選圖片，按住鼠標左鍵拖動到droplet上，然后松開鼠標左鍵.），然后等待Krpano完成你的全景漫游吧。命令運行結束時會提示“按任意鍵繼續”，ok，關掉命令提示符，這時我們會發現文件夾里多了一個名為vtour的文件夾，這個就是Krpano制作完成的全景漫游文件。這個文件夾默認會包含panos文件夾、plugins文件夾、skin文件夾、to

8、ur.html、tour.swf、tour.js、tour.xml、tour_editor.html。（圖6）圖6其中panos文件夾是存放全景漫游縮略圖、全景切片的地方。plugins文件夾存放的是我們制作漫游會用到的所有插件，不過默認的plugins文件夾中內容很少，因此漫游制作完成后，第一時間復制x:Krpanoexamplesplugins文件夾到這里并覆蓋原文件（如果你的Krpano是在官方下載的，那么文件夾的位置應該在x:examplesplugins，也就是官方提供的案例中）。skin文件夾里存放的是漫游中出現的皮膚、熱點、導航條等等圖片及vtourskin.xml文件；tour

9、.html、tour.swf分別對應HTML5和Flash格式文件，tour.js是krpano的HTML5 viewer如果不是出于特殊目的，請忽略這個文件。tour_editor.html是一個可以決定每個場景起始位置和可視化的熱點編輯器，當然如果你不打算在漫游中添加熱點，這個editor你也可以忽略它。tour.xml和vtourskin.xml存放了我們的全景漫游設置，也就是初學者看不懂的代碼存放的地方。當然現在你只要明白本文的重點都將圍繞這2個文件展開就好。漫游做好以后讓我們先來看看默認的效果怎么樣，似乎還不錯，導航條、縮略圖、上下左右放大縮小、全屏縮放，該有的都有了，感覺還不錯。但

10、既然是展示給客戶，這樣簡陋的東西多半是拿不出手的。（圖7）圖7那么讓我們一樣一樣來搞定這個半成品，首先是瀏覽器的標簽。（圖8）圖8剛剛完成的漫游都會是這樣的瀏覽器標簽，這個內容肯定不會是我們想要的東西，讓我們來改掉它，用Frontpage或者Dreamweaver打開tour.html，在代碼的第4行我們會看到（圖9）這樣一段， 這個標簽指的是標題，把“ - a (3)”改成我們想要的，比如“南湖夢幻島體驗公園”，然后保存，在瀏覽器刷新我們剛剛完成的漫游，可以看到標簽已經被修改掉了（圖10）。圖9圖10在左下方還有一串英文，這個需要我們要修改tour.xml這個文件，還是用Frontpage或

11、者Dreamweaver打開，在第一行有一個title（標題），把里面的內容改為你想要的，比如“南湖夢幻島體驗公園”（圖11），保存然后刷新一下瀏覽器。我們看到左下角的文字已經變成“南湖夢幻島體驗公園- a(1)”了。圖11繼續往下看，在每一個“scene name”標簽后面都會有“title=a (1)”，修改這個title中的內容，比如“title=北大門廣場噴泉”，保存刷新瀏覽器，我們會發現左下角的文字已經被我們替換掉了（圖12）。每一個“scene name”其實就是包含了一個漫游場景，修改后面的title，就會修改對應場景的說明文字。寫給Krpano小白們的最最最入門級教程（二）本教

12、程案例使用krpano 1.16.9制作，與最新版本有一定區別，但不影響學習和使用。首先感謝“肥宗”的Krpano課堂，我在使用Krpano制作全景漫游時也是看著肥宗的教程一步步走過來，文中會有部分內容引用Krpano課堂教程。漫游場景的title搞定以后讓我們回過頭來了解一下tour.xml中其他的內容（圖13）。圖13skin_settings是默認皮膚的各項參數，修改這些參數你可以對皮膚中所顯示的內容進行調整，但是并不能更換掉系統默認的皮膚。在這一段之前有一個注釋，它的內容是“設置皮膚項：必應地圖？陀螺儀（重力控制）？縮略圖控制？提示？”顯然，為了方便對系統默認皮膚的控制，Krpano提

13、供了一些基本參數。bingmaps=false bingmaps_key= bingmaps_zoombuttons=false gyro=true thumbs_width=120 thumbs_height=80 thumbs_padding=10 thumbs_crop=0|40|240|160前兩項屬性分別代表縮略圖的寬度和高度，第三項是每個縮略圖之間的間距，第四項是crop，因為這些縮略圖是從panos的thumb.jpg裁取出來的，thumb.jpg實際上是240*240的圖，這里截取了240*160像素。這里有一個crop，crop是指從圖片的某一個坐標點開始截取一個區域，這里的

14、0|40|240|160實際上是說從x=0 y=40的坐標點開始，截取一個x=240像素，y=160像素的圖片，坐標我們可以參考Photoshop中的信息。一旦涉及在皮膚中添加按鈕之類需要截取圖片的語句，這個crop都會出現。thumbs_opened=false thumbs_text=true thumbs_dragging=true thumbs_onhoverscrolling=false thumbs_scrollbuttons=false thumbs_scrollindicator=false tooltips指的是提示文字，也就是當鼠標移動到對應的地方時鼠標上方所顯示的文字提示

15、。tooltips_thumbs=true tooltips_hotspots=false tooltips_mapspots=false controlbar_offset=20 這是一個默認的logo放置代碼，url=是logo圖片的鏈接，你可以把自己的logo圖片放置在vtour目錄下，然后把完整的文件名（包含后綴）填入雙引號中間，scale是圖片大小，0.25=25%，opened_onclick是點擊后彈出，openurl后面的單引號中可以填入我們想要顯示的內容，我將720yun的主頁保存下來以后填在這里，這樣當我們第一次點擊logo時，logo會放大出現屏幕正中（圖14），再次點擊

16、則會轉入我們事先保存的頁面。當然這里只是這個layer定義的很小一部分，更多的內容在skin文件夾的vtourskin.xml里面。圖14打開vtourskin.xml，ctrl+F查找skin_logo我們會找到：這樣一行語句，keep=true確保在切換場景時始終保持在相同的位置不會消失，align=righttop是對齊瀏覽器的右上角，而x、y是指以右上角為原點，偏移x=5、y=5個像素。capture為false，那么當你用鼠標在logo上拖動時，下層的全景漫游也會跟著轉動。accuracy=1是坐標的精準度，state=small是記錄當前這個layer的狀態。onclick則是一個

17、鼠標行為，在單擊logo時會檢查logo狀態是否為small，如果是，則放大（skin_openlogo）logo，如果不是small則執行分號之后的2個命令。在這里我僅僅只對logo的設置做了簡要的說明，如果有同學想要進一步研究可以查看Krpano課堂的krpano快速入門教程（5）設置LOGO。接下來讓我們修改一下起始視點并添加一個熱點，雙擊打開tour_editor.html轉動視角到我們想要的位置，然后點擊左上角的set as startup view（圖15）保存一下“save tour.xml”，然后點擊add hotspot添加1個熱點（圖16），給這個熱點定義一個鏈接（圖17）

18、，然后點擊done完成，最后記得保存一下save tour.xml。圖15圖16圖17刷新一下tour.html，我們會看到起始視點已經變成我們之前設定的那個地方，中間的位置多了一個箭頭（圖18），這個就是我們添加的熱點，當然，這個死板板不會動的箭頭是系統默認的，后面我會教大家怎么替換掉它，在這之前先讓我們打開熱點提示，這樣鼠標移動到熱點上時就會有下一個場景的文字說明了。圖18打開tour.xml進行編輯，前面我們講到過的皮膚參數中有提到過，tooltips_hotspots=false，把雙引號中的false改為true。刷新一下tour.html（圖19）。圖19也許有人會說這個字體很丑，

19、我想換一個，Krpano默認的情況下很多字體都會調用textstyle name=SKIN_TOOLTIPS，它在vtourskin.xml中，如果你想給熱點提示單獨定義一種字體，那么需要創建一個新的textstyle name。（請記住，每一個name都必須是獨一無二的，并且不能是數字開頭）先讓我們來看一下這個textstyle：這里定義了很多東西，font（字體）、fontsize（字體大小）、bold（黑體）、italic（斜體）、background（背景）、border（鑲邊）、textcolor（字體顏色）、effect（字體效果），dropshadow(1,45,0x000000

20、,4,1)說明添加的是陰影，括號里的參數是指位置及顏色。fadeintime（漸隱延遲）、fadetime（消失延遲）參考一下這個textstyle，我們把這一段復制一下，粘貼在下面，把textstyle name=SKIN_TOOLTIPS改成textstyle name=hotspot_TOOLTIPS，字體就試試楷體吧。當然這樣還不夠，因為我們的熱點提示文字并沒有指向這里，接下來找到style name=skin_hotspotstyle，這個style中有一個onhover：onhover=if(skin_settings.tooltips_hotspots, if(linkedsce

21、ne, showtext(get(sceneget(linkedscene).title), SKIN_TOOLTIPS) );我們把onhover最后面的SKIN_TOOLTIPS改為hotspot_TOOLTIPS。（圖20）圖20搞定了熱點的提示文字以后，我們換一個漂亮點的熱點，還是剛才那個style name=skin_hotspotstyle，這個style就是系統默認的那個熱點，這里我們直接用官方的style，如果有同學覺得自己寫代碼太麻煩，可以簡單粗暴一點。用下面這個style name=skin_hotspotstyle直接覆蓋掉原本的style。熱點圖片url=hotspot

22、_ani_white_64x64x20.png，并沒有在我們的skin文件夾中，它在x: Krpanoexamplesexamplesxml-usageanimated-hotspots文件夾里面（圖21）。圖21（為了方便觀看，充填了黑色背景并旋轉了90度）因為需要用到crop來進行動畫，所以列出了png圖片寬度、高度、第一幀開始位置是0，以及最后一幀是19，onloaded是載入后執行一個動畫的action。 inc(frame,1,get(lastframe),0); mul(ypos,frame,frameheight); txtadd(crop,0|,get(ypos),|,get(

23、framewidth),|,get(frameheight); delayedcall(0.03, if(loaded, hotspot_animate() ) );熱點動畫action，每隔0.03秒改變crop的內容，從而實現動畫效果，inc是一個每次遞增指定數值的方法，這里是讓frame這個變量每次增加1，當到達19時，則從0又開始遞增。mul是乘法運算，將高度乘以當前幀序號，得到crop中y的位置。txtadd對crop的內容進行了設定。因為每一次ypos的值都會發生變化，所以crop中所顯示的內容也發生變化。最后是0.03秒后再次執行自身。保存刷新一下，我們就可以看到新的熱點了。（圖

24、22）圖22好了，熱點動起來了，接下來我們要讓整個場景動起來，最簡單的辦法無疑是加入一個自動旋轉，當然，你也可以添加一個小行星開場，但是那已經超出新手的能力范圍了，所以，讓我們從簡單的開始。打開tour.xml編輯，我們需要為自動旋轉加入這樣一串代碼（請添加在空白處，不要在action或scene標簽內）：這里定義了waittime用戶最后一次交互行為后開啟旋轉時的等待時間（單位：秒），speed旋轉速度（角速度，正值向右，負值向左），horizon要到達的水平視點（0即為水平旋轉），tofov旋轉所要到達的視場。不過一直這樣轉下去會讓人覺得頭很暈，因此我們需要添加一個開啟（關閉）自動旋轉的按

25、鈕，以便讓它停下來。前面我們有提到過crop，這里就是利用crop來添加一個按鈕到導航條里。首先我們需要修改一下vtourskin.png這個文件，因為這張圖片中沒有我們需要用到的按鈕圖片（圖23），我們需要自行添加一對按鈕在這張圖片的底部，對于會Photoshop的同學來說這應該不是什么難事（圖24）。圖23（為了方便觀看，充填了黑色背景并旋轉了90度）圖24（為了方便觀看，充填了黑色背景并旋轉了90度）然后在vtourskin.xml中找到layer name=skin_btn_fs（全屏按鈕）在這一行代碼的下方添加以下代碼：保存一下刷新，按鈕出現在下面的導航條里了，不過出了點小問題（圖2

26、5），開啟（關閉）旋轉的按鈕和全屏按鈕重疊了，我們需要適當調節一下全屏按鈕的位置，把layer name=skin_btn_fs代碼中的x=140修改為x=180，這樣全屏按鈕就會向右邊移動40像素，給我們的旋轉按鈕騰出一個位置來（圖26）。圖25圖26如果你跟著我的教程邊學邊做直到這里，那么恭喜你，這樣的全景已經具備最基本的展示要求，logo、能夠引起觀看者注意的熱點、以及自動旋轉演示，同時也感謝你能耐心看完前面5000多字的枯燥教程，下面我們需要提高一點難度。不過在這之前需要說明一下什么是bombtimer，細心的朋友也許注意到了，前面添加layer name=skin_btn_autor

27、otate這行代碼時，結尾有bombtimer(0)這樣一段代碼。在多個場景的漫游中僅僅只有自動旋轉是不夠的，我們需要在一個場景旋轉一段時間之后自動的切換到下一個場景中，并且當所有的場景全部瀏覽完成之后回到開頭，這樣無限循環下去，這個功能在自動展示中非常實用，而bombtimer就是為了實現這個功能。簡而言之，bombtimer（定時炸彈）是一個通過控制時間變量而實現場景切換的代碼。首先我們需要修改一下action name=startup。在action name=startup的action標簽中加入if(autorotate.enabled,bombtimer(0);這段代碼 if(st

28、artscene = null, copy(startscene,); loadscene(get(startscene), null, MERGE); if(autorotate.enabled,bombtimer(0);然后在標簽外的空白處加入：這一行代碼的意思是在用戶交互動作之后重置bombtimer。接下來在標簽外的空白處加入一個action： set(autorotate.enabled,true); set(bt,%1); add(bt,1); delayedcall(1,bombtimer(get(bt); copy(bt_1,autorotate.spee

29、d); Math.abs(bt_1); div(bt_2,405,bt_1); add(bt_2,autorotate.waittime); if(bt GE bt_2, set(bt,0); nextscene();); 這個名為bombtimer的action是一個計時器函數，它先接受一個傳遞來的參數，也就是從第幾秒開始計算，假設我們是從0開始，接著增加這個action，使bt（bombtimer）的變量增加1，直到我們設定的值然后“引爆”，delayedcall指的是延遲執行，延遲執行什么呢，bombtimer(get(bt)，設置延遲執行的主要目的是為了我們之前加入的關閉（開啟）旋轉按

30、鈕能夠繼續生效。那么當這個bombtimer的變量增加到多少時“引爆”呢，div(bt_2,405,bt_1);這個代碼中的405指的是當畫面旋轉405度的時候“引爆”然后進入下一個場景nextscene()，為什么是405度而不是360，因為在這個全景漫游中，我們默認的開場視角是90度，而旋轉開始的角度是從視角的最右邊開始計算，也就是說，旋轉開始時計數器中的參數是45度而不是我們視場中心所處的0度，這樣我們增加45度以便旋轉一周后能夠讓視場的中心回到0度。然后我們在標簽外的空白處再加入以下代碼： set(ns, get(sceneget(xml.scene).index); set(maxs

31、, get(scene.count); add(ns,1); if(ns = maxs, set(ns,0); loadscene(get(sceneget(ns).name), null, MERGE, BLEND(1.5); 這個action是為ns變量載入當前場景的序號，為maxs載入場景總數，每當ns增加1時，檢查它是否是最后一個場景，如果是的話，就將ns重置為0，因為第一個場景的序號index就是0，請注意Krpano中，許多系統變量都是從0開始計算，而不是1！將前面這幾段代碼添加進你的tour.xml之后，你就可以開始調試一下bombtimer的效果了，在沒有交互動作或關閉自動旋轉的情況下，每一個場景都會旋轉一周后自動切換到下一個場景，然后這樣周而復始。寫給Krpano小白們的最最最入門級教程（三）叢韜2015-03-23 10:56本教程案例使用krpano 1.16.9制作，與最新版本有一定區別，但不影響學習和使用。首先感謝“肥宗”的Krpano課堂，我在使用Krpano制作全景漫游時也是看著肥宗的