krpano学习笔记

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制作全景漫游时也是看着肥宗的