上次我们说到怎么使用krpano自动制作一个全景漫游,今天我们来说一下krpano是怎么让一个全景漫游运作起来的
首先我们打开一个经过krpano自动生成后的全景漫游,查看它的代码,这里我用的编辑器是Sublime Text 3(强烈推荐,用来编辑XML或者其它很方便)
查看这个html页面的代码内容
- <!DOCTYPE html>
- <html>
- <head>
- <title>krpano - 1</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>标签 内的代码主要是针对设备的自动适应,不细说了
我们主要看下面<body>标签里的内容
第一行里,告诉浏览器,读取tour.js里的内容
- <script src="tour.js"></script>
下一行<div>标签让全景漫游全屏显示
- <div id="pano" style="width:100%;height:100%;">
<noscript>标签如果浏览器不支持javascript,则显示错误信息Javascript not activated
- <noscript><table style="width:100%;height:100%;javascript"><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>标签就是全景漫游的参数配置了
这里用了krpano里的embedpano方法(这个方法在tour.js里),方法里的参数的具体意思是
swf:"tour.swf" :加载flash引擎(在全景文件夹里的tour.swf文件)
xml:"tour.xml" :加载krpano的主XML配置文件(在全景文件夹里的tour.xml文件)
target:"pano" :加载上面id为pano的div
html5:"auto" :让浏览器首先使用HTML5来运行全景漫游(有HTML5和flash两种方式,不支持html5时才用flash)
passQueryParameters:true :true表示允许外部传递参数传送到viewer视图层中
- <script>
- embedpano({swf:"tour.swf", xml:"tour.xml", target:"pano", html5:"auto", mobilescale:1.0, passQueryParameters:true});
- </script>
总的来说,就是在html页面里读取tour.js文件里的内容,再根据tour.xml文件里的配置信息渲染全景漫游页面(渲染有flash和html5两种方式,1.19版本默认首先使用html5方式),全景漫游就这样在浏览器里展示出来了。