网上找了很多关于krpano热点的属性参数,都不怎么全,所以最近花了两天时间重从官网重新获得整理了出来。提供给大家参考。
hotspot
<hotspot name="..."
html="..." * type为text时的文字内容,html代码用[ ]代替<>,但WEBVR模式下表单不显示 (官网没显示,但在案例中有使用)
padding="5 5" * 内边框距离 (官网没显示,但在案例中有使用)
☞ basic settings
type="image" 定义热点类型
url="..." 图像地址
keep="false" 是否在下一场景跳转后保持显示
preload="false" 预加载
style="" 属性样册
cssclass="" css样册
☞ spherical position 球面位置
ath="0.0" atv="0.0" 球坐标位置
depth="1000.0" 深度-球坐标位置
prealign="false" 将image.preign旋转也应用于热点。
☞ 3D position 3D位置
torigin="world" 热点偏移参考
tx="0.0" 位置便宜
ty="0.0"
tz="0.0"
☞ 3D rotation
rotationorder="yxz" 定义扭曲热点三维rx/ry/rz旋转的顺序。
rx="0.0" 在X/Y/Z轴上以度为单位对失真热点进行
ry="0.0"
rz="0.0"
oref="2" 对应扭曲 额外的x、y位置偏移。
inverserotation="false" 反转rx/ry/rz设置的旋转和轴顺序。
twosided="false" 热点是否应从两侧(正面和背面)可见。
☞ 2D/3D appearance
zoom="false" 设置是否场景缩放时,热点跟随缩放
distorted="false" 设置热点是否跟随场景进行3D扭曲
flying="0.0" 自动设置ath/atv/scale的值,0.0-1.0,1.0热点将被锁定在屏幕中间,高度1000
scaleflying="true" 当热点从pano-space-size到screen-space-size是否缩放
☞ special WebGL rendering settings
renderer="auto" 选择热点的渲染器,aotu,webgl,html
mipmapping="false" 热点图像应该mip-mapped期间呈现缩小时(例如避免混淆) (仅限WebGL)
premultiplyalpha="false" 热点图像的阿尔法通道 (仅限WebGL)
depthbuffer="false" 深度缓冲区进行热点渲染(仅限WebGL)
depthwrite="true" 深度缓冲区进行热点渲染(仅限WebGL)
depthoffset="0" 为上面渲染深度添加“偏移”
☞ special effects (WebGL only)
blendmode="normal" 设置混合模式,可选:normal, layer, screen, add, subtract, difference, multiply, overlay, lighten, darken, hardlight, invert.
alphachannel="auto" 为热点设置阿尔法通道/透明度通道的使用和来源
stereo="" 定义热点图像是否为立体图像(空,SBS,TB)(仅限WebGL)
chromakey="" 抠像,(chromakey="color,threshold(0-10),smoothing(0-10)")
☞ special CSS3D settings
zorder2="1" 设置为0.0和1.0,分别对应当前热点在扭曲控件之下和之上
☞ layering, flowing
parent="" 将该元素指定为其他层或热点元素的子元素
childorder="0" 父元素中的子层进行排序的设置
zorder="0" 插入元素的次序索引,可以是字符也可以是数字,html5输出必须是0-100整数
childmargin="0" 以像素为单位在所有子层元素周围添加边距/空格如css中margin)
enablechildren="true" 使当前元素的子元素处于活动状态。
scalechildren="true" 子元素是否跟随缩放
maskchildren="false" 设置是否将子控件变成蒙板
☞ user control 用户控制
enabled="true" 设置热点是否接收鼠标事件
capture="true" 与enabled配合使用, true只对热点传递动作, false可对子控件传递动作
capturewheel="false" 鼠标滚轮事件是否应该被此元素捕获
capturefocus="true" 单击或触摸元素时捕捉输入/键盘焦点
cursor="pointer" 鼠标光标图形
nativecontextmenu="false" 是否 右键单击(或长按)元素时,浏览器本机/默认上下文菜单将出现
tabindex="false" 是否开启 tab切换
☞ appearance 外观
visible="true" 是否显示
alpha="1.0" 透明通东
autoalpha="false" 自动透明
blending="true" 设置是否应在全景/场景混合期间渲染热点
☞ position and size 位置和大小
edge="center" 热点的边界对齐点
ox="0" oy="0" 热点的边界偏移位置
width="" height="" 热点大小
minwidth="0" maxwidth="0" 热点最大和最小宽
minheight="0" maxheight="0" 热点最大和最小宽
autowidth="" autoheight="" 热点自动大小
scalemode="scale" 缩放时是否跟随变化,scale:变动 resize:不变化
scale="1.0" 设置热点缩放(可根据下面x,y)
scalex="1.0" scaley="1.0"
rotate="0.0" 设置旋转角度
gridfit="auto" 像素网格拟合
☞ image cropping 图像剪裁
crop="" 定义元素坐标及宽高 crop="x-position|y-position|width|height"
onovercrop="" 设置元素鼠标移到上方后的坐标及宽高
ondowncrop="" 设置元素鼠标按下状态后的坐标及宽高
scale9grid="" 定义是否支持矢量缩放,scale9grid="x-position|y-position|width|height|prescale*"
☞ background, borders and shadows
bg="true" 是否显示背景
bgcolor="0x000000" 背景色彩
bgalpha="0.0" 背景透明度
bgborder="0" 元素周围添加边框
bgbordermode="outside" 添加边框的位置
bgborderblend="true" 是否将边框与图层背景混合
bgroundedge="0" 定义元素圆角
bgshadow="" 元素后面添加阴影(bgshadow="xoffset yoffset blur color alpha")
bgcapture="false" 背景形状上捕获用户事件(就是在背景中可接收点击)
☞ control events
onover.addevent="" 鼠标操作时,在正常事件之外添加其他事件
onhover.addevent=""
onout.addevent=""
onclick.addevent=""
ondown.addevent=""
onup.addevent=""
onwheel.addevent="" 元素上使用鼠标滚轮时将调用的操作/函数
ontabindex.addevent="" 在tab调用时,启用其他事件
onfocus.addevent=""
onblur.addevent=""
☞ state events
onloaded.addevent="" 载完成或层准备好使用时将调用的操作/函数
onresize.addevent="" 当元素大小改变时将调用的操作/函数
onlayout.addevent="" 当图层的布局(位置、大小、比例等)发生变化时将调用的操作/函数
/>
多边型
<hotspot name="..."
☞ basic settings
keep="false" 是否下一个场景显示
style="" 热点样式
prealign="false" 将image.preign旋转也应用于热点。
zorder="0" 热点层次
☞ polygon type (filled area or line)
polyline="false" 绘制一个线多边形,而不是填充多边形。起点和终点将不会连接。
☞ polygon appearance
fillcolor="0xAAAAAA" 填充颜色
fillalpha="0.5" 填充颜色透明度
borderwidth="3.0" 边框宽
bordercolor="0xAAAAAA" 边框颜色
borderalpha="1.0" 边框颜色透明度
bordergradient="" 边框渐变为边框着色
borderzoom="0.0" 放大全景图时,边界宽度线是否应该缩放
borderwidth3d="false" 边界宽度是否会根据其3D位置自行改变
☞ 3D position/rotation
torigin="world" 球型
twosided="false" 热点是否应从两侧(正面和背面)可见
☞ special WebGL rendering settings
renderer="auto" 选择热点的渲染器,aotu,webgl,html
depthbuffer="false" 深度缓冲区进行热点渲染(仅限WebGL)
depthwrite="true" 深度缓冲区进行热点渲染(仅限WebGL)
depthoffset="0" 为渲染深度添加“偏移”
subdiv="false" 启用或禁用多边形的细分
borderhittest="false" 边界线是否也应用于整体,打开影响性能
☞ special effects (WebGL only)
blendmode="normal" 设置混合模式
☞ user control
enabled="true" 设置热点是否接收鼠标事件
capture="true" 与enabled配合使用, true只对热点传递动作, false可对子控件传递动作
capturewheel="false" 鼠标滚轮事件是否应该被此元素捕获
capturefocus="true" 单击或触摸元素时捕捉输入/键盘焦点
cursor="pointer" 鼠标光标图形
☞ appearance
visible="true" 是否可见
alpha="1.0" 明秀度
autoalpha="false" 是否自动明秀度
blending="true" 设置是否应在全景/场景混合期间渲染热点
☞ control events
onover.addevent=""
onhover.addevent=""
onout.addevent=""
onclick.addevent=""
ondown.addevent=""
onup.addevent=""
onwheel.addevent=""
☞ state events
onloaded.addevent=""
>
☞ coordinates for spherical points:
<point ath="..." atv="..." />
<point ath="..." atv="..." />
<point ath="..." atv="..." />
...
☞ coordinates for 3D hotspots (alternative to spherical):
<point x="..." y="..." z="..."/ >
<point x="..." y="..." z="..."/ >
<point x="..." y="..." z="..."/ >
...
</hotspot>