更新 2020.11.12 krpano 1.20.9
前面几个课程我们讲述了一些需要实践动手，并且实实在在地做了一个漫游。对于熟悉前端的朋友可以忽略本篇，本篇主要是讲解一下vtour文件夹各个文件之间的关系。
vtour文件夹是krpano默认生成的漫游文件夹。在这个文件夹中，有三个文件夹以及五个tour开头的文件。详细说明请查看：vtour文件夹说明
当我们双击tour.html的一刻，到底都发生了些什么事情？
当你在线打开html链接或者本地在浏览器中打开html文件时，浏览器首先要依次读取的是tour.html文件中的代码。也就是下面tour.html的内容：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html> <head> <title>krpano - R0010050</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="x-ua-compatible" content="IE=edge" /> <style> @-ms-viewport { width:device-width; } @media only screen and (min-device-width:800px) { html { overflow:hidden; } } html { height:100%; } body { height:100%; overflow:hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; } </style> </head> <body> <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:"auto", mobilescale:1.0, passQueryParameters:true}); </script> </div> </body> </html> |
在head标签内主要控制的是针对设备的自适应设定。下面
|
1 |
<script src="tour.js"></script> |
则是告诉浏览器要读取tour.js脚本的内容。因为这个js包含了embedpano.js以及krpano.js，具体可看全景嵌入到HTML，等于是让浏览器将全景引擎先加载进HTML来，也就是这个js文件包含了嵌入脚本以及krpano的html5引擎。
embedpano这个对象里包含有tour.swf则是Flash引擎。pano这个div则让全景在浏览器窗口百分百展示。而在它下面的一段noscript则是浏览器不支持JavaScript时需要显示的文字。
|
1 2 3 |
<script> embedpano({swf:"tour.swf", xml:"tour.xml", target:"pano", html5:"auto", mobilescale:1.0, passQueryParameters:true}); </script> |
因为我们已经引入了tour.js，因此可以给embedpano对象的属性赋值。
embedpano对象中的几个属性分别是swf：加载flash引擎；然后主xml是tour.xml；所显示的目标target就是刚才名为pano的div。html5模式为prefer，让浏览器优先使用html5引擎。最后passQueryParameters允许传递外部参数到viewer中。这里可用的属性具体可看全景嵌入到HTML，
如果说js和swf是引擎的话，主xml文件就是控制全景漫游中具体各项参数的文件，如展示的是哪些全景、这些全景的浏览方式、是否有缩略图、是否有热点、热点链接到什么场景等等，这些信息都是放在xml文件中，而浏览器必须读取主xml文件，通常就是我们在embedpano对象中给xml属性设定的tour.xml。在tour.xml这个xml文件这能够，通过include以及loadpano的方式你可以引入更多其它xml文件的内容。
至于那几个文件夹，为什么它们一定是panos、plugins和skin，而不是其它名字。这只是因为控制全景设置的文件，也就是刚才说的主xml文件中，所调用的以上三个文件夹的路径必须与实际一致。好比下面加载全景图的代码：
|
1 2 3 |
<image> <cube url="panos/achilleion-hof-unten.tiles/mobile_%s.jpg" /> </image> |
我们注意到url属性中有panos文件夹的调用。对于url属性的更多解释，请查看：include元素完全解析
也就是说，并非skin里面一定是要装着皮肤，panos里面一定要有全景图，这无非就是你的路径调用必须与实际文件夹结构一致的问题。如果你把panos改成pano123，同时将所有调用panos文件夹的url属性都改为pano123，那么从全景的实际效果来看是没有任何问题的。
所以，这一切就是从html文件开始调用不同的文件，像js是作为全景漫游的引擎使用，像xml文件是作为主xml文件存储全景漫游设置所用，有些文件夹和文件夹的图，它们都在xml文件通过url属性被定义和调用。
所以实际上首先是浏览器载入html文件，
同时因为有一个krpano嵌入到html的脚本文件在运作，因此这个脚本就要去找如果是flash引擎的话对应的是那个swf文件，是哪个主xml文件对应的去找xml，是要将这些全景图展示在那个div中，也就是默认的pano的div中，以及一系列在embedpano中各个初始参数执行完后。
主xml文件开始加载到浏览器中，也就是读取静态的xml文件，该怎么的元素就怎么分析，例如是全景图就是image标签等等。文件读取完后，浏览器开始按照分析好的信息按照顺序加载全景图加载皮肤呈现出全景漫游的效果来。
像在html中，其实我们可以完成很多事情，例如根据不同的设备来控制embedpano的初始参数数值。例如在1.19 pr4中，QQ中显示比例是有问题的，但其它浏览器正常。我们可以这样。
|
1 2 3 |
<script> embedpano({swf:"tour.swf", xml:"tour.xml", target:"pano", html5:"auto", mobilescale:1.0, passQueryParameters:true}); </script> |
改成
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> function selectmobilescaleusage() { // check for Android MQQBrowser: if( navigator.userAgent.indexOf("Android") >= 0 && navigator.userAgent.indexOf("YYB") >= 0 ) return 0.5 // for all other cases use 1: return 1; } embedpano({swf:"tour.swf", xml:"tour.xml", target:"pano", html5:"auto", mobilescale:selectmobilescaleusage(), passQueryParameters:true}); </script> |
看过 理解工作原理