image元素官方说明文档

<image>

更新于2016.7.12  krpano 1.19 pr5

使用 <image>元素定义全景图像。
在这个标签内设定图像的类型,尺寸和路径。

CUBE

<image type=”CUBE”
multires=”true
multiresthreshold=”0.025″
progressive=”true”
tilesize=”
baseindex=”1″
frames=”1″
frame=”1″
prealign=””
>
<level tiledimagewidth=”
tiledimageheight=”
tilesize=””
details=””
download=”auto” decode=”auto”
aspreview=”false”
>

<cube url=”pano_%s_%v_%h.jpg” />
</level>
<level …>

</level>

</image>


CUBESIDES

<image type=”CUBE”
multires=”true
multiresthreshold=”0.025″
progressive=”true”
tilesize=”
baseindex=”1″
frames=”1″
frame=”1″
prealign=””
>
<level tiledimagewidth=”
tiledimageheight=”
tilesize=””
details=””
download=”auto” decode=”auto”
aspreview=”false”
>

<left url=”pano_l_%v_%h.jpg” rotate=”0″ flip=”” />
<front url=”pano_f_%v_%h.jpg” rotate=”0″ flip=”” />
<right url=”pano_r_%v_%h.jpg” rotate=”0″ flip=”” />
<back url=”pano_b_%v_%h.jpg” rotate=”0″ flip=”” />
<up url=”pano_u_%v_%h.jpg” rotate=”0″ flip=”” />
<down url=”pano_d_%v_%h.jpg” rotate=”0″ flip=”” />
</level>
<level …>

</level>

</image>


CUBESTRIP

<image type=”CUBESTRIP”>
<cubestrip url=”cubestrip.jpg” />
<left strip=”0″ rotate=”0″ flip=”” />
<front strip=”1″ rotate=”0″ flip=”” />
<right strip=”2″ rotate=”0″ flip=”” />
<back strip=”3″ rotate=”0″ flip=”” />
<up strip=”4″ rotate=”0″ flip=”” />
<down strip=”5″ rotate=”0″ flip=”” />

</image>


SPHERE

<image type=”SPHERE”
hfov=”360″
vfov=””
voffset=”0″
multires=”true
multiresthreshold=”0.025″
progressive=”true”
tilesize=”
baseindex=”1″
frames=”1″
frame=”1″
prealign=””
>
<level tiledimagewidth=”
tiledimageheight=”
tilesize=””
details=””
download=”auto” decode=”auto”
aspreview=”false”
>

<sphere url=”pano_%v_%h.jpg” />
</level>
<level …>

</level>

</image>


CYLINDER

<image type=”CYLINDER”
hfov=”360″
vfov=””
voffset=”0″
multires=”true
multiresthreshold=”0.025″
progressive=”true”
tilesize=”
baseindex=”1″
frames=”1″
frame=”1″
prealign=””
>
<level tiledimagewidth=”
tiledimageheight=”
tilesize=””
details=””
download=”auto” decode=”auto”
aspreview=”false”
>

<cylinder url=”pano_%v_%h.jpg” />
</level>
<level …>

</level>

</image>


FLAT

<image type=”CYLINDER”
hfov=”1.0
multires=”true
multiresthreshold=”0.025″
progressive=”true”
tilesize=”
baseindex=”1″
frames=”1″
frame=”1″
prealign=””
>
<level tiledimagewidth=”
tiledimageheight=”
tilesize=””
download=”auto” decode=”auto”
aspreview=”false”
>

<cylinder url=”image_%v_%h.jpg” />
</level>
<level …>

</level>

</image>


VIDEO

<plugin name=”video” url=”videoplayer.swf” … />

<image type=”SPHERE” hfov=”360″ vfov=”” voffset=”0″ prealign=””>
<sphere url=”plugin:video” />
</image>

属性名 变量全名 类型 默认值
type type String
定义全景图的类型。

可使用的数值:

  • CUBE
    立方体全景图像 – 共六张图,每一张图对应立方体的一个面。
  • CUBESTRIP
    立方体条形全景图,将六张立方体的图合并到一张图中。支持的图像次序包括6×1, 1×6, 3×2 或 2×3。可以通过strip指定立方体的哪一面对应哪一个方向的图像。
  • SPHERE
    球体/圆柱体全景图像。
    支持局部全景。如果是局部全景,需要设定hfov,也可以同时使用vfovvoffset对全景图尺寸进行定义。
  • CYLINDER
    圆柱形全景图像。
    支持局部全景。如果是局部全景,需要设定hfov,也可以同时使用vfovvoffset对全景图尺寸进行定义。
  • 没有设定值时:
    如果没有设定类型,viewer会尝试根据image标签内的标签自动进行检测(只在非多层分辨率图像有效)。
