krpano xml元素完全解析
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插件(如Soundinterface或WebVR插件)时使用,<layer>则使用在所有与布局相关的元素。
目录
<layer> xml 结构:
☞ 基本设置
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 结构:
☞ 基本设置
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 结构(多边形):
☞ 基本设置
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>
动态或只读的layer/hotspot变量:
- path
- index
- iscontainer
- ishotspot
- ispoly
- is3dpoly
- points
- points3d
- loading
- loaded
- loadedurl
- hovering
- pressed
- hitx / hity / hitd
- pixelwidth / pixelheight
- pixelx / pixely
- stagex / stagey
- childscalexx / childscaley
- loader
- loaderwidth / loaderheight
- sourcewidth / sourceheight
- sprite
- parentobject
- childobjects
- krpano
- htmlelement
- rawEvent
动作/函数:
- addevent(eventname, eventcode)
- removeevent(eventname, eventcode)
- triggerevent(eventname)
- loadstyle(styles)
- registercontentsize(width,height)
- resetsize()
- changealign(align,edge)
- remove(removechildren*)
- getcenter(ath,atv,fov*)
- getnormalvec()
以下为隐藏内容,会员登陆后查看
image元素完全解析
以下隐藏内容只提供VIP赞助会员,VIP会员说明请查看置顶文章
view元素完全解析
全景中用户的观看方向由hlookat / vlookat属性定义,当前视场由fov属性定义。要限定部分全景的视场,可以使用limitview属性。
可以结合view元素官方说明文档学习。 (更多…)
hotspot元素完全解析
hotspot元素的详细说明在VIP教程(5 )- Hotspot元素从入门到精通有详细讲解,建议先阅读,本篇教程主要讲解热点元素的一些应用。另外可以查看Hotspot元素官方说明文档
control元素完全解析
control元素是鼠标与键盘的控制设定。
security元素完全解析
以下隐藏内容只提供VIP赞助会员,VIP会员说明请查看置顶文章
(更多…)krpano数组完全解析
什么是数组
area元素完全解析
area元素定义pano图像的显示区域。
cursor元素完全解析
cursor元素简述
contextmenu元素完全解析
krpano的右键菜单由contextmenu元素控制,在非触屏设备上点击鼠标右键弹出,而在触屏设备则长按屏幕500毫秒后可打开菜单。右键菜单包含了krpano的版权信息、版本信息、全屏以及自定义部分。要去除krpano的右键菜单的版权信息About the krpano Panorama Viewer…或者整个右键菜单 ,需要购买299欧元的krpano Branding Free License。下图为去掉版权信息的菜单对比。
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元素从入门到精通 (更多…)
progress元素完全解析
progress元素概述
style元素完全解析
使用style的意义
data元素完全解析
data元素概述
autorotate元素完全解析
autorotate元素概述
autorotate是控制场景自动旋转的元素。通常只需要在代码中添加一次。用户可以像下面那样直接添加静态代码,也可以在action代码中设置autorotate元素的各项属性。如果要改变autorotate元素的属性,只需要使用set这样的简单设置,例如set(autorotate.enabled,false); (更多…)
scene元素完全解析
scene元素概述
preview元素完全解析
preview元素简述
这是对全景图像完全载入之前时显示的“预览”全景图像的路径或图像文件的定义。我们在preview元素定义的这张预览图应该是小体积(大小和图像分辨率)的,这样才能快速加载。
1 |
<preview url="previewpano.jpg" /> |