Krpano功能介绍-所有标签

我不是女神ヾ 2022-09-27 04:50 462阅读 0赞

**Krpano功能介绍**

Krpano的所有标签如下：

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

**Crop**属性的四个值：0 、0、50、50，表示在加载的图片的0，0位置起，宽50高50裁切出一个图片，供当前使用。也就是说，可以把好几个图标整合在一张图片上，使用时，调用Crop脚本函数，提供要切割的起始坐标，要切割图片的宽高。

**parent**属性设置插件的父插件名称

Krpano viewer的功能是十分强大和复杂的．本文只介绍 系统所用到的几个比较重要的标签  
=、校园全景漫游的具体实现  
2．1、将krpano viewer嵌入html网页  
Krpa~o Viewer提供了swfkrpano．is脚本使用它可以很方  
便地将krpanoviewer嵌入html网页．其使用方法如下：  
首先引人脚本文件：<scriptsrc="swfkrpano．J⋯S><／script>  
接着编写iavascript脚本：

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> &lt;script&nbsp;type=”text／javaseript”&gt; </td> 
 </tr> 
 <tr> 
 <td> 2 </td> 
 <td colspan="2"> vat swf=ereateswf(”krpano．swf'’，”krpanoSWFObject”，” </td> 
 </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
 <tr> 
 <td> 3 </td> 
 <td> 100％”，”100％ ”)； </td> 
 </tr> 
 <tr> 
 <td> 4 </td> 
 <td colspan="2"> swf．addVariable(”xml”，”scenes-with-imagemap．xml”)； </td> 
 </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
 <tr> 
 <td> 5 </td> 
 <td> swf．embed(”krpanoDIV” ： </td> 
 </tr> 
 <tr> 
 <td> 6 </td> 
 <td colspan="2"> swf．addVariable(”xml”，”krpano．xml”)； </td> 
 </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
 <tr> 
 <td> 7 </td> 
 <td> &lt;／script&gt; </td> 
 </tr> 
 </tbody> 
</table>

此段代码的说明为：Varswf=ereateswf0表示可以创建要  
嵌入的对象  
swf．addVariable0表示设置xml文件的路径  
swf．embed(”krpanoDIV”1表示将krpano viewer嵌入到html  
元素里。  
2．2、设置初始场景  
在配置文件中的根节<krpano>中添加脚本动作．设置初  
始要载人的场景  
<kroano version=”1．0．8”onstart=”loadscene(scene1．null。  
MERGE)；p1aysound(s1，sound／music．mp3，0，o)；”>  
onstart为Krpano定义的事件．其后跟随的内容为事件的  
响应脚本。Loadscene函数表示载入场景．其第一参数为场景名  
称。Playsound函数是音频播放插件所提供。其第二个参数为要  
播放的音频文件的路径。  
2-3构建各个场景  
本系统所有的场景信息都保存在XML文件中。当需要载  
人某个场景时，系统会查找相应的标签，读取配置。在XML配  
置文件中．使用<scene>标签构建场景。具体示例如下：  
<scene name=”scenename”onstart=’。action(startscene)；”>  
<scene>标签后的name属性是必须的，同时．作为场景的  
标识．其值必须是全局唯一的。onstart属性后跟脚本动作代码，  
表示在场景刚载入时要做的工作。本例中，onstart属性后为一  
个名为startscene的动作 这个动作中包含一系列的脚本代码  
来完成一些工作，具体如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td colspan="2"> &lt;action&nbsp;name=”startscene”&gt; </td> 
 </tr> 
 <tr> 
 <td> 2 </td> 
 <td> set(heading，90)； </td> 
 </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
 <tr> 
 <td> 3 </td> 
 <td colspan="2"> showtext([b】要显示的字符 】，infostyle)； </td> 
 </tr> 
 <tr> 
 <td> 4 </td> 
 <td> action(activatespot，scene3，190)； </td> 
 </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
 <tr> 
 <td> 5 </td> 
 <td colspan="2"> playsound(s1，sound／sound．mp3，0，o)； </td> 
 </tr> 
 <tr> 
 <td> 6 </td> 
 <td> &lt;／action&gt; </td> 
 </tr> 
 </tbody> 
</table>

每个action的name属性值同<scene>标签的n踟e属性一  
样，也是必需并且全局唯一的．其作用类似于C\#语言中的方  
149  
法名．方便脚本编程时进行调用  
在startscene这个动作中．首先设置了视角进入时的水平  
位置。  
在<scene>标签之中，使用<image>标签载人全景图．其代  
码如下：  
<image type=”SPHERE”><sphere url=”全景图片路径”／><  
／image>  
本方案使用的是球面全景图，所以设置tvpe属性为  
sphere。~<sphere>标签中的ud属性中设置要加载的全景图片  
的路径  
在每个场景中都有若干热点与相邻场景进行互联．点击  
热点后可以实现场景跳转。要定义一个热点．需要使用<  
hotspot>标签。与其他标签类似．在<hotspot>标签中，也需要对  
各个属性进行设置  
2\_4设置地图  
在展示性项目中．导航地图可以使用户方便地知道当前  
场景的位置，是必不可少的。本项目导航地图的实现．是在  
krpano提供的插件功能和脚本编程语言基础上自行实现的  
地图．以及地图上的热点，都是作为插件存在的。它们的动态  
特性．是通过脚本编程实现的。设置地图的代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> &lt;plugin&nbsp;name=”map”url=”scenes／map．JPg”keep ”true” </td> 
 </tr> 
 <tr> 
 <td> 2 </td> 
 <td colspan="2"> align=”righttop”x=”一480”y=”0”alpha=”0．8”handeursor=”false’’ </td> 
 </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
 <tr> 
 <td> 3 </td> 
 <td> sealechildren=”true”width=”480”height=”360”／&gt;&lt;span&gt;&lt;plugin&gt;&lt;/span&gt; </td> 
 </tr> 
 </tbody> 
</table>

<plugin>标签的url属性设置要载入的地图图片的路径。

X．v属性设置地图插件在屏幕上所出现的位置。alpha设置图片的透明度。width与height属性设置地图插件的宽高。当场景跳转时．如果跳转后的场景与前一个场景位于同一地图中．地图不会变化．如果进入到了新的地图场景中．地图会自动更换地图显示，也可以隐藏，可以通过点击导航图按钮实现。

2．5设置地图上的热点 
为了标明系统所有场景在地图上的位置和当前场景的位 
置．需要使用地图热点。 
每个场景在地图上具有对应的热点标出 代表当前场景 
的热点，其图标与其他场景不同，以示区别。同时，点击某个热 
点。也会跳转到相应的场景中。 
这些场景热点也是通过插件方式实现的 每个热点都是 
一个插件．通过设置插件属性实现其各种功能．其配置如下： 
<plugin name=”插件名”ur1=”插件所用图片的地址” 
keep=’’true”parent=’’map’’align=’’left”edge=’’center”x=”162’’ 
v：”495”z0rder：=”2”onhover="showtext(想要显示的场景信息)I， 
οnclick=”loadscenefscenel，null，MERGE，BLEND(1))；／> 
其中naine属性设置插件名．这是一个全局唯一的名称 
url设定默认的供热点使用的图片的路径。parent属性设置插 
件的父插件名称 
2．6设置按钮 
按钮的作用．通常是点击后出发事件．进而执行一系列的 
动作。在krpano中，附带有预定义的按钮，可以实现系统预定 
义的功能。也可以使用krpano强大的插件和脚步编程功能．白 
定义按钮 
K\_~pano预定义的按钮主要包括：全屏，左转，右转，上转， 
下转，全屏，鼠标样式转换。其功能的实现也是依靠脚本语句．． 
这些预定义的功能被单独写在一个配置文件中．krpano的主 
配置文件用<include>标签包含这个配置 同时也要注意修改 
相关的图片路径。使用方法如下：<include url="butt0n／buttons— 
png—include．xml”／>。 
在引用预定义的按钮配置时．要注意预定义的配置文件 
和配置文件所引用的文件的相对路径．避免出现错误 
在本项目中，除了使用预设的按钮外，还需要两个按钮． 
一个是声音播放按钮，一个是地图显示按钮 采用krpano的插 
件和脚步功能实现。声音播放按钮的代码为： 
<plugin name=”sndl”url=”sound／soundonof．png”align=” 
leftbottom”x=”10”y=”5”alpha=”0．6”scale=”1．0”keep=”true’’ 
onover=”tween(alpha，1)；”onout=”tween(alpha，0．6)；”crop=”0101501 
50”οnclick=”switch(soundinterface．mute)；switch(crop，010150150， 
01501501501；”／> 
Onclick属性设置了关闭或者打开soundinterface插件 、默 
认为播放，当点击后声音停止，并且图标改变为关闭方式，再 
次点击，播放声音，图标变为播放方式。 
地图按钮的代码为： 
<plugin name=”showmap”keep=”true”url=”daohang．png” 
visible=”true”align=”rightbottom”onclickA=”set(state，，A，)；tween 
(plugin\[map\]．X，0％)；”oncliekB=”set(state,"B3；tween(plugin\[map\]．x， 
一480)；”οnclick=”if(state=：，A ，onclickB0，onclickA0)；”y=”5”／ 
>