本文介绍了使用krpano制作全景图的一些基础知识，krpano可以在浏览器上实现全景图效果，支持flash和HTML5模式。
1.基础要点
这里只介绍HTML5用法下的情况。最少需要HTML文件，XML文件以及图片。
HTML格式
<script src=“krpano.js”></script> <!-- 引入JS脚本 -->
<!-- 包裹层，对应于target，需要对应id -->
<div id="pano" style="width: 600px; height: 400px; "> </div>
<script>
embedpano({ xml: "pano.xml", target: "pano" });//初始化
</script>
embedpano的参数的onready属性，可以传入一个函数，函数的第一个参数即为该krpano对象，使用js操作全景图都需要使用到它。
HTML5模式下，Swf可以省略不写。
xml格式
<krpano>
<scene name="pano1" onstart="">
<image>
<cube url="src/pano1/pano_%s.jpg" />
</image>
</scene>
<krpano>
最外层的核心是krpano标签，所有内容都需要放进去。
image标签，存放场景图片，可以有两种模式，1图模式以及6图模式。
1图模式写法
<image>
<cubestrip url="pano1.jpg" />
</image>
6图模式写法
<image>
<cube url="src/pano1/pano_%s.jpg" />
</image>
原生的可以使用XML语法实现功能，本文使用js api实现相同的效果。
核心方法整理
- set(variable, value) 设置属性值
- get(variable) 获取属性值
- call(action) 调用xml中的各种方法
2.切换场景
在xml文件中添加<scene>标签来实现切换场景的效果，对应的<image>标签需要放入<scene>中。
然后使用krpano.call("loadscene(name);")方法加载场景，这里的name即为对应xml文件中的scene的name。
用法：
loadscene(scenename, vars*, flags*, blend*);
- scenename是
<scene>的name； - vars是用于设置自定义属性值，这些属性值将在解析/解析xml之后，但在开始加载全景图像之前设置。这样，这些变量可以用来覆盖xml的设置或设置附加的设置；
- flags表示加载场景的状态标识；
- blend表示场景切换时的效果等。例如给定值BLEND(0.5)，表示场景切换时使用淡入淡出效果，时间是0.5s。
第一个参数最常用，后三个参数都是可选的，第四个参数在某些情景下也比较适用。
3.增加热点
热点即加在全景图上面的标志物，如箭头等。
在xml中，可以使用<hotspot>标签生成热点，标签属性上能设置图片资源，能设置hover事件，鼠标点击事件等等。这对于静态的热点生成会比较合适，同时要求使用xml语法。我们希望热点能动态生成，同时避免使用不熟悉的xml语法，于是使用js完成相应操作。我们使用krpano.call("addhotspot(hs_name);")添加热点，随后给热点设置各项属性，设置热点位置，热点图片，以及热点的各种事件等。
热点添加后，各种属性的设置方式：
| 描述 | 代码 | 备注 |
|---|---|---|
| 设置热点的图片链接 | krpano.set("hotspot[hs_name].url", url); |
|
| 设置热点的水平方向的角度 | krpano.set("hotspot[hs_name].ath", ath); |
|
| 设置热点的垂直方向的角度 | krpano.set("hotspot[hs_name].atv", atv); |
ath和atv综合决定热点所在的位置 |
| 设置热点是否设置3d变形 | krpano.set("hotspot[hs_name].distorted", true); |
|
| 鼠标点击的事件 | krpano.set("hotspot[hs_name].onclick", function); |
|
| 鼠标移入的事件 | krpano.set("hotspot[hs_name].onhover", function); |
|
| 鼠标移出的事件 | krpano.set("hotspot[hs_name].onout", function); |
注意点：
- 同一个场景下，各个hotspot的name不能相同，否则后者会覆盖前者，造成只会显示一个热点的情况。
- 有可能会出现热点不出现的情况，据猜测是因为，在使用addhotspot生成热点后，立即设置上属性的话，有可能加入的热点还没有生成，造成属性并没有设置上的问题，因此可以设置短暂的延时来完成属性的设置。
4.杂项
整理视角的一些方法
- krpano.set("view.hlookat", 90) 水平方向镜头移动，相当于鼠标左右移动
- krpano.set("view.vlookat", 90) 垂直方向镜头移动，相当于鼠标上下移动
- krpano.set("view.fov", 90) 视角场，相当于鼠标滚轮转动
