layer/hotspot元素说明文档(1.21)

<layer><hotspot>

更新 2023.12.11 krpano 1.21.2

<layer> 与<hotspot> 是krpano主要的界面交互元素:

  • layer元素基于 2D 屏幕空间,是可用于所有类型的布局元素。可包含图像,文本,按钮,视频,也可以为其他layer创建容器以及添加特殊元素,如嵌入iframe,html代码甚至其他krpano viewer。
  • hotspot元素与layer元素基本相同,但处于全景图/3D空间中。
  • hotspot元素还能绘制多边形或直线。
  • 这两种元素可通过父设置或定义更多layer子元素来组合、堆栈、继承。
  • 从技术上看,layer元素就是HTML元素,hotspot元素可以是HTML元素也可以由WebGL绘制,这取决于 renderer 设置和hotspot的类型(type),以及是否需要进行立体渲染(stereo-rendering )。

关于 <plugin> 元素:

  •  <plugin> 元素和 <layer> 元素本质上是同一元素
  • 仅仅名字不同而已。
  • 任何时候都可以使用<layer>或<plugin> 或反向来处理相同的元素。在静态xml代码和动态Action或Javascript代码中,是相同的。
  • 术语 ‘plugin(插件)’ 来自krpano的老版本,其中的插件主要用于包含用于进一步交互的外部工具。
  • 如今,该元素提供了更多的布局功能,因此较新的术语“layer(图层)”更好地描述了它的行为、
  • 因此建议<plugin>仅在包含使用附加功能扩展的krpano插件(如SoundinterfaceWebVR插件)时使用,<layer>则使用在所有与布局相关的元素。

目录

 

<layer> xml 结构:

<layer name=”…”
☞ 基本设置
type=”image”
url=”…”
keep=”false”
preload=”false”
style=””
cssclass=””
☞ 排序、流动
parent=””
childorder=”0″
zorder=”0″
flowchildren=””
flow=”true”
flowexpand=”false”
flowoverflow=”false”
flowspacing=””
childflowspacing=”0″
childmargin=”0″
enablechildren=”true”
scalechildren=”true”
maskchildren=”false”
☞ 用户控制
enabled=”true”
capture=”true”
capturewheel=”false”
capturefocus=”true”
cursor=””
nativecontextmenu=”false”
tabindex=””
☞ 显现
visible=”true”
alpha=”1.0″
autoalpha=”false”
☞ 位置和尺寸
safearea=”true”
align=””
edge=””
x=””
y=””
ox=””
oy=””

width=””
height=””
minwidth=””
minheight=””
maxwidth=””
maxheight=””
autowidth=””
autoheight=””
scalemode=”scale”
scale=”1.0″
scalex=”1.0″
scaley=”1.0″
rotate=”0.0″
gridfit=”true”
gpu=”true”

☞ 图片切割
crop=””
onovercrop=””
ondowncrop=””
scale9grid=””
☞ 背景、边框、阴影
bgcolor=”0x000000″
bgalpha=”0.0″
bgborder=”0″
bgbordermode=”outside”
bgborderblend=”true”
bgroundedge=”0″
bgshadow=””
bgcapture=”false”
☞ 背景滤镜
bgbrightness=”1.0″
bgcontrast=”1.0″
bgsaturate=”1.0″
bghue=”0.0″
bginvert=”0.0″
bgsepia=”0.0″
bgblur=”0.0″
☞ 特殊layer类型设置
krpanobgcolor=””
iframeurl=””
html=””
htmlautosize=”false”
htmloverflow=”hidden”
☞ 控制事件
onover.addevent=””
onhover.addevent=””
onout.addevent=””
onclick.addevent=””
ondown.addevent=””
onup.addevent=””
onwheel.addevent=””
ontabindex.addevent=””
onfocus.addevent=””
onblur.addevent=””
☞ 状态事件
onloaded.addevent=””
onresize.addevent=””
onlayout.addevent=””
/>

<hotspot> xml 结构:

<hotspot name=”…”
☞ 基本设置
type=”image”
url=”…”
keep=”false”
preload=”false”
style=””
cssclass=””
☞ 球面位置
ath=”0.0″
atv=”0.0″
depth=”1000.0″
prealign=”false”
☞ 3D 空间位置
torigin=”world”
tx=”0.0″
ty=”0.0″
tz=”0.0″
☞ 3D空间旋转
rotationorder=”yxz”
rx=”0.0″
ry=”0.0″
rz=”0.0″
oref=”2″
inverserotation=”false”
twosided=”false”
☞ 2D/3D 显现
zoom=”false”
distorted=”false”
flying=”0.0″
scaleflying=”true”
☞ 特殊的WebGL渲染设置
renderer=”auto”
mipmapping=”false”
premultiplyalpha=”false”
depthbuffer=”false”
depthwrite=”true”
depthoffset=”0″
☞ 特殊效果(仅在WebGL下使用)
blendmode=”norma”
alphachannel=”auto”
stereo=””
chromakey=””
☞ 特殊CSS3D设置
zorder2=”1″
☞ 分层、流动
parent=””
childorder=”0″
zorder=”0″
childmargin=”0″
enablechildren=”true”
scalechildren=”true”
maskchildren=”false”
☞ 用户控制
enabled=”true”
capture=”true”
capturewheel=”false”
capturefocus=”true”
cursor=””
nativecontextmenu=”false”
tabindex=””
☞ 显现
visible=”true”
alpha=”1.0″
autoalpha=”false”
blending=”true”
☞ 位置和尺寸
edge=””
ox=””
oy=””

