layer/hotspot元素说明文档（1.22）

krpano xml元素官方文档

<layer><hotspot>

更新 2025.2.7 krpano 1.22.3

<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 ）。

目录

<layer> xml 结构：

<layer name=”…”
☞ 基本设置
type=”image”
url=”…”
keep=”false”
preload=”false”
style=””
cssclass=””
cssstyle=””
☞ 排序、流动
parent=””
childorder=”0″
zorder=”0″
flowchildren=””
flowchildrenexpand=””
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″
☞ 前景滤镜
colorize=”0xFFFFFF”
colormatrix=””
brightness=”1.0″
contrast=”1.0″
saturate=”1.0″
hue=”0.0″
invert=”0.0″
sepia=”1.0″
blur=”0.0″
dropshadow=””
☞ 特殊layer类型设置
krpanobgcolor=””
iframeurl=””
html=””
htmlautosize=”false”
htmloverflow=”hidden”
htmllinkcolor=”inherit”
☞ 控制事件
onover.addevent=””
onhover.addevent=””
onout.addevent=””
ondown.addevent=””
onup.addevent=””
onclick.addevent=””
onsingleclick.addevent=””
ondoubleclick.addevent=””
onwheel.addevent=””
ontabindex.addevent=””
onfocus.addevent=””
onblur.addevent=””
☞ 状态事件
oncreate.addevent=””
ondestroy.addevent=””
onloaded.addevent=””
onresize.addevent=””
onlayout.addevent=””
onaddchild.addevent=””
onremovechild.addevent=””
/>

<hotspot> xml 结构：

<hotspot name=”…”
☞ 基本设置
type=”image”
url=”…”
keep=”false”
preload=”false”
style=””
cssclass=””
cssstyle=””
☞ 球面位置
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”
zoomscalebased=”1.0″
flying=”0.0″
scaleflying=”true”
camroll=”true”
☞ 特殊的WebGL渲染设置
renderer=”auto”
mipmapping=”false”
premultiplyalpha=”false”
depthbuffer=”false”
depthwrite=”true”
depthoffset=”0″
☞ 特殊效果(仅在WebGL下使用)
blendmode=”norma”
alphachannel=”auto”
alphahittest=”0.0″
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=””
hittest=”true”
☞ 显现
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=””
onsingleclick.addevent=””
ondoubleclick.addevent=””
ondown.addevent=””
onup.addevent=””
onwheel.addevent=””
ontabindex.addevent=””
onfocus.addevent=””
onblur.addevent=””
☞ 状态事件
oncreated.addevent=””
ondestroy.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=””
hittest=”false”
☞ 显现
visible=”true”
alpha=”1.0″
autoalpha=”false”
blending=”true”
☞ 控制事件
onover.addevent=””
onhover.addevent=””
onout.addevent=””
onclick.addevent=””
onsingleclick.addevent=””
ondoubleclick.addevent=””
ondown.addevent=””
onup.addevent=””
onwheel.addevent=””
☞ 状态事件
oncreate.addevent=””
ondestroy.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>

 

动态或只读的layer/hotspot变量:

动作/函数:

以下为隐藏内容，会员登陆后查看