krpano HTML5全景漫游

目前有个插件叫krpano HTML5 Viewer可以实现全景展示，官网都是英文，而且网上资料也比较少些，需要看看官网实例、文档。

下载地址：http://www.krpano.com/

引用一下别人的博客：http://my.oschina.net/u/591525/blog/158572

Krpano功能介绍
Krpano viewer的主程序所使用的XML文件十分简洁．默认情况下仅可以做到场景的载入。其他所有功能，都以插件的
形式实现．而每个插件．既可以在自己的XML文件进行配置。 然后供主程序XML文件调用．也可以在主程序的XML文件
中直接[<plugin>标签引入并进行配置。这样做的好处就是功能明确，结构清晰，便于扩展，利于维护。
Krpano的所有标签如下： 

<inelude>标签：载人其他的xml文件。 
<preview>标签：在装载全景图片的过程中显示一个小的全景图。
<image>标签：载人图片。 
<view>标签：存储当前视的信息。 
<area>标签：定义全景图中被展示的区域 
<display>标签：定义渲染的质量和性能。 
<control>标签：鼠标键盘的控制设置。 
<cursois>标签：自定义光标的样式。 
<autorotate>标签：当无用户交互时．自动扭曲／移动，缩放。 
<plugin>标签：载人其他flash程序，图片或者按钮，图标 
等。 
<hotspot>标签：设置热点。 
<events>标签：设置事件的响应。 
<aetion>标签：定义行为．需要用脚本语言解释器解释。 
<eontextmenu>标签：自定义鼠标右键菜单。 
<progress>标签：设置装载时过程。 
<network>标签：设置下载或者decode时的图片。 
<memory>标签：设置内存使用情况。 
<security>标签：设置安全性。 
<textstyle>标签：定义样式。 
<lensflareset>标签：定义一个镜头光晕样式。 
<lensflare>标签：定义一个镜头光晕。 
<data>标签：存储一些数据 
<scene>标签：定义场景。

代码解析：

   1.<layer name="skin_topborder" url="vtourskin.png" crop="2|0|60|12" align="topleft" edge="bottomleft" width="100%" height="12" x="0" y="0" enabled="false" />

表示页面会生成一个div层，有宽高、位置布局属性。可以根据自己业务在界面进行布局，如果需要在图片上做点击事件需要加onclick属性如下：

 <layer name="spot1" url="/Images/button_cancel.png" width="16"  height="16" align="lefttop" edge="center" x="50" y="150"
                    zorder="2"  οnclick="loadscene(scene_1, null, MERGE, BLEND(1));" />

loadscene是插件自带方法（载入指定的一个全景），只需要传一个全景<scene>标签的name即可。

2.执行脚本语句

 <action name="skin_startup">

   <!--设置图片列表-->

    skin_addthumbs();
    skin_onresize();
    skin_updatescroll();

  </action>

3.手机端用到陀螺仪和重力感应，需要插件gyro.js：

  <plugin name="skin_gyro"         keep="true"  url="%SWFPATH%/plugins/gyro.js"  enabled="false" camroll="true" friction="0" velastic="0" onavailable="set(layer[skin_btn_gyro].visible,true); skin_onresize();" />

4.html页面需要加入<meta>标签手机端需要适应屏幕：

  <meta name="generator" content="Panotour Pro V2.0.1 64bits" />
  <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <meta name="apple-mobile-web-app-status-bar-style" content="default">