krpano全景图

本文介绍了使用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实现相同的效果。

核心方法整理

1. set(variable, value) 设置属性值
2. get(variable) 获取属性值
3. call(action) 调用xml中的各种方法

---

2.切换场景

在xml文件中添加<scene>标签来实现切换场景的效果，对应的<image>标签需要放入<scene>中。
然后使用krpano.call("loadscene(name);")方法加载场景，这里的name即为对应xml文件中的scene的name。

用法：

loadscene(scenename, vars*, flags*, blend*);

1. scenename是<scene>的name；
2. vars是用于设置自定义属性值，这些属性值将在解析/解析xml之后，但在开始加载全景图像之前设置。这样，这些变量可以用来覆盖xml的设置或设置附加的设置；
3. flags表示加载场景的状态标识；
4. 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);

注意点：

1. 同一个场景下，各个hotspot的name不能相同，否则后者会覆盖前者，造成只会显示一个热点的情况。
2. 有可能会出现热点不出现的情况，据猜测是因为，在使用addhotspot生成热点后，立即设置上属性的话，有可能加入的热点还没有生成，造成属性并没有设置上的问题，因此可以设置短暂的延时来完成属性的设置。

---

4.杂项

整理视角的一些方法

• krpano.set("view.hlookat", 90) 水平方向镜头移动，相当于鼠标左右移动
• krpano.set("view.vlookat", 90) 垂直方向镜头移动，相当于鼠标上下移动
• krpano.set("view.fov", 90) 视角场，相当于鼠标滚轮转动