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

layer元素的用途

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

layer元素的类型

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

js 复制代码
<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元素处于自己想要的位置,则要靠xy 属性在align 属性上做位置偏移,当xy 不写的话默认值为0,当然xy 都可以写百分比数值,百分比是基于父元素的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体现

js 复制代码
<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点开始,划出一个矩形,这个矩形区域内缩放正常缩放,而矩形区域外的部分则不会被缩放,无论怎么拉伸边缘都不会变形

js 复制代码
<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中的主要用户界面元素,熟练使用是非常必要的,当然更加详细的内容可以查看官方文档来查阅资料

相关推荐
brzhang1 分钟前
代码即图表:dbdiagram.io让数据库建模变得简单高效
前端·后端·架构
SummerGao.13 分钟前
【解决】layui layer的提示框,弹出框一闪而过的问题
前端·layui
天天扭码41 分钟前
从数组到对象:JavaScript 遍历语法全解析(ES5 到 ES6 + 超详细指南)
前端·javascript·面试
拉不动的猪42 分钟前
前端开发中常见的数据结构优化问题
前端·javascript·面试
街尾杂货店&43 分钟前
css word
前端·css
Мартин.1 小时前
[Meachines] [Hard] CrimeStoppers LFI+ZIP-Shell+Firefox-Dec+DLINK+rootme-0.5
前端·firefox
冰镇生鲜1 小时前
快速静态界面 MDC规则约束 示范
前端
技术与健康1 小时前
【解读】Chrome 浏览器实验性功能全景
前端·chrome
Bald Monkey1 小时前
【Element Plus】解决移动设备使用 el-menu 和 el-sub-menu 时,子菜单需要点击两次才会隐藏的问题
前端·elementui·vue·element plus
小小小小宇1 小时前
PC和WebView白屏检测
前端