属性名 变量全名 类型 默认值
hfov image.hfov Number
以角度为单位定义全景图视角的水平区域。
这是在全景图像上捕捉的可见范围。
默认值为360,即全视角环绕。对于局部全景使用更小的数值,对于Flat全景(或普通图像)使用数值“1.0”。
属性名 变量全名 类型 默认值
vfov image.vfov Number
以角度为单位定义全景图视角的垂直区域。
默认(不设定)下,该值可以通过hfov、全景图类型以及全景图边长比例自动计算得出。
属性名 变量全名 类型 默认值
voffset image.voffset Number 0.0
以角度为单位定义全景图的垂直偏移。
默认下,全景图在3D空间中会置中放置。也就是说视角范围在-hfov/2到+hfov/2以及-vfov/2+vfov/2之间。
当使用局部全景图像时,地平线不在图像的中间(不在0度上),那这张图像就会以扭曲的形式被展示。
voffset可以转换调整fov的范围,使得图像在3D空间正确置中。 

如何获取正确的voffset数值:
如果知道了全景图的垂直视角范围,那就可以计算得出:

voffset = (vfov_min + vfov_max) / 2


例如,一张240×100全景图,其fov为-75 到 +25:

vfov_min = -75
vfov_max = +25
voffset = (-75 + 25) / 2 = -25

如果是360×180全景,其fov为-90 到 +90:

vfov_min = -90
vfov_max = +90
voffset = (-90 + 90) / 2 = 0.0


如果不知道全景图的垂直视角范围- 可以尝试一些数值 (在 -90 到 +90 之间的正负数值)。另外,设置下面的参数有助于找到voffset

<view limitview=”off” />

这个设置允许在浏览局部全景时不受视角限制。

属性名 变量全名 类型 默认值
multires image.multires Boolean false
启用切片多分辨率图像。

当设置为true时, <image>元素需要包含多个定义了每一层多分辨率图像的 <level>元素。
属性名 变量全名 类型 默认值
multiresthreshold image.multiresthreshold Number 0.025
当从一层分辨率进入到下一层分辨率,根据fov/zoom设置多层分辨率入口数值控制。合适的数值从-1.0到+1.0。如果混淆现象明显,尝试负值-0.5。
属性名 变量全名 类型 默认值
tilesize image.tilesize int
定义多层分辨率图像的切片尺寸。
属性名 变量全名 类型 默认值
baseindex image.baseindex int 1
切片序号的起始数字。
属性名 变量全名 (仅Flash) 类型 默认值
progressive image.progressive Boolean false
启用或关闭渐进多层分辨率载入。

渐进载入即多分辨率全景将从低分辨率到高分辨率逐级载入。当前视野的所有层的分辨率图像切片将逐级载入。

关闭该功能时,首先载入当前分辨率的切片,然后当前可见切片载入完成后,就会自动预载入当前视野下较低分辨率的图像。
属性名 变量全名 类型 默认值
cubelabels image.cubelabels String “l|f|r|b|u|d”
 %s 立方体每一面的路径占位符的标签。默认标签是l|f|r|b|u|d (左、前、右、后、上、下)
属性名 变量全名 类型 默认值
stereo
stereolabels
stereoformat
image.stereo
image.stereolabels
image.stereoformat
Boolean
String
String
false
“1|2″
“TB”
启用立体图像。

使用立方体图像时,则图像路径应包含 %t 占位符:该占位符会被stereolabels设置的数值代替。左侧图像使用第一个数值,右侧图像使用第二个数值。

对于球面或圆柱体图像或视频,可以使用封包帧像式的3D图像。stereoformat设置定义封包顺序:

  • stereoformat=”TB” – 上/下格式
  • stereoformat=”SBS” – 左右格式
示例 – 立体立方体图像:
<image stereo=”true” stereolabels=”1|2″>
<cube url=”pano_%s_%t.jpg” />
</image>
示例 – 立体全景视频:
<image stereo=”true” stereoformat=”TB”>
<sphere url=”plugin:video” />
</image>
属性名 变量全名 类型 默认值
prealign image.prealign String
预对齐设定可以对齐/旋转全景图本身。
这可以纠正错误对齐的全景。

语法:

prealign=”X|Y|Z”

用X、Y、Z以度数定义三个轴的旋转。

可以动态改变预对齐设置,但需要updateobject(true,true) 动作调用刷新图像。

属性名 变量全名 (仅HTML5) 类型 默认值
sphere.mapping image.sphere.mapping String
定义球面输入图像的投影。可设置的值:

属性名 变量全名 类型 默认值
fisheye.fov
fisheye.align
fisheye.crop
fisheye.lenscp
image.fisheye.fov
image.fisheye.align
image.fisheye.crop
image.fisheye.lenscp
Number
String
String
String
180.0
“y|p|r”
“l|r|t|b”
“a|b|c|d|e”
支持鱼眼图像(只支持HTML5和WebGL)。在该设置下,可在krpano中使用鱼眼图像和视频。

要正确拉直和对齐鱼眼图像,必须知道其参数。获取这些参数的好办法是使用PTGUI

fisheye的值:

  • fov=”180.0″
    • 鱼眼图像的视场(度数)
    • 与裁切尺寸相关。
    • 数值来源:可从PTGUI的视场参数获取。
  • align=”yaw|pitch|roll”
    • 图像的对齐/旋转/水平(度数)
    • 数值来源:可从PTGUI的图像参数获取(例如,使用垂直点控制拉直图像)
  • crop=”left|right|top|bottom1″
    • 鱼眼视场裁切圆形的边距(像素)。
    • 圆形与视场大小相关。
    • 数值来源:可从PTGUI的裁切设置获取
  • lenscp=”a|b|c|d|e”
    • 镜头校正参数。
    • 数值来源:可从PTGUI的镜头设置获取

ptgui中获取fisheye参数的截图:

ptgui_fisheye_1

ptgui_fisheye_2

属性名 变量全名 类型 默认值
mjpegstream image.TYPE.mjpegstream String
支持HTTP的MJPEG流(只支持HTML5和WebGL)。在该设置下,可使用HTTP的MJPEG视频流作为全景图的来源。支持的图像类型有:<sphere>, <cylinder><fisheye>

image标签的url需要直接指定MJPEG源的地址。

可设置的值:

  • trueauto – 自动更新或刷新:
    • 在转动过程中,浏览器会暂停图像更新以获得更平滑的横摇和缩放,
    • 当没有转动,则持续刷新视频图像。
  • 0.0到60.0之间的数值
    • 手动设置刷新的帧速率。
    • 视频图像会持续地以该帧速率刷新,无论是在转动或是静止。

浏览器支持:

  • 所有现代浏览器和设备 – Firefox, Chrome, Safari, iOS, Android ..
  • IE11和微软的Edge尚不支持
属性名 变量全名 (仅Flash) 类型 默认值
frames
frame
image.frames
image.frame
int
int
1
1
全景图的当前帧以及帧数量。
对于一个全景图可以使用多个帧,在图像路径必须使用占位符%f。占位符会被当前设置的帧数字所替代。
变量全名 (仅as3用法) 类型 默认值
image.layer Sprite
全景图像图层的AS3 Sprite 对象。
变量全名 (只读) 类型 默认值
image.level.count int 0
图像层数。
属性名 变量全名 类型 默认值
level[..].tiledimagewidth
level[..].tiledimageheight
image.level[..].tiledimagewidth
image.level[..].tiledimageheight
int
int
该层切片图像的总大小。
属性名 变量全名 类型 默认值
level[..].tilesize image.level[..].tilesize int
针对该层的设置将不受image.tilesize 影响。
属性名 变量全名 类型 默认值
level[..].aspreview image.level[..].aspreview Boolean false
使用该层作为预览图像。
这必须完全载入整层图像。

 

切片或多层分辨率图像的占位符路径说明

使用切片或多分辨率图像时,路径必须包含切片序号的占位符。切片序号始于baseindex。

有以下的占位符:

  • 对于立方体的一面: %s⇒ 针对cubelabels的占位符
  • 对于水平切片序号有: %h, %x, %u%c (全部相同)
  • 对于垂直切片序号有: %v, %y%r (全部相同)
  • 对于立体图像: %t⇒ 针对stereolabels的占位符
  • 对于当前帧: %fimage.frame (仅Flash)

每一种占位符可以在路径中多次使用,例如作为文件名的一部分同时也作为文件夹名字的一部分。

切片序号间距


% 和占位符之间增加一个或多个 0 字符可以增加额外序号的格式-每个 0 将会为序号增加一个 0 间隔。

tile_%y_%x.jpg
  • tile_1_1.jpg
  • tile_1_2.jpg
  • tile_8_16.jpg
tile_%0y_%0x.jpg
  • tile_01_01.jpg
  • tile_01_02.jpg
  • tile_08_16.jpg
tile_%00V_%00H.jpg
  • tile_001_001.jpg
  • tile_001_002.jpg
  • tile_008_016.jpg

在 “image元素官方说明文档” 上有 2 条评论

发表评论