width=””
height=””
minwidth=””
minheight=””
maxwidth=””
maxheight=””
autowidth=””
autoheight=””
scalemode=”scale”
scale=”1.0″
scalex=”1.0″
scaley=”1.0″
rotate=”0.0″
gridfit=”true”

☞ 图片切割
crop=””
onovercrop=””
ondowncrop=””
scale9grid=””
☞ 背景、边框、阴影
bgcolor=”0x000000″
bgalpha=”0.0″
bgborder=”0″
bgbordermode=”outside”
bgborderblend=”true”
bgroundedge=”0″
bgshadow=””
bgcapture=”false”
☞ 控制事件
onover.addevent=””
onhover.addevent=””
onout.addevent=””
onclick.addevent=””
ondown.addevent=””
onup.addevent=””
onwheel.addevent=””
ontabindex.addevent=””
onfocus.addevent=””
onblur.addevent=””
☞ 状态事件
onloaded.addevent=””
onresize.addevent=””
onlayout.addevent=””
/>

<hotspot> xml 结构(多边形):

<hotspot name=”…”
☞ 基本设置
keep=”false”
style=””
prealign=”false”
zorder=”0″
☞ 多边形类型 (填充或画线)
polyline=”false”
☞ 多边形显现
fillcolor=”0xAAAAAA”
fillalpha=”0.5″
borderwidth=”3.0″
bordercolor=”0xAAAAAA”
borderalpha=”1.0″
bordergradient=””
borderzoom=”0.0″
borderwidth3d=”false”
☞ 3D 空间位置
torigin=”world”
twosided=”false”
☞ 特殊的WebGL渲染设置
renderer=”auto”
depthbuffer=”false”
depthwrite=”true”
depthoffset=”0″
subdiv=”false”
borderhittest=”false”
☞ s特殊效果(仅在WebGL下使用)
blendmode=”norma”
☞ 用户控制
enabled=”true”
capture=”true”
capturewheel=”false”
capturefocus=”true”
cursor=””
nativecontextmenu=”false”
☞ 显现
visible=”true”
alpha=”1.0″
autoalpha=”false”
blending=”true”
控制事件
onover.addevent=””
onhover.addevent=””
onout.addevent=””
onclick.addevent=””
ondown.addevent=””
onup.addevent=””
onwheel.addevent=””
状态事件
onloaded.addevent=””
>
点的球形坐标
<point  ath=”…” atv=”…” />
<point  ath=”…” atv=”…” />
<point  ath=”…” atv=”…” />

3D热点坐标 (取代球形)
<point  x=”…” y=”…” z=”…” />
<point  x=”…” y=”…” z=”…” />
<point  x=”…” y=”…” z=”…” />

</hotspot>

 

display元素完全解析

display元素负责调整渲染品质/性能以及显示模式的显示设定。

以下隐藏内容只提供VIP赞助会员,VIP会员说明请查看置顶文章

(更多…)

contextmenu元素完全解析

krpano的右键菜单由contextmenu元素控制,在非触屏设备上点击鼠标右键弹出,而在触屏设备则长按屏幕500毫秒后可打开菜单。右键菜单包含了krpano的版权信息版本信息全屏以及自定义部分。要去除krpano的右键菜单的版权信息About the krpano Panorama Viewer…或者整个右键菜单 ,需要购买299欧元的krpano Branding Free License。下图为去掉版权信息的菜单对比。

compare

(更多…)

events元素完全解析

events元素专为在特定的事件中执行动作而设。

events也即是事件,在krpano代码中有两种事件,一个是全局事件,一个是局部带名字的事件。

(更多…)

network元素完全解析

network元素是关于krpano下载/解码以及缓冲图像的网络设置。这个设置可以用于优化下载环境。一方面我们可以控制jpeg品质,来降低图片体积。另一方面我们可以使用network元素。 (更多…)

memory元素完全解析

memory元素控制krpano项目在设备内存中所占用的最大数量。当然,我们要记得内存的实际大小不是krpano可以控制的,越大的切片需要越多的内存,越小的切片需要越小的内存。最大存储器空间是以MB为单位。对于krpano的切片所占据的存储器空间的计算公式是: (更多…)

layer元素完全解析

layer元素概述

<layer>或<plugin>元素可以用于嵌入图像、HTML元素(如iframe)、按钮或动态插件。它与hotspot元素的区别就在于它的定位是屏幕坐标,坐标系是以浏览器窗口本身作为参照的,子元素则相对于父元素作为坐标参照系。hotspot元素则是相对于3D空间的球面坐标系进行定位。直观的感受就是,当我们转动全景时,layer元素通常是相对于屏幕不动的,它不会随着全景的转动而移动。所以我们会用layer元素来做皮肤。hotpsot元素就如同是3D空间中的一个“固有”的对象,就像“粘贴”住一样,会随同转动一同移动。所以我们用hotspot元素来做引导方向和指示场景中物体的热点。

另外,layer和plugin在本质上是一样的元素,区别就是名字不一样,就好比广东和粤的区别。

layer元素官方说明文档 以及 layer元素从入门到精通

因为内容有重复,建议可直接查看 layer元素从入门到精通  (更多…)

autorotate元素完全解析

autorotate元素概述

autorotate是控制场景自动旋转的元素。通常只需要在代码中添加一次。用户可以像下面那样直接添加静态代码,也可以在action代码中设置autorotate元素的各项属性。如果要改变autorotate元素的属性,只需要使用set这样的简单设置,例如set(autorotate.enabled,false);  (更多…)

preview元素完全解析

preview元素简述

这是对全景图像完全载入之前时显示的“预览”全景图像的路径或图像文件的定义。我们在preview元素定义的这张预览图应该是小体积(大小和图像分辨率)的,这样才能快速加载。

(更多…)