layer元素概述
<layer>或<plugin>元素可以用于嵌入图像、HTML元素(如iframe)、按钮或动态插件。它与hotspot元素的区别就在于它的定位是屏幕坐标,坐标系是以浏览器窗口本身作为参照的,子元素则相对于父元素作为坐标参照系。hotspot元素则是相对于3D空间的球面坐标系进行定位。直观的感受就是,当我们转动全景时,layer元素通常是相对于屏幕不动的,它不会随着全景的转动而移动。所以我们会用layer元素来做皮肤。hotpsot元素就如同是3D空间中的一个“固有”的对象,就像“粘贴”住一样,会随同转动一同移动。所以我们用hotspot元素来做引导方向和指示场景中物体的热点。
另外,layer和plugin在本质上是一样的元素,区别就是名字不一样,就好比广东和粤的区别。
layer元素官方说明文档 以及 layer元素从入门到精通
因为内容有重复,建议可直接查看 layer元素从入门到精通
layer元素的类型
layer元素有两种类型,一种是image,一种是container。写layer元素,首先是写下名字name,然后应该养成习惯定义一下其类型。如果是image,可插入SWF、JPG、PNG、GIF,因此需要定义文件的路径(查看对路径的说明)。例如:
1 |
url="logo.png" |
为了适应html5,可设置alturl,alturl只针对html5时有效,且仅用于静态xml代码!如果要在动态代码中使用,应使用if()动作设置不同的路径,例如:
1 |
if(device.html5, set(url,html5.png), set(url,flash.png) ); |
简单来说,只要你设置了url属性,那这个layer的类型就是image。另一种类型是容器,它好比是一个内置的矩形图形,不需要url属性,但需要设置type属性。
1 |
type="container" |
以下隐藏内容只提供VIP赞助会员,VIP会员说明请查看置顶文章
layer背景层渐变
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<krpano> <preview type="grid(CUBE,16,16,512,0x333333,0x808080,0x999999);" /> <style name="text" keep="true" url="%SWFPATH%/plugins/textfield.swf" align="center" edge="center" background="false"/> <!-- SILVER --> <layer name="container_gradient1" type="container" align="center" edge="center" x="-120" y="0" width="80" height="32" maskchildren="true" scalechildren="true"> <layer name="gradient1" type="container" align="center" edge="center" width="150%" height="32" bgcapture="true" bgcolor="0xBBBBBB" bgalpha="1.0" bgroundedge="0" bgshadow="0 16 16 0 0xFFFFFF 0.7 inset" /> <layer name="text1" style="text" html="Silver" css="font-family:Arial; font-weight:bold; font-size:14px; text-shadow:0px 1px 0px rgba(255, 255, 255, 0.5); color:rgba(51, 51, 51, 0.85); text-transform: uppercase;"/> </layer> <!-- BLUE --> <layer name="container_gradient2" type="container" align="center" edge="center" x="-40" y="0" width="78" height="30" maskchildren="true" scalechildren="true" bgborder="1 0x75A2BA 1.0"> <layer name="gradient21" type="container" align="top" edge="top" width="150%" height="15" bgcapture="true" bgcolor="0xF2F6F8" bgalpha="1.0" bgroundedge="0" bgshadow="0 8 8 0 0xF2F6F8 1.0 inset, 0 -7 7 0 0xD8E1E7 1.0 inset" /> <layer name="gradient22" type="container" align="bottom" edge="bottom" width="150%" height="15" bgcapture="true" bgcolor="0xF2F6F8" bgalpha="1.0" bgroundedge="0" bgshadow="0 8 8 0 0xB5C6D0 1.0 inset, 0 -7 7 0 0xE0EFF9 1.0 inset" /> <layer name="text2" style="text" html="Blue" css="font-family:Arial; font-weight:bold; font-size:14px; text-shadow:0px 1px 0px rgba(255, 255, 255, 0.5); color:rgba(95, 140, 160, 1.0); text-transform: uppercase;"/> </layer> <!-- GOLD --> <layer name="container_gradient3" type="container" align="center" edge="center" x="40" y="0" width="80" height="32" maskchildren="true" scalechildren="true"> <layer name="gradient31" type="container" align="top" edge="top" width="150%" height="8" bgcapture="true" bgcolor="0xE9D4B3" bgalpha="1.0" bgroundedge="0" bgshadow="0 4 4 0 0xF3E2C7 1.0 inset, 0 -4 4 0 0xC19E67 1.0 inset" /> <layer name="gradient32" type="container" align="bottom" edge="bottom" width="150%" height="24" bgcapture="true" bgcolor="0xE9D4B3" bgalpha="1.0" bgroundedge="0" bgshadow="0 12 12 0 0xB68D4C 1.0 inset, 0 -12 12 0 0xE9D4B3 1.0 inset" /> <layer name="text3" style="text" html="Gold" css="font-family:Arial; font-weight:bold; font-size:14px; text-shadow:0px 1px 0px rgba(144, 113, 38, 0.5); color:rgba(236, 228, 205, 1.0); text-transform: uppercase;"/> </layer> <!-- GRAY --> <layer name="container_gradient4" type="container" align="center" edge="center" x="120" y="0" width="80" height="32" maskchildren="true" scalechildren="true"> <layer name="gradient41" type="container" align="top" edge="top" width="150%" height="24" bgcapture="true" bgcolor="0xBABABA" bgalpha="1.0" bgroundedge="0" bgshadow="0 12 12 0 0x000000 0.5 inset" /> <layer name="gradient42" type="container" align="bottom" edge="bottom" width="150%" height="8" bgcapture="true" bgcolor="0xBABABA" bgalpha="1.0" bgroundedge="0" bgshadow="0 -4 4 0 0xFFFFFF 0.25 inset, 0 -2 2 0 0x000000 0.5 inset" /> <layer name="text4" style="text" html="Gray" css="font-family:Arial; font-weight:bold; font-size:14px; text-shadow:1px 1px 0px rgba(224, 224, 224, 1.0); color:rgba(61, 61, 61, 1.0); text-transform: uppercase;"/> </layer> </krpano> |
在 “layer元素完全解析” 上有 2 条评论