Krpano：打造全景漫游体验—基础(一)

前言

根据 上篇文章 基本了解了什么是krpano以及如何使用krpano来生成全景，现在就来带大家深入学习krpano的部分基础，带领大家有更好的了解

krpano的运作机制

首先是浏览器载入html文件，同时因为有一个krpano嵌入到html的脚本文件在运作，因此这个脚本就要去找如果是flash引擎的话对应的是那个swf文件，如果是js引擎就找对应的js文件，是哪个主xml文件就去找对应的xml文件，是要将这些全景图展示在那个div中，也就是默认的pano的div中，以及一系列在embedpano方法中各个初始参数执行完后

主xml文件开始加载到浏览器中，也就是读取静态的xml文件，按照krpano的语法来分析，例如是全景图就是image标签等等。文件读取完后，浏览器开始按照分析好的信息按照顺序加载全景图加载皮肤呈现出全景漫游的效果来

tour.js

krpano的内核、引擎，它们驱动krpano展示全景的核心程序，通常表现为tour.swf和tour.js两种文件，tour.swf就是flash的内核文件，而tour.js是HTML5 viewer以及嵌入html脚本的集合文件，随着现在HTML5越来越强大，很多浏览器也不再支持flash了，所以现在大多数用的都是tour.js引擎

embedpano方法

tour.js里的embedpano方法主要就是在html页面里嵌入一个全景漫游，embedpano方法可以传入一些常用的参数:

1. id: 默认id
2. target: 设置目标 html 元素，用于嵌入全景
3. xml: 启动 xml 文件的名称和路径

从路径中加载xml中的各种元素，会按照krpano的语法来分析，通过这些元素来生成和控制全景，xml文件里必须有一个根元素，它的级别高于其它元素，所有其它的xml元素必须包含在其中，这个元素就是 <krpano> 元素

4. bgcolor: 查看器的背景色

默认为#000000，将xml属性设置为空xml: ''就可以体现出来了

5. html5: 设置漫游的查看器的值 only表示只使用h5查看器，auto表示默认使用h5查看器，prefer表示优先使用h5查看器，当浏览器版本太旧不兼容的时候才使用falsh查看器，fallback则和prefer相反，always表示始终使用h5查看器，never表示强制使用flash查看器
6. vars: 传递一个 Javascript 对象，，在xml运行之后往xml添加新的属性和覆盖旧属性

定义一个rotate对象，表示设置<autorotate>标签的enabled属性为true开启自动旋转，并且设置waittime属性为1，表示1秒后开始旋转，并将这个对象传入vars属性中，当xml文件运行之后就会覆盖旧的属性

7. initvars: 传递一个 Javascript 对象，在xml运行之前往xml添加新的属性和覆盖旧属性
8. mobilescale: 移动设备时全景漫游的缩放
9. passQueryParameters: 表示可以将http查询参数是否可以作为变量从url传递/重定向到krpano，true表示所有参数，false表示不传递任何参数，也可以传递逗号分隔参数的自定义列表

krpano中有一个全局变量startscene，表示当前正在展示的全景，默认为第一个全景，我们在http中设置startscene为其他全景，传递到krpano中来改变展示的全景

10. consolelog: 表示是否在控制台打印krpano的日志
11. mwheel: 表示是否开启鼠标滚轮缩放
12. capturetouch: 针对移动设备，表示是否能在移动设备操控全景
13. onready: 全景嵌入完成且 krpano 查看器可供使用时的回调函数

注意，onready回调函数非常重要，因为它会返回一个krpano接口对象，这个对象中包含很多krpano的api和变量，通过这个对象我们就可以实现js与krpano的交互

removepano方法

tour.js里还有一个removepano方法，用来移除全景漫游，传入的参数就只有一个，html目标元素的id或者默认id

krpano中的各个元素

最后补充一下krpano中的各种元素

• < krpano >krpano元素是xml文件的根元素，任何一个xml文件内的其它元素都要被krpano元素所嵌套，也就是krpano元素要放在xml文件的一头一尾
• < include >include元素可引入其它xml文件的内容，以便于更好的工作流程。例如krpano软件自动生成的vtourskin.xml就被使用include嵌入到了主xml中
• < preview >preview元素对预览图进行设置。也就是全景图还未完全载入之前的模糊图像，但因为体积较小，因此载入速度非常快，预览图会在全景图之前先载入，避免黑屏时间太久造成不好的体验，通常放在scene元素里，预览图在切图的时候会自动生成

• < image > image元素控制全景图设置。包括全景图的类型，全景图渐进分辨率切片显示等，通常也是放在scene元素里
• < view > view元素控制全景的视野。例如起始视角、视角限制与缩放等，通常会自动生成，当要设置限制视角或设定特定的初始视角时，需要自行设定
• < area > area元素控制全景图在浏览器（div）窗口中显示区域的大小
• < control > control元素设置鼠标、键盘以及触摸设备对全景浏览的控制方式
• < cursors > cursors元素设置鼠标光标样式
• < autorotate > autorotate元素控制自动旋转
• < plugin > < layer > layer与plugin是同一种元素，只是名字不同,在krpano中属于使用频率极高的元素，可以调用插件，也可以插入图片和生成容器
• < hotspot > hotspot元素即所谓热点，可以在3D空间中插入图片、视频等，使之随着3D空间一同运动，可以制作相当多的视觉效果
• < style > style元素可以保存其它元素的属性子集，注意在1.18和1.18以前的版本只能是hotspot元素和layer元素的属性子集
• < events > events元素可调用各类型事件
• < action > action元素可自定义动态代码
• < contextmenu > contextmenu元素控制右键菜单内容
• < scene > scene元素可放置任意krpano的元素，每个scene元素只有在被loadscene时才会被载入到浏览器进行解析

总结

由于基础知识太多，篇幅太长，本文只讲解了krpano的运作机制、tour.js的讲解以及krpano各个元素的简单介绍，下一篇文章将详细讲解krpano中的动作也就是 < action > 元素的使用和用法