基于web的全景漫游自动生成加编辑平台的技术实现（二）----krpano窥探

最新推荐文章于 2024-01-04 13:52:47 发布

码农大圣

最新推荐文章于 2024-01-04 13:52:47 发布

阅读量1.9k

点赞数 1

上次我们说到怎么使用krpano自动制作一个全景漫游，今天我们来说一下krpano是怎么让一个全景漫游运作起来的

首先我们打开一个经过krpano自动生成后的全景漫游，查看它的代码，这里我用的编辑器是Sublime Text 3（强烈推荐，用来编辑XML或者其它很方便）

查看这个html页面的代码内容

[html]view plain copy
<!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里的内容

[html]view plain copy
<script src="tour.js"></script>  

就是这个文件啦，这个js文件包含了krpano的html5引擎以及flash嵌入，没有它全景漫游也运作不起来（可惜老外把它加密处理了）

下一行<div>标签让全景漫游全屏显示

[html]view plain copy
<div id="pano" style="width:100%;height:100%;">  

[html]view plain copy
<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视图层中

[html]view plain copy
<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方式），全景漫游就这样在浏览器里展示出来了。

码农大圣

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
基于web的全景漫游自动生成加编辑平台的技术实现（二）----krpano窥探

上次我们说到怎么使用krpano自动制作一个全景漫游，今天我们来说一下krpano是怎么让一个全景漫游运作起来的首先我们打开一个经过krpano自动生成后的全景漫游，查看它的代码，这里我用的编辑器是Sublime Text 3（强烈推荐，用来编辑XML或者其它很方便）查看这个html页面的代码内容[html] view plain copy&lt;!DOCTYPE html&gt; &lt;ht...
复制链接

扫一扫