Krpano：打造全景漫游体验—Layer详解

layer元素的用途

上一篇文章中也是将krpano中的基础知识讲完了，今天就来详细讲解一些krpano中最常用的元素——layer元素，layer元素中文翻译为"图层"，它与热点（hotspot元素）的最大区别是layer的坐标轴是相对于浏览器窗口是二维坐标系的，可以理解为是2D的坐标系，当全景旋转时，正常情况下layer是不会随之移动的。因此layer元素常用于漫游皮肤或弹出图片文字等

layer元素的类型

layer元素有3个类型，使用type属性定义，分别是image图片类型和container容器类型以及text文本类型，并且layer元素的name属性的数值必须唯一的

<layer name="layer_container" type="container" align="center" width="300" height="300" bgborder="4 0xffffff 1" keep="true">
    <layer name="layer_image" type="image" url="skin/vtourskin_hotspot.png" align="topcenter" width="100" height="100" keep="true"></layer>
    <layer name="layer_text" type="text" html="我是一段文本" align="bottomcenter" keep="true"></layer>
</layer>

layer元素的位置和大小

位置

当设置了layer的类型以后，下一步应该设置layer在浏览器窗口的位置，layer元素中与位置有关的属性分别有align、x和y，想要理解这些属性就要理解当前layer元素与窗口或者父元素layer的位置关系

九个红点就代表了align属性的值，例如里面的layer元素为align属性设置了对应的值，那么layer元素的位置就会在对应的位置，就像css中我们熟悉的绝对定位

既然是绝对定位，那么layer元素的位置当然不可能局限于这九个点，想要做到在layer元素处于自己想要的位置，则要靠x和y属性在align属性上做位置偏移，当x和y不写的话默认值为0，当然x和y都可以写百分比数值，百分比是基于父元素的width和height的百分比

除了align、x和y之外还有一个edge属性，作为layer元素的边缘/定位点可以设置的值和align属性一样都有九个，不同的就是edge属性的值对应的是自身元素的九个点

当设置了edge的值后，定位点会影响x和y的偏移，没有设置不会影响x和y的偏移，这是因为edge默认采用与align相同的数值，例如align是center，则edge默认也是center

大小

与大小相关的属性有width、height、scale、maxwidth、maxheight、minwidth、minheight

width，height用于设置矩形的宽度和高度，可以设置像素绝对值也可以设置百分比，对于image类型来说不设置默认为图片原来的尺寸，如果是container类型则必须设置宽高，当然也可以设置负值，例如父元素的width为100，目标元素的width=“-10”，那么实际宽度为100-10

maxwidth、maxheight、minwidth、minheight则是用于限制layer元素宽高的最小/最大值

scale用e来控制图层的大小比例，值为1就是原图比例

layer元素的透明度和显示隐藏

ayer元素的透明度和显示隐藏通过alpha、visible体现

<layer name="layer_container" type="container" align="center" width="300" height="300" bgborder="4 0xffffff 1" keep="true">
    <layer name="layer_container1" type="container" align="lefttop" width="50" height="50" bgcolor="0xff0000" bgalpha="0.5" keep="true"></layer>
    <layer name="layer_container2" type="container" align="center" width="50" height="50" bgcolor="0xff0000" bgalpha="0.5" visible="false" keep="true"></layer>
</layer>

layer元素的crop和scale9grid属性

crop原意就是’切割’，通常是这样使用的crop="x|y|width|height"，krpano生成例子里自带的操作栏，里面的每一个操作对应的图片，就是使用crop属性切割一整张图片得到的

而scale9grid属性则是用来防止图片拉伸变形的，使用方式也是和crop一样，scale9grid="x|y|width|height"从图片的x，y点开始，划出一个矩形，这个矩形区域内缩放正常缩放，而矩形区域外的部分则不会被缩放，无论怎么拉伸边缘都不会变形

<layer name="box1" type="image" keep="true" url="skin/1.png" align="center" height="500" width="200" scale9grid="15|15|100|68"/>
  
<layer name="box2" type="image" keep="true" url="skin/1.png" align="right" height="500" width="200" />

<layer name="box3" type="image" keep="true" url="skin/1.png" align="left" />

layer容器类型的使用方法

当leyer元素的type为container时，可以使用与container相关的几个属性：

• bgcolor：容器的背景颜色，值为十六进制颜色的表示，例如bgcolor="0xffffff"
• bgalpha：容器的透明度，默认为0，范围0-1之间
• bgborder：控制边框，同时可以控制边框宽度、颜色和透明度，默认是无边框如bgborder="1 0xffffff 0.5"，四个边框可以分别设置，使用逗号隔开
• bgroundedge：定义圆角，也是可以分别设置，使用逗号隔开
• bgshadow：在layer元素背后增加阴影，bgshadow="xoffset yoffset blur color alpha"，也可以使用逗号隔开继续添加阴影，但是仅支持HTML5

总结

layer元素是krpano中的主要用户界面元素，熟练使用是非常必要的，当然更加详细的内容可以查看官方文档来查阅资料