*声明: 本文档由做者收集整理,并不是所有原创,若有侵权,请联系删除!另外因为Krpano自己内容较多,不可能面面聚到,若有不足,欢迎大佬指正。javascript
本文档基于版本1.19 pr14。
若是须要查看最新文档,请查看:Krpano全景漫游开发手册
官网:https://krpano.comcss
概念html
全景漫游(英文:panorama)技术可让体验者在全景图像构建的全景空间里切换视角的浏览。它是经过拍摄全景图像,再采用计算机图形图像技术构建出全景空间,让使用者能用控制浏览的方向,或左或右、或上或下观看物体或场景,仿佛身临其境通常。与传统的3D建模相比,全景漫游技术制做简单,数据量小,系统消耗低,且更有真实感。html5
早期270°或者360°全景漫游(柱状全景):java
720°全景漫游:android
全景图ios
全景图(这里特指球面全景图)是指一种图片宽高比为<span style="color: #ff0000;">2比1</span>的包含了360°x180°空间的图片,例如8000*4000的jpg图片或tiff图片等。
注:宽高比2:1为水平方向(360):垂直方向(180)css3
Krpano简介web
krpano是一款全景漫游制做软件和工具。其具备如下特色:express
如何选择
若是只想简单展现全景,无特殊定制需求,那么可使用默认皮肤,或者使用全景平台进行开发。
若是须要开发全景平台、定制全景功能或者对全景开发有浓厚兴趣的能够学习和深刻了解krpano。
特性
案例展现
见下载包或者官方网站
<p>这是krpano的案例文件夹<span style="color: #ff0000;">(1.19的examples文件夹在viewer文件夹下)</span>,里面包含了官方的绝大部分案例,这些案例都是学习krpano代码的很好的素材。注意下载包的案例所使用的viewer是下载包自身的默认viewer文件夹。由于你不能简单复制案例文件夹,你还须要设置一下对应viewer的路径,并且该viewer还必须是你本身的viewer。</p>
官方一系列模版所在的文件夹,包括了图片、xml、html以及相关配置文件等。经过对这里的了解和修改,咱们能够作出本身的皮肤模版,而后一键生成,实现批量的工做流。固然,正常状况下,你也无需从这里拷贝,由于在droplet过程当中会自动生成。部分模版在默认droplet过程当中并无使用到。
krpano 下载包的官方插件、引擎、案例的存放位置,同时也是让案例文件夹可以正确显示的 viewer 所在的位置。其中plugins是当前版本的全部官方插件;examples是官方提供的案例。
小贴士
自身项目的 viewer(js和swf)会在droplet过程当中自动生成无需从这里拷贝
Krpano Droplets 是krpano命令行工具加上配置文件config的一个快捷方式。droplets使用方式很是简单,将文件(一般是图片或者xml等文件)直接拖放在droplet图标上松开便可。
krpano droplet (图中齿轮状图标文件)
MAKE PANO (NORMAL) Droplet
用法说明:
Droplet 说明:
MAKE PANO (MULTIRES) Droplet
用法说明:
Droplet 说明:
MAKE PANO (SINGLESWF)Droplet
用法说明:
Droplet 说明:
MAKE PANO (FLAT)Droplet
用法说明:
Droplet 说明:
MAKE VTOUR (NORMAL)Droplet
用法说明:
Droplet 说明:
MAKE VTOUR (MULTIRES)Droplet (正常生成不考虑VR的漫游推荐使用这个dropelt)
用法说明:
Droplet 说明:
MAKE VTOUR (VR-OPT)droplet (正常生成带有VR的漫游推荐使用这个dropelt)
用法说明:
Droplet 说明:
MAKE OBJECTDroplet
用法说明:
Droplet 说明:
Convert SPHERE to CUBEDroplet
用法说明:
Droplet 说明:
Convert CUBE to SPHEREDroplet
用法说明:
Droplet 说明:
Encrypt XMLDroplet
用法说明:
Droplet 说明:
制做自定义droplet
内置 droplets 只是针对最多见的状况的范例。制做自定义的krpano droplet是很是简单的。你只须要编辑配置文件,而后复制并重命名一个已有的krpano droplet并对droplet自己进行编辑便可。
krpano受权的法律声明以及版本发行说明。
包含 32/64 位的 krpanotools32.exe 与 krpanotools64.exe,该两个文件为 krpano 项目核心,会在命令行中调用它们。
krpano 自带的静态文件本地服务环境,使用它能够路过本地文件案例限制来查看 Flash 与 HTML5 效果,另外它还能够控制浏览器缓存、限制下载速度模拟网络条件。
用来加密保护全景项目的可视化工具,须要注册才可使用,这里就不扩展。
如下是默认与比较基础文件结构与文件名,根据droplet的不一样,文件可能更多或更少,同时文件名也并不必定和这些同样。
vtour/ | -- panos/ #存放全景切片图片的文件夹 | -- skin/ #存放皮肤相关文件 | -- plugins/ #用来存放插件 | -- tour.swf #krpano flash viewer | -- tour.js #krpano HTML5 viewer | -- tour.xml #生成全景的相关配置 | -- tour.html #用来浏览全景的页面,须要本地服务环境 | -- tour_editor.html #添加热点(hotspot)与初始化视角设置的编辑器 | -- tour_testingserver.exe #windows系统中打开测试服务器并打开html文件进行本地浏览。 | -- tour_testingserver_macos #mac系统中打开测试服务器并打开html文件进行本地浏览。
Krpano 是经过viewer引擎来实现浏览静态图片时产生“三维”效果,而这一切则是经过tour.html这个入口文件。
过滤掉一些没用的代码,能够看到入口文件主代码以下:
<div id="pano"></div> <script src="tour.js"></script> <script> embedpano({ swf: "tour.swf", //有则表示加载flash引擎,若是设置html5:only则不须要该值 xml: "tour.xml", //启动时的配置文件 target: "pano", //要渲染到的目标容器ID html5: "only", //若是有须要用到flash,可设置为auto //id: "krpanoSWFObject", //默认的krpano对象,每个viewer对应惟一id,与JS交互时要用到 mobilescale: 1.0, //移动设备缩放,1表示不缩放,默认0.5 passQueryParameters: false //是否接受URL传参,例如:tour.html?html5=only&startscene=scene2 }); </script>
引入脚本(html5渲染器)
<script src="./tour.js"></script>
建立嵌入容器
<div id="pano" style="width:100%;height:100%;"></div>
建立对象及配置参数
embedpano({ swf:"krpano.swf", // flash渲染器 xml:"krpano.xml", // 主配置文件 缺省的时候会调用krpano.xml和krpano.swf 不加载设置0便可 target:"pano", // 嵌入容器id id:"krpanoSWFObject", // 当前全景id,javascript接口调用会使用此id bgcolor:"#000000",// 背景颜色 html5:"auto", // html5模式(auto:自动;prefer:优先使用html5;fallback:优先flash;only:只使用html5;always:始终使用html5-仅用于测试;never:始终使用flash;可加上webgl或css3d渲染技术,如auto+css3d) flash:"auto",// flash模式(auto,prefer,fallback,only,never和html设置相似) wmode:"window",// flash模式设置(window:窗口;opaque:不透明;opaque-flash:不透明,仅限flash;transparent:透明的;transparent-flash:透明的,仅限flash;direct:最佳性能,但可能不兼容旧系统和浏览器) localfallback:"http://localhost:8090", vars:{},// 在xml加载解析后设置启动变量 initvars:{},// 在xml加载解析前设置启动变量,能够在地址进行查询(our.html?initvars.variable=value) basepath:...// 基本路径 (相对于krpano.swf) consolelog:false,// 是否在浏览器控制台打印日志信息 mwheel:true,// 是否启用鼠标滚轮 focus:true,// 得到焦点 webglsettings:{preserveDrawingBuffer:false, depth:false, stencil:false},//webgl设置 mobilescale:0.5, // 移动设备缩放 fakedevice:"",// "mobile", "tablet", "desktop";模拟设备 (仅限测试) onready:function(){},// 准备就绪回调函数,通常当javascript调用krpano接口的时候,须要在此方法内 onerror:function(){},// 错误回调函数 passQueryParameters:true, // 启用url查询参数( html5, flash, wmode, mobilescale, fakedevice, initvars)做为变量传递,如tour.html?html5=only&startscene=scene2&initvars.design=flat });
移除全景
removepano(id);
官网文档:https://krpano.com/docu/html/...
krpano xml
xml自己是一种传输格式,这意味着只能用于在krpano viewer内传输数据。当xml被解析时,xml元素才会被传输/映射到krpano的内部数据结构。这就是说当解析结束后,本质上就再也没有xml。
krpano xml 自己是xml 语言,但有着本身特定的元素和语法。krpano xml 包括静态代码和动态代码部分。
静态代码就是由 26 个krpano 元素(包含废弃的两个)组成的代码,它们有着本身的属性,一般属性的值都是字符串或者数字或者是布尔值,由于这些属性的默认值规定了只能用这些类型。
相关的数值类型包括 string (字符串)、number (浮点数)、int(整数)、boolean (布尔
值, true 或者false )。
layer[name].smoothing
;layer[name].jsborder
如layer[name].pressed 、layer[name].imagewidth 、layer[name].imageheight
onclick ="openurl('http://...');"
,相似的还有几个 on 字辈的属性,像onover ="" onhover ="" onout ="" onclick ="" ondown ="" onup ="" onloaded =""
xml标签/节点
<element /> //无子元素 <element></element> //有子元素
属性
一个xml元素能够有一个或多个属性,由属性名和属性值构成,属性值必须放在单引号或者双引号中,且属性不容许重复
<element attribute="value"> <childrenelement test1="value1" test2="value2" /> </element>
根元素krpano
全部元素须要位于krpano元素内部
<krpano onstart="..."> ... <preview url="..." /> <image> <cube url="..." /> </image> ... </krpano>
注释
不能包含两个连字符--<!-- -->
大小写
xml元素的名称和xml属性都会被转换成小写,因此是不区分大小写的
编码
为了不字符编码问题,全部xml文件应保存为utf-8或utf-16文件
自定义元素
krpano容许添加自定义的元素、容许在系统定义的元素中添加自定义属性,方便咱们进行其它操做。krpano在载入xml文件解析静态代码时会忽略掉自定义元素。自定义的元素和属性除了语法上不能违反krpano的规定,在属性值设置上更为自由。
其余
xml元素间的空格字符空格、制表符和换行符将被忽略
保留字,不能直接使用,须要使用转义
出现相同name的元素后面会覆盖前面的
注意:html5模式会比flash模式严格,两种模式均需调试
官方文档:https://krpano.com/docu/xml/s...
krpano的XML结构
<krpano> <include> <preview> <image> <view> <autorotate> <plugin> <layer> <hotspot> <events> <action> <scene> </krpano>
krpano xml中的全部xml元素和属性是可选的,能够定义屡次。 当相同的元素将再次定义两个或两个以上的时候,那么之后/声明 将会覆盖以前的。
< krpano > 根元素内 也能够包含< krpano > 元素
xml自己只是一个 传送格式 ——这意味着它将只用于传送krpano view的数据。 当xml解析,那么xml元素将转换/映射到krpano内部数据结构。 这意味着xml解析后就没有了。
官方文档:https://krpano.com/docu/xml/#top
<xmlelement name="..." ... />
name属性 ⇒定义Array元素:
当一个xml元素有name属性,那么这个元素将被解释为元素的Array 。 neme名字的 Array 便是该元素自己。
当没有 Array 这个名字已经存在,它将被自动建立。
当元素已经存在,而后被定义 xml元素将仍然建立,但会覆盖已经存在的元素。
名称属性名字规范:
<xmlelement url="..." ... />
资源路径,用于引入插件、图片、音频等。
更以根据须要使用下面的占位符:
%FIRSTXML% – 第一个载入的xml文件的路径。 %CURRENTXML% – 当前载入的主xml文件路径(非嵌入的文件)。 %SWFPATH% – viewer文件的路径。 %HTMLPATH% -html文件的路径。 %BASEDIR% – 使用basedir的路径。 %$VARIABLE% – 使用指定的“VARIABLE” – 这能够是任意的krpano变量,但必须当前xml或场景彻底载入以前定义,例如已经存在于HTML文件中或在loadpano()、loadscene()调用以前。
<xmlelement ... devices="..."> <childrenelement ... /> ... </xmlelement>
若是xml元素在某个设备渲染或者忽略,能够给该元素设置devices属性,能够设置多个。它能够在每一个xml元素上设置,当xml文件将被解析并转换为krpano内部数据结构时,将会检查每一个xml元素的devices属性。当当前设备不匹配devices属性,那么这个xml元素及其全部子元素将被忽略。
+ .and. 且 | .or. 或 ! no- 否
属性值(能够经过逻辑运算符组合使用)
例子
devices="all"(默认) devices="html5" devices="flash|webgl" devices="flash.or.webgl"
<xmlelement attribute.devicecheck="..." attribute.devicecheck="..." ... />
在不一样中设置不一样的属性值,属性值同device
+ .and. 且 | .or. 或 ! no- 否
例子
scale.normal="1.0" width.desktop="200" visible.fullscreensupport="true" visible.html5.and.webgl.or.flash="true" visible.html5.and.no-webgl="false"
<xmlelement ... if="condition"> <childrenelement ... /> ... </xmlelement>
根据条件渲染元素
例子
embedpano({..., initvars:{design:"flat"}, ...}); <include url="design_default.xml" if="design == default" /> <include url="design_flat.xml" if="design == flat" />
<style name="stylename" attributes ... /> <xmlelement ... style="stylename" ... />
调用styleneme属性集,并应用到该元素,优先级低于行间,可用行间属性覆盖
例子
<style name="spotstyle" url="spotimage.png" /> <hotspot name="spot1" style="spotstyle" ... /> <hotspot name="spot2" style="spotstyle" ... />
<xmlelement attribute="get:variable" ... /> <xmlelement attribute="calc:expression" ... />
获取、计算属性值
例子:
<settings width="100" height="50" /> ... <layer ... width="get:settings.width" height="calc:settings.height * 2" />
场景之间的转换时(包括场景内外的切换),layer元素、hotspot元素以及events元素是否保留,默认为false。
注:
krpano 根元素,当xml进入解析数据结构阶段,会将该标签移除,你能够在当前krpano内定义另外的krpano
<krpano version="1.19" //版本号 onstart="" //进入漫游时,xml加载和解析后执行的动做 basedir="%FIRSTXML%" //设置程序根目录 bgcolor="" //全景播放器的背景色,不设置则为透明 idletime="0.5" //无用户交互操做的多长时间后执行onidle动做 colorcorrection="default" //改变Flashplayer 10的色彩修正设置(Flash only) 可选的值:default、on、off logkey="true" //当为Ture时,按O可查看log日志 strict="false" //严格代码模式 showerrors="true" //是否输出错误信息 debugmode="false" //当为True时,显示来自插件中的trace(0,text)中的text信息 > ... </krpano>
krpano做为XML文件惟一根元素,必须设置!
进阶提示 – 当xml进入解析数据结构阶段,则主标签“krpano”将被移除。因此你能够在当前krpano标签内定义另外一个krpano元素,定义新的设置或从新定义先前的设置。
样例:
<krpano> <!-- 仅仅使用网格预览全景(节约下载空间--> <preview type="grid(cube,16,16,512,0xCCCCCC,0xFFFFFF,0x999999);" details ="16" /> </krpano>
grid(type,xsteps,ysteps,res,lincol,bkcol,pntcol)
可选参数: xsteps =行像素之间的水平距离,默认= 10 ysteps =行像素之间的垂直距离,默认= 10 res =解决 gridimage,默认= 400 lincol = hex-format 线条的颜色(默认= 0 x666666) bkcol =背景颜色(默认= 0 x222222) pntcol =点的颜色(默认= linecolor)
<krpano version="1.17" onstart="loadscene(scene1);"> <scene name="scene1"> ... </scene> </krpano>
preview 预览图设置,指定一张全景预览图,以便在读取过程当中,过渡显示,即全景彻底载入以前的模糊图像,通常自动生成
<preview type="" //全景图的类型(SPHERE,CYLINDER,CUBESTRIP,grid(type,xsteps,ysteps,res,linecol,bgcol,pntcol) ) url="previewpano.jpg" //全景图路径 striporder="LFRBUD" //定义图像顺序 details="16" //图像细节质量调整,越大越清晰 />
样例:
<preview url="pano_preview.jpg" /> <preview type="grid(CUBE,16,16,512,0xCCCCCC,0xFFFFFF,0x999999);" /> <preview type="SPHERE" url="spherepreview.jpg" details="16" /> <preview type="CUBESTRIP" url="cspreview.jpg" />
*image全景图设置,包括全景图类型、渐进分辨率切片显示等
<image type="CUBE" 全景图类型(六面体)CUBE、CUBESTRIP、SPHERE、CYLINDER tiled="false" 是否使用平铺图像 tiledimagewidth="..." 平铺图像宽度 tiledimageheight="..." 平铺图像高度 tilesize="..." 平铺图像大小 baseindex="1" 图像读取默认索引数字(第一个) frames="1" 当前图像帧数 frame="1" prealign="" prealign,采用X|Y|Z轴对齐方式 hfov="" 水平视野 vfov="" 垂直视野 multires="" 多级精度 multiresthreshold=“0.025” stereo="" 立体 stereolabels="" stereoformat="" fisheye.fov="" 鱼眼 fisheye.align="" fisheye.crop="" fisheye.lenscp="" voffset=“0.0” 垂直偏移度 progressive=“false” 多分辨率加载(仅限flash) cubelabels=“u‘b r f l | | | | | d‘” sphere.mapping 定义/投影球面输入图像的映射(仅限html5) mjpegstream mjpeg流(只支持HTML5和WebGL) > <cube url="pano_%s.jpg" /> </image>
以上是数字索引方式读取切片图片,如下是经过定义六个方向的图片路径读取切片,文件后缀要加上_l,_f....方式来识别。
相关方法
image.layer 仅限as3 usage image.level.count 只读 level[..].tiledimagewidth level[..].tiledimageheight level[..].tilesize level[..].aspreview
<image type="CUBE" tiled="false" tiledimagewidth="..." tiledimageheight="..." tilesize="..." baseindex="1" frames="1" frame="1" prealign="" > <left url="pano_l.jpg" rotate="0" flip="" /> <front url="pano_f.jpg" rotate="0" flip="" /> <right url="pano_r.jpg" rotate="0" flip="" /> <back url="pano_b.jpg" rotate="0" flip="" /> <up url="pano_u.jpg" rotate="0" flip="" /> <down url="pano_d.jpg" rotate="0" flip="" /> </image>
例子
<image> <cube url="pano_%s.jpg" /> </image>
<!-- -->
<image> <cubestrip url="cubestrip.jpg" /> </image>
<!-- -->
<image type="SPHERE" multires="true" tilesize="..."> <level tiledimagewidth="..." tiledimageheight="..."> <sphere url="pano_%v_%h.jpg" /> </level> </image>
<!-- -->
<image type="CYLINDER" multires="true" tilesize="..."> <level tiledimagewidth="..." tiledimageheight="..."> <cylinder url="pano_%v_%h.jpg" /> </level> </image>
<!-- -->
<image> <fisheye url="fisheye.jpg" fov="180.0" /> </image>
<!-- -->
<image type="CYLINDER" hfov="1.0" multires="true" tilesize="..."> <level tiledimagewidth="..." tiledimageheight="..."> <cylinder url="image_%v_%h.jpg" /> </level> </image>
<!-- -->
<plugin name="video" url.flash="videoplayer.swf" url.html5="videoplayer.js" videourl="video.m4v|video.webm" /> <image> <sphere url="plugin:video" /> </image>
view 元素控制全景的视野,例如起始位置、视域范围、可缩放范围、是否限制,限制观看的区域等等。当要设置限制视角或设定特定的初始视角时,须要自行设定或使用插件获取代码。
观看方向由hlookat/vlookat属性定义,当前视场由fov属性定义。要限定部分全景的视场,可使用limitview属性。
<view hlookat="0.0" 水平视角 -180 至 180 之间 vlookat="0.0" 垂直视角 -90 至 90 之间 camroll="0.0" 镜头旋转视角 fovtype="VFOV" 定义视场角类型 •vfov -垂直视场,基于屏幕的高度 •HFOV -水平视野,基于屏幕宽度 •DFOV -看对角线场,基于屏幕的对角线 •MFOV -最大的视场(动态混合vfov和HFOV) 注意:在手机和平板设备的默认值将MFOV! fov="90.0" 默认视角的缩放 hfov="" 当前水平视野(只读) vfov="" 当前垂直视野(只读) fovmin="1.0" 默认视角缩放最大值 fovmax="179.0" 默认视角缩放最小值 maxpixelzoom="" 默认视角最大缩放倍数 mfovratio="1.333333" 最大的屏幕尺寸的宽高比例 distortion="0.0" 鱼眼视角失真设置 0.0 至 1.0 之间(扭曲程度) fisheye="0.0" #鱼眼视角设置 0.0 至 1.0 之间(扭曲程度)(旧) distortionfovlink="0.5" fov值与鱼眼视角的关联值,默认0.5(0.0-3.0之间) fisheyefovlink="0.5" #fov值与鱼眼视角的关联值,默认0.5(0.0-3.0之间)(旧) stereographic="true" 是否启动立体鱼眼投影效果(小行星) pannini="0.0" 设置“Pannini / vedutismo”投影效果 architectural="0.0" 建筑视角设置 0.0 至 1.0 之间 architecturalonlymiddle="true" 是否只对中间区域的图像实行建筑投影 limitview="auto" 视角限制类型 •off--不限制在全部 •auto--自动限制(默认) •lookat--限制查看变量直接“hlookatmin”,“hlookatmax”,“vlookatmin”,“vlookatmax” •range--限制的地区设置由“hlookatmin”,“hlookatmax”,“vlookatmin”,“vlookatmax”,只有在这个范围内,容许观察 •fullrage--的地区设置由“hlookatmin”,“hlookatmax”,“vlookatmin”,“vlookatmax”,但容许放大看到整个图像 •offrange---限制的地区设置由“hlookatmin”,“hlookatmax”,“vlookatmin”,“vlookatmax”,但不以任何方式限制缩放。 hlookatmin="" 最小水平视角范围 (-180 .. +180). hlookatmax="" 最大水平视角范围 (-180 .. +180). vlookatmin="" 最小垂直视角范围 (-90 .. +90). vlookatmax="" 最大垂直视角范围 (-90 .. +90). hlookatrange=""(只读) 当前最大水平范围(等同于 hlookatmax - hlookatmin) vlookatrange=""(只读)当前最大垂直范围(等同于vlookatmax - vlookatmin) />
默认视角的参数设置和视角限制设置
样例:
normal: <view hlookat="0" vlookat="0" fov="80" />
little planet view:
<view hlookat="0" vlookat="90" fisheye="1.0" stereographic="true" fov="150" fovmax="150" />
flat pano:
<view hlookat="0" vlookat="0" maxpixelzoom="1.0" limitview="fullrange" />
area 全景图在浏览器中的显示区域大小, 定义全景图像展现的区域/窗口。有两种定义区域位置和尺寸的模式:
可在onresize事件中动态改变/调整这些设定。若是在onresize事件以外改动了area设置,那么在下一次屏幕刷新时候将会调用一个onresize事件,对于新的区域/窗口尺寸做出回应。
注意 – 全部的<layer> / <plugin>
元素都要放在这个区域内。若是要把<layer> / <plugin>
元素放在区域外面,需设置layer/plugin的STAGE属性。
对齐方式:
<area mode="align" 定义区域的模式,排列align和边界border两种 可选的值:align、border align="lefttop" 排列对齐时[X,Y]的坐标参考系 可选的值:lefttop、left、leftbottom、top、center、bottom、righttop、right、rightbottom x="0" 基于排列方式偏移的X坐标 y="0" 基于排列方式偏移的y坐标 width="100%" 区域宽度,能够是像素值也能够是百分比 height="100%" 区域高度,能够是像素值也能够是百分比 />
边界填充模式:
<area mode="border" 定义区域的模式:边界 left="0" 距左边的像素数 top="0" 距顶部的像素数 right="0" 距右边的像素数 bottom="0" 距底部的像素数 />
样例:
`<area align="center" width="640" height="480" />
<area mode="border" top="10" bottom="100" />
<area x="25%" width="75%" />
<events onresize="fixaspectresize(16,9);" />`
*display 全景图显示品质,定义渲染的质量和性能
html5状态下显示质量设置
<display stereo="false" 立体 stereooverlap="0.0" hardwarelimit="" 限制只对目标硬件输出 • Desktop(桌面) with WebGL - 4096 • Desktop with CSS3D - 2560 • Android / BlackBerry / Kindle / Windows Phone - 1024 • iPad - 1024 • iPhone (Retina) with iOS 5.1 (or higher) - 1024 • iPhone 5/5S and higher - 1024 • iPhone (Retina) with iOS below 5.1 - 800 • iPod (Retina) - 640 • iPhone / iPod Touch (Non-Retina) - 600 usedesktopimages="" 设置是否在PC桌面使用html5输出 mipmapping="auto" 定义切片输出模式,可选的值:auto、force、off loadwhilemoving="auto" 控制在移动时平滑显示模式(auto\true\false) framebufferscale="1.0" 调整/规模WebGL帧缓冲区的大小。 />
flash状态下显示质量设置
<display fps="60" flash播放时的帧速率,默认为60(30-100) details="24" 细碎程度,数值越高,Flash渲染越细腻(Flash only) tessmode="-1" 设置Flash材质排列方式,-1表示自动(球体时为0;立方体时为3)(Flash only) 可选的值:-一、一、二、三、四、5 movequality="LOW" 移动时呈现质量(Flash only) 可选的值:LOW、HIGH、BEST、HIGHSHARP stillquality="HIGH" 静止时呈现质量(Flash only) 可选的值:LOW、HIGH、BEST、HIGHSHARP flash10="on" 启动flash10渲染,该项启动后上两项(movequality、stillquality)设置无效 movequality10="HIGH" 移动时呈现质量(Flash10使能时有效)(Flash only) 可选的值:LOW、HIGH、BEST、HIGHSHARP stillquality10="HIGH" 静止时呈现质量(Flash10使能时有效)(Flash only) 可选的值:LOW、HIGH、BEST、HIGHSHARP sharpen="12" 图像锐化程度,仅当影像品质为HIGHSHARP时有效,值域0-14(Flash only) stilltime="0.25" 从 “移动改变到静止”以前的等待时间(Flash only) showpolys="false" 显示3D几何形状线条(Flash only) />
样例:
<display flash10="off" details="28" /> <display flash10="off" stillquality="HIGHSHARP" /> <display html5rendermode="1" devices="iPad+Retina" /> <display hardwarelimit="512" devices="Android" /> <display usedesktopimages="true" hardwarelimit="1800" devices="iPad+Retina+iOS6" />
control 设置鼠标、键盘及触摸设备对全景浏览的控制方式
<control usercontrol="all" 用户控制方式(all,mouse,keyb,off) mouse="drag" 控制方式(drag,moveto,drag3d(仅限flash)) touch="drag" 控制方式(drag,moveto,drag3d(仅限flash)) dragrelative="true" 参数设置 draginertia="0.1" 惯性 dragfriction="0.9" 摩擦力 drag_oldmode="false" 旧模式(html5) movetorelative="true" 参数设置 movetoaccelerate="1.0" 加速度 movetospeed="10.0" 最大速度 movetofriction="0.8" 摩擦力 movetoyfriction="1.0" 垂直摩擦力 keybaccelerate="0.5" 加速度 keybspeed="10.0" 速度 keybfriction="0.9" 摩擦力 keybinvert="false" 反转 keybfovchange="0.75" 按钮改变视角 mousefovchange="1.0" 鼠标滚轮改变视角 fovspeed="3.0" 改变视角速度 fovfriction="0.9" 改变摩擦力 zoomtocursor="false" 放大 zoomoutcursor="true" 缩小 touchzoom="true" 手势缩放 keycodesleft="37" 左键 keycodesright="39" 右键 keycodesup="38" 上键 keycodesdown="40" 下键 keycodesin="" 放大键 keycodesout="" 缩小键 keydownrepeat="true" 连续按键 bouncinglimits="false" 反弹(仅限html5) />
<control mouse="drag" touch="drag" dragrelative="true" draginertia="0.1" dragfriction="0.9" movetorelative="true" movetoaccelerate="1.0" movetospeed="10.0" movetofriction="0.8" keybaccelerate="0.5" keybspeed="10.0" keybfriction="0.9" keybfovchange="0.75" mousefovchange="1.0" fovspeed="3.0" fovfriction="0.9" zoomtocursor="false" zoomoutcursor="true" touchzoom="true" bouncinglimits="false" />
鼠标键盘的控制设置
样例:
<control mousetype="drag2D" /> <cursors url="drag-cursors.png" type="drag" move="2|0|30|32" drag="37|0|30|32" /> <control mousetype="moveto" /> <cursors url="arrow-cursors.png" type="4way" move="112|0|28|28" drag="112|0|28|28" arrow_r="0|0|28|28" arrow_d="28|0|28|28" arrow_l="56|0|28|28" arrow_u="84|0|28|28" />
cursors 鼠标光标样式
html5可使用 standard, dragging and moving 调用系统样式,flash模式能够自定义图片
<cursors standard="default" 标准 dragging="move" 拖动 moving="move" 移动 url="" 光标图片地址 type="8way" 光标方向模式,是4个方向移动更换图片,仍是8个方向移动都更换图片(drag,4way,8way) move="" 设定光标移动时显示图片 drag="" 设定鼠标按下时显示图片 arrow_l="" 如下是8个方向移动时对应显示的鼠标图片 arrow_r="" arrow_u="" arrow_d="" arrow_lu="" arrow_ru="" arrow_ld="" arrow_rd="" />
自定义光标的样式
样例:
<control mousetype="drag2D" /> <cursors url="drag-cursors.png" type="drag" move="2|0|30|32" drag="37|0|30|32" /> <control mousetype="moveto" /> <cursors url="arrow-cursors.png" type="4way" move="112|0|28|28" drag="112|0|28|28" arrow_r="0|0|28|28" arrow_d="28|0|28|28" arrow_l="56|0|28|28" arrow_u="84|0|28|28" />
autorotate 自动旋转
<autorotate enabled="false" 是否开启自动旋转 waittime="1.5" 用户不对屏幕操做后,开始自动旋转的等待时间 accel="1.0" 旋转加速度:角度/秒 speed="10.0" 自动旋转速度:角度/秒 horizon="0.0" 例如-45表示向上45度仰视;45表示向下45度俯视 tofov="off" 缩放到特定的视区 zoomslowdown="true" 相对于当前的缩放/视场速度,减慢自动旋转速度,以得到相同的视觉速度在全部的缩放距离。 interruptionevents="userviewchange|layers|keyboard" 定义哪些事件将中断自动旋转(以及onidle事件),能够组合 />
相关属性
autorotate.isrotating 是否旋转状态(只读) autorotate.ispaused 是否中止状态(只读)
相关设置方法,事件
autorotate.start() 直接开始自动旋转(无需等待 autorotate.waittime) autorotate.stop() 中止当前自动旋转而且禁用它 autorotate.interrupt() 中断自动旋转,但自动旋转功能自身仍然可用,会再过 autoratate.waittime 后自再次开始 autorotate.pause() 暂停自动旋转。例如当鼠标划过某个热点时就有必要让旋转暂停下来 autorotate.resume() 重启刚才暂停的旋转
onautorotatestart, onautorotatestop, onautorotateoneround onautorotatechange
当无用户交互时.自动旋转、扭曲/移动,缩放
开始旋转:set(autorotate.enabled,true); 中止旋转:set(autorotate.enabled,false); 交替旋转:switch(autorotate.enabled);
样例:
<autorotate enabled="true" /> <autorotate enabled="true" waittime="5.0" speed="-3.0" horizon="0.0" tofov="120.0" />
plugin/layer功能相同, 能够调用插件,也可插入图片或容器,相似div ,习惯系统插件用plugin,插入图片视频或容器用layer
注:parent及keep属性会自动继承父元素的对应属性
<plugin name="..." 定义引入的元素名称 type="image" 引入元素的类型,能够为image、container、text(textfield),container为容器,可在容器内继续引入多个媒体元素 url="..." 引入元素的路径(支持格式:SWF, JPG, PNG, GIF.) html="" 显示文字时的内容 keep="false" 是否在跳入新场景时仍然保留显示该元素 parent="" 设置父容器名称,能够直接是 plugin的name,也能够是全称:parent="layer[name]"或parent="hotspot[name]" alturl="" #引入元素的路径(支持格式:SWF, JPG, PNG, GIF.),只在html5浏览器使用 devices="all" 设置显示的设备类型(详见设备列表) visible="true" 设置插入元素是否可见 enabled="true" 设置插入元素是否接受鼠标事件 handcursor="true" 鼠标移动该元素上时,是否变为小手 maskchildren="false" 设置是否将子控件变为蒙板,设置为TRUE后,除子控件范围显示外,子控件边框与父控件边框之间区域将不显示 scalechildren="false" 设置是否子空间跟随父控件一同缩放 zorder="" 插入元素的次序索引,能够是字符也能够是数字,html5输出必须是0-100整数 capture="true" 只是该元素接受事件,false时子元素也可接受事件 children="true" 启用当前元素的子元素来接收鼠标事件。 preload="false" 预加载,在加载pano以前先加载图层/插件的url,而后执行任何操做。 blendmode="normal" 混合/混合模式( normal, layer, screen, add, subtract, difference, multiply, overlay, lighten, darken, hardlight, invert)仅flash style="" 调用已在文件中定义好的style的名称 align="" 元素在屏幕对齐方式,lefttop, left, leftbottom, top, center, bottom, righttop, right, rightbottom (见示意图) edge="" 元素的边缘或描点层对齐方式,lefttop, left, leftbottom, top, center, bottom, righttop, right, rightbottom (见示意图) x="" 对齐边界到对齐点的X横向距离 y="" 对齐边界到对齐点的y横向距离 ox="" 偏移 oy="" 偏移 rotate="0.0" 插入元素显示时旋转度数 width="" 插入元素的显示宽度(prop:自适应) height="" 插入元素的显示高度 minwidth="0" maxwidth="0" minheight="0" maxheight="0" autowidth="false" 根据内容自适应宽度 autoheight="false" 根据内容自适应高度 scale="1.0" 插入元素的缩放比例 pixelhittest="false" 仅flash smoothing="true" 平滑 仅flash accuracy="0" 精度 alpha="1.0" 插入元素的不透明度 autoalpha="false" 自动透明度 usecontentsize="false" 满画布 仅flash scale9grid="" 定义9格网格(scale9grid="x-position|y-position|width|height|prescale*") crop="" 定义元素坐标及宽高 crop="x-position|y-position|width|height" onovercrop="" 设置元素鼠标移到上方后的坐标及宽高 ondowncrop="" 设置元素鼠标按下状态后的坐标及宽高 mask="" 遮罩 仅flash effect="" 位图效果适用于层/插件的形象 仅flash background="" 能够设置false 去掉背景 bgcolor="0x000000" type="container"状态下的背景颜色,非container状态下无效 bgalpha="0.0" 背景不透明度 bgborder="0" (bgborder="widths color alpha")边框 bgroundedge="0" 圆角 bgshadow="" (基本:bgshadow="xoffset yoffset blur color alpha";高级:gshadow="xoffset yoffset blur spread color alpha inset, ...")阴影 bgcapture="false" 是否捕抓在背景容器上事件(type="container"状态下生效) onover="" 鼠标在通过上方时执行动做 onhover="" 鼠标停在上方时执行动做 onout="" 鼠标停移出范围时时执行动做 onclick="" 鼠标停点击时执行动做 ondown="" 鼠标按下时执行动做 onup="" 鼠标按键松开时执行动做 onloaded="" 加载元素完成后执行动做 background="false" backgroundcolor="0xFFFFFF" backgroundalpha="1.0" border="false" bordercolor="0x000000" borderalpha="1.0" borderwidth="1.0" roundedge="0" shadow="0.0" shadowrange="4.0" shadowangle="45" shadowcolor="0x000000" shadowalpha="1.0" textshadow="get:skin_settings.design_text_shadow" textshadowrange="6.0" textshadowangle="90" textshadowcolor="0x000000" textshadowalpha="1.0"/>
相关方法
layer.layer layer.count layer数量(只读) layer[name].index 索引(只读) layer[name].imagewidth 图片宽(只读) layer[name].imageheight(只读) layer[name].pixelwidth 宽(只读) layer[name].pixelheight 高(只读) layer[name].pixelx x坐标(只读) layer[name].pixely y坐标(只读) layer[name].loading=“false”(只读) 是否正在加载 layer[name].loaded=“false(只读) 是否加载完成 layer[name].loadedurl(只读) 加载的url layer[name].hovering=“false(只读) 是否hover layer[name].pressed=“false(只读) 是否按下 layer[name].loader 加载器 layer[name].sprite layer[name].loadstyle(stylename) 加载属性集 layer[name].registercontentsize(width、height) 设置宽高 layer[name].resetsize() 尺寸改变回调 layer[name].updatepos() 更新回调 layer[name].changeorigin(align,edge) 更新对齐、边缘 layer[name].getfullpath() 返回完整路径 (仅plugininterface)
载入其余flash程序,图片或者按钮,图标
样例:
<layer name="logo" url="logoimage.png" align="rightbottom" x="20" y="20" onclick="openurl('http://...');" /> <layer name="imagebar" type="container" width="100%" height="200" align="leftbottom" bgcolor="0x000000" bgalpha="0.5"> <layer name="item1" url="image1.jpg" align="left" x="10" /> <layer name="item2" url="image2.jpg" align="left" x="110" /> <layer name="item3" url="image3.jpg" align="left" x="210" /> </layer>
插入html标签<layer name="fullscreen_btn_text" style="btn_text" html="[h1 class='demo'] 全屏 [/h1]" onclick="togglefullscreen()"/>
热点,可在 3D 空间中插入图片,使之随着 3D 空间一同运动,可制做不少特效。
<hotspot name="..." 定义热点名称 type="image" 定义热点类型,image,text(textfield.) url="..." 热点图像路径,支持SWF, JPG, PNG, GIF alturl="..." #html5状态下显示的图像路径 keep="false" 是否在下一场景跳转后保持显示 renderer="webgl" 渲染方式 webgl、css3d devices="all" 支持设备类型 visible="true" 是否可见 enabled="true" 设置热点是否接收鼠标事件 handcursor="true" 设置是否鼠标移到上面显示小手 maskchildren="false" 设置是否将子控件变成蒙板 zorder="" 插入元素的次序索引,能够是字符也能够是数字,html5输出必须是0-100整数 zorder2="0.0" (仅html5)设置为0.0和1.0,分别对应当前热点在扭曲控件之下和之上 capture="true" 与enabled配合使用,都为true只对热点传递动做,capture="false"可对子控件传递动做 children="true" 设置子控件是否接收热点鼠标事件 blendmode="normal" 设置混合模式,可选:normal, layer, screen, add, subtract, difference, multiply, overlay, lighten, darken, hardlight, invert. mipmapping="false" 热点图像应该mip-mapped期间呈现缩小时(例如避免混淆) 仅html5 premultiplyalpha="false" 透明通道 仅html5 style="" 读入已设置好的style名称 ath="0.0" atv="0.0" 球坐标 edge="center" 热点的边界对齐点 ox="0" 边界到对齐点的偏移量 oy="0" zoom="false" 设置是否场景缩放时,热点跟随缩放 distorted="false" 设置热点是否跟随场景进行3D扭曲 rx="0.0" ry="0.0" rz="0.0" 三维旋转度,distorted="true"可用 depth="1000" 深度 仅html5 tx="0.0" ty="0.0" tz="0.0" 三维偏移量 details="8" 热点显示的细节数量,默认为8 仅flash inverserotation="false" 设置是否逆向旋转3D扭曲 flying="0.0" 自动设置ath/atv/scale的值,0.0-1.0,1.0热点将被锁定在屏幕中间,高度1000 scaleflying="true" 当热点从pano-space-size到screen-space-size是否缩放 width="" height="" 设置热点宽高 scale="1.0" 设置热点缩放 rotate="0.0" 设置热点旋转角度 pixelhittest="false" 是否启动精确像素测试 仅flash smoothing="true" #设置缩放时,是否平滑化处理 accuracy="1" 设置像素渲染值(flash下) accuracy2="1" 设置精度控制(html5下) alpha="1.0" 设置透明度 autoalpha="false" 设置是否自动变动透明度 usecontentsize="false" 是否使用用户指定flash大小,默认false原始大小 scale9grid="" 定义是否支持矢量缩放,scale9grid="x-position|y-position|width|height|prescale*" stereo="" SBS,TB 仅html5和WebGL crop="" 定义元素坐标及宽高 crop="x-position|y-position|width|height" onovercrop="" 设置元素鼠标移到上方后的坐标及宽高 ondowncrop="" 设置元素鼠标按下状态后的坐标及宽高 scalechildren="false" 子元素是否跟随缩放 mask="" #mask="name" mask="layer[name]" mask="hotspot[name]" effect="" #热点位图效果3种:glow(color,alpha,range,strength); dropshadow(depth,angle,color,range,strength); blur(radius); onover="" 鼠标在通过上方时执行动做 onhover="" 鼠标停在上方时执行动做 onout="" 鼠标停移出范围时时执行动做 onclick="" 鼠标停点击时执行动做 ondown="" 鼠标按下时执行动做 onup="" 鼠标按键松开时执行动做 onloaded="" 加载元素完成后执行动做 />
<hotspot name="..." keep="false" visible="true" enabled="true" handcursor="true" zorder="" capture="true" blendmode="normal" style="" alpha="1.0" autoalpha="false" fillcolor="0xFFFFFF" fillcolorhover="0xFFFFFF" 填充颜色及鼠标移上后颜色 fillalpha="0.0" fillalphahover="0.1" 填充颜色透明度及鼠标移上后颜色透明度 borderwidth="0.0" borderwidthhover="4.0" 边界宽度及鼠标移上后边界宽度 bordercolor="0xFFFFFF" bordercolorhover="0xFFFFFF" 边界颜色及边界鼠标移上后颜色 borderalpha="0.0" borderalphahover="0.8" 边界透明度及鼠标移上后边界透明度 fadeintime="0.15" fadeincurve="1.1" 悬停状态变化时间及形式 fadeouttime="0.3" fadeoutcurve="0.7" polyline="false" onover="" onhover="" onloaded="" onout="" onclick="" ondown="" onup=""> <point ath="..." atv="..." /> <!-- 多边形热点坐标 --> <point ath="..." atv="..." /> <point ath="..." atv="..." /> ... </hotspot>
hotspot.count 热点个数(只读) hotspot.layer (as3 usage only) hotspot[name].index 索引(只读) hotspot[name].point.count 多边形点数 (只读) hotspot[name].point[..].ath hotspot[name].point[..].atv hotspot[name].loading(只读) 是否正在加载 hotspot[name].loaded(只读) 是否加载完成 hotspot[name].loadedurl(只读) 加载的url hotspot[name].hovering(只读) 是否hover hotspot[name].imagewidth (只读) 图片宽 hotspot[name]..imageheight (只读)图片高 hotspot[name].pressed(只读) 是否按下 hotspot[name].loader 加载器 hotspot[name].sprite 雪碧图 hotspot[name].loadstyle(stylename) 加载属性集 hotspot[name].resetsize() 尺寸改变回调 hotspot[name].getfullpath() 返回完整路径 (仅plugininterface) hotspot[name].getcenter(ath,atv) 获取中心位置
events 可调用各种型的事件,如载入过程当中不一样阶段触发的不一样行为,设置事件的响应。
全局krpano事件:
一个不具备name属性的<events>
元素定义的事件都是全局事件。一般只有一个全局事件。当有另外一个<events>
标签订义相同的事件时,以前定义的同一事件就会被覆写。
注意–当载入另外一个xml文件或其余场景时,全部全局事件将保留,它们不会发生改变,除非在新的xml文件或场景中被再次定义。
<events name="" keep="false" onenterfullscreen="" 进入全屏时执行 onexitfullscreen="" 退出全屏时执行 onxmlcomplete="" XML文件加载完成时执行 onpreviewcomplete="" 预览图加载完成时执行 onloadcomplete="" 全景切片加载完毕时执行 onnewpano="" 启动新的全景场景时执行 onremovepano="" 场景被移除时执行(加载新场景前) onnewscene="" 新场景加载完成时执行 onloaderror="" 加载错误时执行,执行被设置后,屏幕将不显示默认的错误信息 onkeydown="" 键盘按下时执行 onkeyup="" 键盘抬起时执行 onclick="" 鼠标点击时执行 onsingleclick="" 单击 ondoubleclick="" 双击 onmousedown="" 当鼠标按下时执行 onmouseup="" 当鼠标松开时执行 onmousewheel="" 当鼠标滚轮滚动时执行 oncontextmenu="" 右键菜单 onidle="" 无交互空闲时执行 onviewchange="" 场景视图改变时执行(渲染开始时) onviewchanged="" 场景视图改变后执行(渲染完成时) onresize="" 全景尺寸改变时执行 onautorotatestart="" 自动旋转开始时执行 onautorotatestop="" 自动旋转中止时执行 onautorotateoneround="" 自动旋转一圈时执行 onautorotatechange="" 自动旋转状态改变时执行 />
独立局部krpano事件:
一个具备name属性的<events>
元素定义的事件都是独立事件。它能够包含全部类型的事件,但它们不会覆写全局事件,它们是另外进行调用的。这些被“命名”的<events>
元素一样具备keep属性(默认值为false)。这意味着没有keep=”true”的<events>
元素在新全景载入时将会被自动移除。
提示–命名的事件可以在不影响其余插件或xml代码的基础下在独立的插件和代码中发生做用。
<events name="..." keep="false" ... any events ... />
action自定义动态代码,相似js中的function 须要时才载入
<action name="..." autorun="" 在开始自动运行 scope="global" ( global,local,parent ) 做用域类型 args="" 参数列表 secure="false" 安全将被设置为true时,行动将由Javascript调用接口, 即便是禁用Javascript接口。 protect="false" 保护 为true变量将没法访问 type=""> secure为是否支持JS接口调用 action1(); 动做函数名称(); action2(); ... </action>
参数传递的两种方式:
%占位符(全部版本可用)
参数可使用“%数字” 占位符来表示,范围为 %0-%99, %0表示action自己的名字,%1为第一个参数,%2为第二个,以此类推,在代码被解析和执行的时候占位符会被传入的值替代,若是没有传入参数,将会使用“0”替代(%0除外,它始终是表示action自己的名字),使用%符号用%%替代。
如caller.linkedscene等价linkedscene
<action name="test" scope="local" args="var1, var2, var3"> showlog(); trace('var1=',get(var1)); trace('var2=',get(var2)); trace('var3=',get(var3)); </action>
使用未传递的参数,将使用‘0’代替,每一个参数将映射到action内部的一个新变量,在使用包含引号或逗号字符的值时,使用变量映射方式很是有用。在这种状况下,%占位符方式可能有问题。
使用javascript
经过JavaScript操做,能够直接为动做代码使用JavaScript代码。对于更复杂的事物,这可能更快,但仅可在html5中使用
<!-- 使用js,仅限html5 --> <action name="..." type="Javascript"><![CDATA[ ... Javascript code ... ]]></action>
定义行为.须要用脚本语言解释器解释
可用方法
ction[name].content 获取内容 action.count 获取数量 只读
样例:
<krpano onstart="intro();"> ... <action name="intro"> lookat(0,0,90); wait(LOAD); lookto(120,10,110); lookto(-50,40,110); lookto(0,0,90); </action> ... </krpano>
<action name="overaction"> tween(scale, 2.0); tween(alpha, 1.0); </action> <plugin name="pic1" ... onover="overaction();" onout="outaction();" />
contextmenu 自定义右键菜单
<contextmenu fullscreen="false" 是否显示[全屏]菜单项 native="false" 是否使用本地菜单方式,为False时将启用HTML5兼容菜单模式。(Flash only) versioninfo="true" 是否显示krPano Viewer及Flash Player版本信息 touch="true" 在触摸设备上是否可用 customstyle="" 自定义菜单风格(仅html5)customstyle="font|fontsize|lineheight|backgroundcolor|textcolor|disabled-textcolor|borderwidth|bordercolor|borderradius|shadow-x-offset|shadow-y-offset|shadow-blur-range|shadow-color|innerborder|innerbordercolor|padding-top|padding-bottom|seperator-margin|seperator-color|seperator-second-line-color|item-padding|item-borderwidth|item-bordercolor|item-borderradius|item-margin|item-hover-backgroundcolor|item-hover-bordercolor|item-hover-textcolor|item-text-left-margin|item-text-right-margin" enterfs="Fullscreen" 进入全屏菜单文字 exitfs="Exit Fullscreen" 退出全屏菜单文字 > <item name="..." 自定义项目名称 caption="..." 显示的标题 enabled="true" 是否点击生效 visible="true" 是否可见 separator="false" 是否显示分隔条 showif="" showif="view.vlookatrange GE 180" 本item只在该条件为真显示 onclick="..." 点击后执行 /> <item name="..." caption="..." onclick="..." /> ... </contextmenu>
相关方法:contextmenu.item.count
network 图像下载、缓存与解码
<network retrycount="2" 当服务器或网络故障时,在提示出错信息前的重试次数 />
memory 内存分配,单位兆
<memory maxmem="..." 最大内存分配 devices="..." 设备 />
maxmem默认设置:
Flash: 350 MB HTML5 Desktop: 150-400 MB (depending on the full screen size) Tablet / Mobile: 50 MB (Android, Windows, Silk, Blackberry, ...) iOS (before 7.1): 40 MB iOS (7.1 and above): 50 MB iPhone 4/4S: 40 MB
设置内存使用状况
样例:
<memory maxmem="350" devices="Desktop+Flash" /> <memory maxmem="150" devices="Desktop+HTML5" /> <memory maxmem="50" devices="Mobile|Tablet" /> <memory maxmem="40" devices="iOS" /> <memory maxmem="50" devices="iOS7.1" />
security flashplayer和html5相关的安全/跨域设置
<security cors=""> 设置是否开启跨网络认证,off\anonymous\use-credentials <crossdomainxml url="" /> 设置加载文件的url (仅flash) <allowdomain domain="" /> 容许被访问的域名设置 只读 </security>
定义一个镜头光晕样式,用于lensflare 元素调用(仅限flash)
<lensflareset name="." url="%SWFPATH%/krpano_default_flares.jpg"> 定义样式名称,指定灯光照片 <flare pixsize="128" 耀斑大小设置 pixupos="0" 耀斑水平像素位置 pixvpos="0" 耀斑垂直像素位置 color="0xFFFFFF" 耀斑颜色 pos="0.0" 耀斑起始位置 scale="0.1" 耀斑相对于屏幕的大小比值(0.01-0.10) /> <flare ... /> <flare ... /> ... </lensflareset>
相关方法:
lensflareset[name].index lensflareset[name].flare.count lensflareset[name].flare[…].index
定义一个镜头光晕(仅限flash)
<lensflare name="..." 定义名称 set="DEFAULT" 设置默认样式,仍是已定义的lensflareset样式 visible="true" 是否可见 keep="false" 是否在场景切换时持续显示 ath="0.0" 全景中球体坐标的水平位置 atv="0.0" 全景中球体坐标的垂直位置 size="0.8" 耀斑大小设置 blind="0.6" 耀斑盲点大小 blindcurve="4.0" 耀斑曲线强度设置 />
相关方法:
lensflare.count lensflare[name].index
data 能够放置任何数据,krpano不会解析其内容,整个data元素的内容将被存储在data[neme]
对象中。须要时才载入
<data name="..."> ... </data>
避免xml解析CDATA:
<data name="..."><![CDATA[ ... ]]></data>
data.count
data[name].index
data[name].content
CDATA避免xml解析,包裹的内容不会被解析:
<![CDATA[ ... ]]>
scene 场景,能够放置任何元素,在任何状况都不会被解析或使用,除非在被loadscene调用时才会载入浏览器解析,在浏览器载入xml文件时,不会加载其内容和属性,至关于一个封闭的集装箱,对浏览器而言,它只知道其属性。
使用loadpano()载入外部xml文件时,当前定义过的scene元素将被移除。
能够在scene元素中存储任何自定义属性——viewer自己会忽略这些属性,但能够用自定义action使用这些元素。
<scene name="..." onstart=""> onstart 场景开始渲染时加载action ... </scene>
内容
scene[name].content scene.count scene[name].index scene.onstart
样例:
<scene name="scene_1" onstart="" heading="0.0" lng="103.76300000" title="t1" thumbx="75" lat="31.51229500" thumburl="panos/1.tiles/thumb.jpg" thumby="10"> <view fovtype="DFOV" maxpixelzoom="2.0" fov="90" vlookat="-80" fisheye="0.35" hlookat="0" fovmin="70" fovmax="140" limitview="range" hlookatmin="-90" hlookatmax="90"/> <preview url="panos/1.tiles/preview.jpg" /> <image multires="true" tilesize="512" type="CUBE" progressive="false"> <level tiledimageheight="1592" tiledimagewidth="1592"> <cube url="panos/1.tiles/%s/l2/%v/l2_%s_%v_%h.jpg" /> </level> <level tiledimageheight="796" tiledimagewidth="796"> <cube url="panos/1.tiles/%s/l1/%v/l1_%s_%v_%h.jpg" /> </level> <mobile> <cube url="panos/1.tiles/mobile_%s.jpg" /> </mobile> </image> <hotspot atv="-7.482" name="spot1" style="skin_hotspotstyle" ath="32.158" linkedscene="scene_22" /> </scene>
style 属性集合,相似css中的class样式
<style name="..." ... any plugin or hotspot or self defined attributes ... 插入 plugin 或 hotspot 或 自定义属性 /> <style name="skin_glow" ondown="copy(skin_lockglow,name); skin_buttonglow(get(name)); if(ondown2, ondown2() );" onover="if(skin_lockglow === null, copy(skin_lockglow,name); skin_buttonglow(get(name),0.3) ); " onout="if(skin_lockglow === name, ifnot(pressed, skin_buttonglow(null);delete(skin_lockglow); ));" onup="if(hovering, skin_buttonglow(get(name),0.3), skin_buttonglow(null);delete(skin_lockglow); ); if(onup2, onup2() );" />
获取style中的某个属性加global:
trace(global.style[mystyle].bgborder);
include元素能够用来加载和导入其余xml文件,krpano在解析xml文件前,它会搜索全部include的xml元素,而后加载对应的xml内容,将其插入到当前xml文件并替换include元素。当全部<include>
加载解析完成,那么主要的xml才开始解析。
<include url="path/name-of-the-other-xml-file.xml" /> <include url="skin/vtourskin.xml" /> <include url="%SWFPATH%/global.xml" />
<action> / <data> / <scene>
都是特殊的元素,在xml解析时将被忽略。这些元素的内容将做为字符串存储在变量中。
progress 载入进度(废弃),官方再也不将其做为内置元素写进文档
<progress showload="auto" 设置进度条样式 none or auto or bar(...), bar(origin,width,height,offsetx,offsety,style,backcolor,loadcolor,decodecolor,bordercolor,borderwidth,glowcolor,glowwidth) showwait="loopings()" 显示等待中程序模式 none or auto or loopings(...) showreloads="false" 是否在新场景从新显示滚动条 parent="" 设置父元素名称和路径 />
textstyle 针对showtext的第三个参数的文本样式(废弃),新版showtext.xml
<textstyle name="..." 定义样式名称 font="Times" 定义文字字体 fontsize="12.0" 定义文字大小 bold="true" 是否粗体 italic="false" 是否斜体 background="true" 是否加载文字背景 backgroundcolor="0xFFFFFF" 背景颜色 border="true" 是否加载边框 bordercolor="0x000000" 边框颜色 textcolor="0x000000" 文字颜色 alpha="1.0" 文字不透明度 blendmode="normal" 选择混合模式: "normal", "add", "difference", "multiply", "screen" effect="" 选择加载特效 •glow(color,alpha,range,strength); •dropshadow(depth,angle,color,range,strength); •blur(radius); origin="cursor" 文本原点位置 cursor(鼠标光标),lefttop, left, leftbottom,top, center, bottom, righttop, right, rightbottom edge="bottom" 底部阴影效果 textalign="none" 文本对齐方式 none, left, center, right xoffset="0" 文本原点位置X轴偏移量 yoffset="-3" 文本原点位置Y轴偏移量 showtime="0.1" 显示文本的时间 fadetime="0.0" 文本淡出显示时间 fadeintime="0.0" 文本淡入显示时间 noclip="true" 是否避免文字超出屏幕边缘 />
定义文本样式,只在flash播放状况下有效
样例:
<textstyle name="DEFAULT" font="Arial" fontsize="12" bold="true" italic="true" textcolor="0x000000" background="false" border="false" blendmode="layer" effect="glow(0xFFFFFF,0.85,4,4);dropshadow(2,45,0x000000,4,1);" origin="cursor" edge="bottom" xoffset="15" yoffset="-5" showtime="0.1" fadeintime="0.1" fadetime="0.1" />
actionname(parameters); ...
表达式将被使用在:if语句;条件循环(for,loop)语句;和 calc 动做中。用于判断逻辑条件是否成立,计算数学表达式或拼接字符串。
.GT. 大于 .GE. 大于或等于 .LT. 小于 .LE. 小于或等于 .EQ. 等于 .NE. 不等于 .AND. 逻辑与 .OR. 逻辑或 .NOT. 逻辑非 .EQV. 逻辑等 .NEQV. 逻辑不等 运算符优先级由高到低顺序为:()→**→*或/→+或-→.GT.或.GE.或.LT.或.LE.或.EQ.或.NE.→.NOT.→.AND.→.OR.→.EQV.或.NEQV
静态XML语法: (在定义在xml结构)<array_name name="item_name" value="..." />
动态行为的语法: (当访问或设置在运行时)array_name[item_name].value
数组可用方法:
count 统计 sortby(attribute, parameters*) 排序 removearrayitem(name or index) 移除
onclick:鼠标点击 onover:鼠标通过 onhover:鼠标停留 onout:鼠标移开 ondown:鼠标按下 onup:鼠标抬起
lensflareset[name].flare.count
lensflareset[name].flare[...].index
官方文档:https://krpano.com/docu/actio...
version:(只读)版本信息
xmlversion:(只读)xml版本
build:(只读)构建时间
mouse.x (只读)相对于区域,坐标原点为area的左上角
mouse.y (只读)
mouse.stagex (只读)相对于屏幕,坐标原点为screen的左上角
mouse.stagey (只读)
mouse.downx (只读)相对于区域,存贮最后一次鼠标按下时的位置(右键或右键),该值以area的左上角为原点。
mouse.downy (只读)
mouse.clickx (只读)相对于区域
mouse.clicky(只读)
keycode: 0 (只读) 键码
wheeldelta: 0(只读)滚轮的标准滚动值,在大多数系统上一般为 +3(前滚) 或 -3(后滚)
wheeldelta_raw: Number.NaN
(只读)未缩放未取整前的原始滚动值,注意:在flash模式下,仅当在窗口模式(非全屏)且使用默认embedding脚本时才有效;而在html5下,始终有效。
wheeldelta_touchscale: 0.0 (只读)虽然触摸设备没有鼠标滚轮,可是当双指缩放时,仍然可能触发onmousewheel事件,该变量将提供相对的比例缩放详细信息。
注意: 仅适用于触摸设备!在其余装置上的值将永远是0。
fullscreen: false 该变量能够用来检查或更改全屏模式的当前状态。若变量被改变,说明全屏模式被改变。
例子
切换全屏状态 onclick="set(fullscreen,true);" onclick="toggle(fullscreen);"
注意:
例子<iframe ... allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
stagewidth/stageheight:(只读)当前视图窗口的宽/高 单位像素
stagescale: 1.0 总体缩放比例设置 (html5)
该设置将缩放全部krpano的元素大小。
经过缩放全部元素,舞台尺寸(屏幕尺寸/分辨率)自己将反比例增长,好比stagescale=0.5时,舞台尺寸将为200%。
该默认值取决于具体的设备、浏览器、js的window.devicePixelRatio值,在桌面和平板上该默认值一般为1.0;在移动设备上一般为0.5。
这意味着,在移动设备上的元素大小一般为桌面和平板的一半。
要禁用该行为(例如要实现一些自定义的响应式布局)能够将下面代码放到第一个xml中。
<action name="mobilescale" autorun="preinit" devices="mobile"> mul(stagescale,2); </action>
例子
<action name="mobilescale" autorun="preinit" devices="mobile"> mul(stagescale,2); </action>
bgcolor: 视图的背景颜色。在全景图像装载前的显示颜色;以及局部全景未覆盖区域的显示颜色。
当设置为有效的十六进制色值时(例如:"0xFFFFFF"表达白色),那么一个使用该颜色的形状将做为背景在全景图后面呈现。
未设置或设置无效时,则表现为透明,而且将显示FlashPlayer的默认背景色(在html文件中修改),当embedding设置中wmode="transparent"时将显示Html页面
仅限Flash:当设置时,它容许在全景图像“外部”使用鼠标进行导航(例如使用局部全景图时),而且它容许不一样尺寸局部全景之间的正确混合。
browser.useragent 用户代理字符串,user-agent 字符串。等同于js的 navigator.userAgent(只读)
browser.platform 浏览平台,在HTML5中为platform字符串,等同于js的navigator.platform;在Flash中一直为“Flash”(只读)
browser.location 当前页面的完整url(只读)
browser.domain 域名(只读)
browser.protocol 协议(只读)
例子
if(device.html5, ...); if(device.flash, ...); if(device.android, if(device.flash, ...); ); if(device.iOSversion GT 5.1, ...);
timertick (只读)查看器启动到当前时刻经历的毫秒数
random 0.0-1.0 (只读)返回一个0到1范围内的随机值
idletime 0.5 设置当无人操做时,通过多少秒会触发 Onidle 事件
//示例-生成一个1到10之间的随机数 mul(val, random, 9); add(val, 1); roundval(val); trace('random value=',val);
Math.PI 数学常数π(圆周率)的值(3.141592)
这些变量能够用来设置移动视图。
它们的主要用途是键盘或按钮动做控制。
hlookat_moveforce 0.0 小于0时向左旋转;大于0时向右旋转
vlookat_moveforce 0.0 小于0时向上旋转;大于0时向下旋转
fov_moveforce 0.0 小于0时放大;大于0时缩小
当用键盘控制全景时,这些变量会返回不一样的数值(0、1或-1)。能够在自已的程序代码中读取或设置它们,用来判断键盘操做状态或实现自动旋转的效果。
旋转加速度、速度及刹车速度分别取决于control.keybaccelerate、control.keybspeed、control.keybfriction
//示例-自动向左旋转3秒后中止 set(hlookat_moveforce,-1); delayedcall(3,set(hlookat_moveforce,0));
multireslevel 当前的层级数(范围:0到image.level.count-1) (只读)
lockmultireslevel: 1 限定在某个层级,当为-1时取消限定。
downloadlockedlevel: false 为true时表示当前限定的层将被所有下载
progress.progress: 0.0 当前加载进度值(0.0~1.0),它能够用来制做自定义加载动画,使用 onxmlcomplete 事件来启动加载动画,在 onloadcomplete 事件中中止它,加载过程当中经过该变量的值来影响进度显示内容。
xml.url (只读)当前加载的xml文件路径
xml.content (只读)当前xml文件的所有文本内容。当使用loadscene()方法加载一个场景后,该变量中的内容将仅为<scene>元素
xml.scene (只读)当使用loadscene()方法加载一个场景后,该变量存贮着当前场景的名称
xml.view (只读)保存当前xml或scene中<view>元素的一个备份。例如能够经过 xml.view.hlookat 来获取原始的 view.hlookat
network.viewerpath krpano渲染器路径
network.htmlpath html路径
network.firstxmlpath 首次加载xml路径
network.currentxmlpath 当前xml路径
//例如 if(xml.view.fov !== null, ...);
debugmode false 为true时显示调试跟踪 trace() 信息
showerrors true 当有错误发生时自动显示错误信息窗口
lasterror (只读) 用于在 onloaderror 事件中获取最近一次的出错信息。
haveexternalinterface true(只读)用来检测扩展接口功能是否有效。尤为是在使用 openurl()这个功能时,有必要使用该变量判断一下环境是否支持扩展接口。
浏览在网络服务器上的全景时该变量始终为true(扩展接口始终有效),可是在本地的Flash模式下,只有在浏览器打开本地受信任文件夹中的Flash SWF文件,扩展接口才会有效。关于受信任文件夹管理,能够在Flasyplayer安全选项中进行。
havenetworkaccess true (只读)该变量用来检查网络访问是否有效。这能够用来避免错误的发生,如在使用谷歌地图或必应地图时,如若没有网络,就会发生未知错误。
浏览在网络服务器上的全景时该变量始终为true(网络访问始终有效),可是在本地的Flash模式下,只有在浏览器打开本地受信任文件夹中的Flash SWF文件,网络访问才会有效。
关于受信任文件夹管理,能够在Flasyplayer安全选项中进行。
image.layer 仅as3用法)pano image layer 的 Actionscript 3 Sprite 对象
layer.enabled / plugin.enabled true 启用全部图层或插件
layer.visible / plugin.visible true 让全部图层或插件可见或不可见(也支持HTML5)
layer.alpha / plugin.alpha 1.0 设置全部图层或插件的透明度
layer.layer / plugin.layer (仅as3用法)layer / plugin 的 Actionscript 3 Sprite 对象
hotspot.enabled true 启用全部热点
hotspot.visible true 让全部热点可见或不可见
hotspot.alpha 1.0 设置全部热点的透明度
hotspot.layer (仅as3用法)hotspot 的 Actionscript 3 Sprite 对象
定义一个变量或对象: def(variable, type, value*)
指定变量的类型
变量类型包括:
boolean - true 或者 false number - 数字类型(含整数和小数) integer - 整数类型 string - 字符类型 object -包含属性的对象类型
该变量的初始值
当未附初始值而且变量已存在时,那么该变量的当前值将被转换成给定的类型
当未附初始值而且变量不存在时,那么默认的初始值自动为如下内容:
boolean=false
number=NaN(表示 Not a Number)
integer=0
string=null
对象类型不能指定初始值
def(b, boolean, true); def(n, number, 123.456); def(s, string, 'text'); def(obj, object); def(obj.x, number, 0.0); def(obj.y, number, 0.0);
赋值语句: set({variable},{value})
注意- 当这里为某个变量名称时,不会从该名称所表示变量自动取值,应该使用get(variable)来取变量值
set(plugin[{name}].{attribute},{value}); set (layer[skin_map].visible, true);
获取变量: `
get({variable}) 、 array[ get(variable) ] 、 <xmlelement attribute="get:variable" ... />`
获取给定变量的实际值
注意- 个别内置动做会自动获取参数中变量名对应的实际值,这时就无需使用 get() 语句。好比 add() sub() mul()等
set(dstvar, get(srcvar)); looktohotspot(get(name)); lookto(get(h), get(v), get(f)); showtext(get(msg)); tween(var,get(dstval)); set(pic, spot1); set(hotspot[get(pic)].visible, false); trace('xyz=', xyz, ' get(xyz)=', get(xyz)); txtadd(msg, 'fov=', get(view.fov));
计算语句:
calc(variable, expression) action( calc(expression), ... ) array[ calc(expression) ] <xmlelement attribute="calc:expression" ... />
expression:数学或逻辑表达式
set(y_new, calc(y_old - offset1 + offset2)); set(animationtime, calc('%1' == 'instant' ? 0.0 : 0.5)); <layer url="calc:'%CURRENTXML%/skin/' + settings.image1" />
变量复制: copy(destination, source)==set(destination, get(source) )
将原变量(source)中的值复制到目标变量(destination)中
当两个变量类类型不一样时,原变量的值将被转换成目标变量的类型
copy()动做的同效语句为 set(destination, get(source));
copy(dstvar, srcvar); copy(cur_hlookat, view.hlookat); copy(layer[text].x, mouse.x); copy(layer[text].y, mouse.y);
变量移除: delete(variable,...)
充许同时移除多个变量,变量之间使用逗号(,)分开便可
set(tmp1, ...); set(tmp2, ...); ... do something ... delete(tmp1, tmp2);
判断语句: if(condition, then-actions, else-actions*)
条件成立时执行相应 then语句,不然执行 else语句
if(fullscreen, fullscreensetup(), windowsetup() ); if(fullscreen, set(layer[controls].visible, false) ); if(i LT 10, loop(next) ); if(var === null, set(var,0)); if(hotspot[spot1] === null, trace(there is no spot1 hotspot)); if((varA GT 5) AND (varA LT 10), trace('varA is between 5 and 10') ); if(varA AND varB AND varC, trace('all vars are true') ); if(var1 GT var2, trace('condition is true'); lookto(100,20,50); , trace('condition is false'); lookto(0,0,100); ); if(a*2+b GT (c+3)*1.5 OR teststring == '123', ...);
反向判断:ifnot(condition, then-actions, else-actions*)
逻辑上与 if 相反,用法相同。
延时调用: delayedcall(delay , actions) / delayedcall(id, delay, actions)
给定的时间后调用或执行指定的动做,为该动做指定一个惟一的标识 ID ,这样一来,就能够经过 stopdelayedcall(id) 来取消该延时动做的执行
delayedcall(5.0, hidelogo() ); delayedcall(id1,5.0, hidelogo() ); //id用于其余动做控制该delayedcall delayedcall(10, looktohotspot(spot1);loadpano(pano2.xml); );
移除延时回调:stopdelayedcall(id)
取消并中止指定id的延时动做
<events name="introimage_events" onnewpano="delayedcall(introimage, 5.0, hide_introimage() );" onremovepano="stopdelayedcall(introimage);" />
在某个actions后执行:nexttick(actions)
在当前动做体(一个action元素结点内的动做集)执行完成后当即执行指定的动做
//执行如下动做会先显示"测试nexttick" <action name="nexttick_test"> showlog(); nexttick(trace("这是nexttic中k的动做!"); trace("测试nexttick"); </action>
在condition为真时执行指定actions:callwhen(condition, actions)
当表达式(condition)值为 true 会执行指定的动做(actions)
若表达式的值此时不为 true ,那么该语句动做会一直等待,直到值为 true 并执行指定的动做
注意- 与 if() 语句主要不一样是,callwhen() 具备充许滞后特性,这里强调的是当表达式的值变为true时才执行且仅执行一次
callwhen(plugin[video].loaded, plugin[video].playvideo(...); ); callwhen(plugin[maps].loaded, plugin[maps].setcenter(...); );
循环语句:for(startactions, condition, nextactions, loopactions) //startactions循环前执行
首先执行起始动做(startactions),而后检查表达式(condition),若值为 true 则执行要循环的动做(loopactions),每执行一次循环动做就执行一次步进动做(nextactions),而后再检查表达式的值,若为 true 则继续执行循环动做…直到表达式为 false 时终止循环
for(set(i,0), i LT 10, inc(i), trace('i=',i) );. for(set(i,0), i LT layer.count, inc(i), trace('layer[',i,'].name=',layer[get(i)].name); );
持续循环:loop(condition, loopactions)
asyncloop(condition, loopactions, doneactions*)
只要表达式(condition)值为 true 则一直执行循环动做(loopactions)
对于 loop() 语句,只有当循环体执行结束后才会执行后续的其它动做;而 asyncloop() 则是在循环期间继续其它事件和动做,只是在当表达式为 true 时就每帧执行一次循环动做(loopactions),asyncloop() 循环结束后还能够执行可选的完成动做(doneactions)
ondown="asyncloop(pressed, layer[scrollarea].scrollby(+2,0) );" onover="asyncloop(hovering, updatemousepos(), hideinfo() );" asyncloop(true, framehandler() );
定时器:setinterval(id, delay, actions) 、 clearinterval(id)
按给定的时间定时重复执行指定的动做
setinterval(time, 1.0, jsget(time, (new Date()).toLocaleTimeString(); ); trace('time=',time); ); <events onkeydown="setinterval(get(keycode), 0.1, trace(keycode); );" onkeyup="clearinterval(get(keycode));" />
切换:toggle(variable)
针对指定逻辑变量的值,在 true 和 false 之间切换
toggle(fullscreen); toggle(layer[button1].visible);
交替真假:switch({variable})、switch({variable},{valueA},{valueB})
转变变量的值
switch(fullscreen); switch(layer[button1].visible); switch(layer[button1].alpha, 1.0, 0.5); switch(layer[child].parent, button1, button2, button3); switch(destpos, -100, 0, +100); tween(y,get(destpos));
跳出、停止:break()
中断或中止当前的动做 ,当在 for()循环或 loop()循环中使用时,将仅中止循环自身
调用绑定:callwith(caller, actions)
可使用指定的 plugin/layer 或 hotspot 做为调用者,用于直接访问这些元素的属性或事件
该元素将做为调用者,只能使用 plugin/layer 或 hotspot 元素
任意动做语句,这些语句将在调用者的语境中执行,这意味着能够直接访问元素的属性和事件
//这里的onclick实际是指 layer[test].onclick(); callwith(layer[test], onclick); callwith(layer[test], trace('test pos=',x,'/',y); ); //其中的alpha是指layer[test].alpha callwith(layer[test], tween(alpha, 0.0); );
style属性复制:assignstyle(elementname, styles)
assignstyle(layer[test], 'teststyle'); assignstyle(layer[test], 'style1|style2');
将属性从一个或多个style元素的属性复制到目标元素。
属性克隆:copyattributes(destobject, srcobject)
将一个对象的全部属性从复制到另外一个。copyattributes(get(layer[test]), get(style[style1]));
从全部<events>
元素中执行指定的事件:events.dispatch(eventname, instantly*)
instantly一个布尔值设置(true或false,默认为false)。当设置为true时,事件将被调用并当即执行,当没有设置或设置为false时,事件将在当前的操做调用后被调用。
<events name="events1" myevent="trace(events1...);" /> <events name="events2" myevent="trace(events2...);" /> ... events.dispatch(myevent);
数学运算符
充许使用两到三个参数。
add(variable, valueA, valueB*) sub(variable, valueA, valueB*) mul(variable, valueA, valueB*) div(variable, valueA, valueB*) mod(variable, valueA, valueB*) pow(variable, valueA, valueB*)
add(dst,val1) 等效于 dst = dst + val1 sub(dst,val1) 等效于 dst = dst - val1 mul(dst,val1) 等效于 dst = dst * val1 div(dst,val1) 等效于 dst = dst / val1 mod(dst,val1) 等效于 dst = dst % val1 pow(dst,val1) 等效于 dst = dst ^ val1
add(dst,val1,val2) 等效于 dst = val1 + val2 sub(dst,val1,val2) 等效于 dst = val1 - val2 mul(dst,val1,val2) 等效于 dst = val1 * val2 div(dst,val1,val2) 等效于 dst = val1 / val2 mod(dst,val1,val2) 等效于 dst = val1 % val2 pow(dst,val1,val2) 等效于 dst = val1 ^ val2
提示-var1与var2能够是具体的值也但是变量,当为变量时,会自动使用它们的真实值
set(val, 1); add(val, 1); trace('val should be 2: val=',val); mul(doublewidth, width, 2.0); mul(scale, 0.5); div(result, vala, valb); add(dst,rotate,360); tween(rotate,get(dst),5); add(xpos, mouse.x, mouse_x_offset); sub(destx, stagewidth, destwidth); div(aspect,16,9); mod(cur_hlookat,cur_hlookat,360); pow(sqrt,val,0.5);
自增长: inc(variable, byvalue*, max*, min*)
自减小: dec(variable, byvalue*, min*, max*)
指定的变量
每次增长或减小的量,若是无该参数,指定的量将被增长或减少 1
限定指定变量的最大值和最小值
当指定的变量达到其中一个限制时,该变量将被设置为另外一个限制的值。这能够用来让指定的变量落在必定的范围或夹限在特定区域(使用 min=max)
inc(i); inc(frame,1,get(lastframe),0); inc(ypos,30); inc(view.hlookat, 2, 90, -90);
限定:clamp(variable, min, max)
限制变量的值在给定的最小和最大之间的值。
欲被裁剪的变量
最小值 - 当指定的变量小于该值时,将被设置与该值相同
最大值 - 当指定的变量大于该值时,将被设置与该值相同
clamp(percent, 0, 100); screentolayer(bar, mouse.stagex,mouse.stagey, lx,ly); div(fill, lx, layer[bar].pixelwidth); mul(fill, 100); clamp(fill, 0, 100); txtadd(layer[barfill].width, get(fill), '%');
数学函数:Math.*
Math对象提供一些用于数学运算的常量和动做;
大部份 Math 动做都有两种使用方式:一是只提供一个变量做为参数,此时该参数便是运算对象,同时又是运算后结果的存贮变量;二是提供两个参数,前一个用于存贮结果,后一个为运算对象。
数字取值(四舍五入):roundval(variable, decimalplaces*)
//decimalplaces保留小位点位数,无此参数时表示不保留小数位(取整)
roundval(val); roundval(val,2); copy(cur_hlookat,view.hlookat); mod(cur_hlookat,360); roundval(cur_hlookat,2); copy(cur_vlookat,view.vlookat); roundval(cur_vlookat,2); txtadd(msg,'looking at ',get(cur_hlookat),'/',get(cur_vlookat));
转16进制:tohex(variable, prefix*, length*)
将给定的变量转换为十六进制字符串 ,能够用来生成 html/css 的色值字串
给定的变量
前导字符(如 '0x' 或 '#')
返回值的长度
tohex(color,'#',6); set(color, ...an_external_integer_input...); tohex(color,'#',6); txtadd(layer[text1].css,'color:',get(color),';');
大小写转换:tolower(variable)
、toupper(variable)
字符拼接:txtadd(destination, txt1, txt2*, txt3*, ...)
若只有两个参数,则将第二个参数中的字符链接到目标变量(destination)的后面。多于两个参数时,则是将从每二个参数开始的全部参数依次链接在一块儿,并存贮到目标变量中
用于存贮链接结果的目标变量
该变量不存在时将被自动建立
将被链接到一块儿的字符串
当只有一个txt参数时,该txt将被直接链接到当前目标变量(destination)的尾部
若是使用变量做为txt参数,必定要用get()来获取该变量的实际值
txtadd(picfilename,'%CURRENTXML%/pic_',get(pic),'.jpg'); txtadd(crop,'0|',get(ypos),'|333|285'); txtadd(pname, 'thumbbar_image_', get(i)); txtadd(layer[text].html,'[p]',get(data[txt1].content),'[/p]'); txtadd(msg,get(view.fovtype),'=',get(fov),'°');
字符截取:subtxt(dstvar, srcvar, startpos, len)
用于存贮所提取子串的目标变量,若是该变量不存在则会被自动建立
来源字符串的变量
子串在源字符串中的起始位置
欲提取子串的长度
subtxt(newvar, abcdefg, 2, 3) ----> newvar==bcd, 第二个开始截取,截取3字符
字符串搜索:indexoftxt(index, txt, searchtxt, startindex*)
返回搜索字符(searchtxt)在字符串(txt)中的起始位置(index)
用于存贮返回值的变量,若返回 -1 则表示搜索字符串(searchtxt)不存在字符串(txt)中;若是该变量不存在则自动建立
源字符串
欲搜索的子字符串
指定从源字符串的搜索子串时的起始位置(默认为0)
字符串替换:txtreplace(var, searchtext, replacetext)、 txtreplace(dstvar, srcvar, searchtext, replacetext)
用字符串replacetext替换源字符串var/srcvar中的searchtext字符串
用于搜索的源字符串变量(var, srcvar)以及用于存贮返回结果的变量(var, dstvar)。若是该变量不存在则自动建立
将要被替换掉的旧字符串
欲替换旧字符串的新字符串
字符串分割:txtsplit(string, separator, resultingarray)、txtsplit(string, separator, var1, var2, ...)
欲分割的字符串,能够为实际的字符或字符串变量
分割标记字符
用于存贮分割结果的数组变量名,分割的字符逐个放个该数组成员的'value'属性中
Split into separate variables: txtsplit('1|2|3', '|', a, b, c); trace('a=',get(a), ' b=',get(b), ' c=',get(c)); Result: a=1 b=2 c=3 Split into an array: txtsplit('x|y|z', '|', arr); for(set(i,0), i LT arr.count, inc(i), trace('arr[',get(i),'].value=',arr[get(i)].value); ); Result: arr[0].value=x arr[1].value=y arr[2].value=z
转码:fromcharcode(var, charcode)
将一个Unicode字符编码值转换为字符并存入变量(var)中
用于存贮转换结果的变量
Unicode字符编码值
转义和反转义:escape(var)、escape(var, text)
、unescape(var)、unescape(var, text)
对字符串进行编码、解码
无 text 参数时 - 该变量自身将被编码或解码;
有 text 参数时 - 该变量将用来存贮 text 编码或解码后的字符
将被编码或解码的字符串
动画语句:tween(variable, value, time*, tweentype*, donecall*, updatecall*)
补间动做,经过动态改变指定变量值实现动画效果
颜色支持 当指定的变量名中含有'color'这个关键字时,那么它的值将自动解析为32位的ARGB色值而且单独处理每一个颜色通道
多变量支持 能够同时处理多个变量,这时要使用'|'来分隔这些变量(variable)、值(value)和被间动做类型(tweentype),当变量有多个,而只有一个值或补间类型时,那么全部变量将使用相同补间动做类型或被转变到相同的值,而且对于全部变量来讲,time、donecall以及updatecall也都是相同的
将被改变的变量
使用|字符来分隔多个变量
当变量名中含有关键字'color'时,变量值将被处理为32位的ARGB色值
变量的目标值
若值前面有'%'字符,将按百分比方式处理
使用|字符来分隔多个变量对应的不一样值
当使用变量来做为value参数时,需使用 get() 动做来获取变量的实际值
从当前值改变到目标值所需秒数(默认 0.5 秒)
还能够经过 distance() 语句来动态指定时间(不支持多变量补间),distance()的原理是经过设置指定值域变化的最大时间来动态设置本次补间所需的实际时间,这样一来,对于变化量小的补量则用时短;相反对于变化量大的补间则用时就长,主要是改善用户体验。
下面是 distance() 语句用法
#distance(dvalue,dtime) #dvalue - 值变化的区间 #dtime - 值在区间内变化完成须要时间
补间动做的插值计算类型(默认 easeOutQuad )
更多补间动做类型:tweentypes
当补间动做完成且指定变量已达到目标值时,执行本参数中的动做
除了常规动做,还能够在这里使用特殊关键字 WAIT ,在这种状况下,用户界面以及后续的动做将被阻止,直到指定变量达到目标的值
指定变量在每一次(每一帧)更新时,都会执行该参数中动做
警告- 谨慎使用!会增长系统负担拖慢帧速率
tween(view.vlookat, 90.0, 2.0); //视觉转为向上垂直90度,转换视觉过程为2秒 tween(layer[skin_scroll_layer].y, get(mh), 0.5, easeOutQuint, set(layer[skin_map].visible,false) ); //皮肤滚动条组件Y轴坐标改变到指定位置,转换坐标过程为0.5秒,转换模式为easeOutQuint,转换完成后执行set(layer[skin_map].visible,false)
中止动画:stoptween(variable, ...)
中止当前运行中的补间动做
当前正在对该变量进行补间操做的动做将被中止
将被中止补间的其它的变量
ondown="tween(layer[text].y, 10, distance(400,0.7), linear);" onup="stoptween(layer[text].y);"
动画类型tweentype:
加载新的全景
注意- 只有具有 keep=“true” 属性的图层、插件、热点、事件和光晕元素在新场景中才被保留
loadpano(xmlpath, vars*, flags*, blend*) loadscene(scenename, vars*, flags*, blend*) loadpanoscene(xmlpath, scenename, vars*, flags*, blend*) loadxml(xmlstring, vars*, flags*, blend*)
注意- 当选定的混合模式不被环境支持时(例如在Flashplayer下使用仅支持WebGL的模式),那么将自动回退到默认的混合方式(NOBLEND)
loadpano(pano2.xml); loadpano(pano2.xml, null, MERGE, BLEND(1)); loadscene(scene1); loadscene(scene1, null, MERGE, BLEND(1)); loadxml('<krpano><image><sphere url="pano.jpg"/></image></krpano>'); loadxml(get(data[xml].content), null, KEEPALL); loadpano('%SWFPATH%/pano.xml', null, MERGE, BLEND(2)); loadpano(sphere.xml, image.hfov=1.0&view.limitview=fullrange);
打开地址:openurl(url, target*)
待打开的url
_blank - 在新窗口中打开(默认)
_self - 在当前窗口的当前帧中打开
_parent - 在当前帧的父窗口中打开
_top - 在当前窗口的顶层帧中打开
Flash模式时要注意 - 该动做须要Flashplayer的扩展接口支持,它只在浏览器内部有效,当工做在离线或使用“file:“本地url浏览时就须要对Flashplayer进行安全设置
openurl('http://krpano.com',_self); openurl('help.html');
调用js网页跳转: js(eval(this.location="{url}"))
视图设置:lookat(h, v, fov*, distortion*, architectural*, pannini*)
观看全景的指定位置
pannini1)(可选) - pannini投影设置 -view.pannini
lookat(0,0); lookat(0,0,90); loadpano(pano.xml); lookat(45.1, -20.2, 110.0);
视图变化:
lookto(toH,toV,fov*,motiontype*,shortestway*,nonblocking*,donecall*) looktohotspot(hotspotname*, fov*, motiontype*, shortestway*) moveto(toH, toV, motiontype*) zoomto(fov, motiontype*)
将视图从当前位置移动给定的位置
注意- 在移动期间全部用户界面及其它动做都将被阻塞,这意味着其它动做只能在当前动做完成后才能执行。可使用 oninterrupt() 来充许用户中断该动做
例子
moveto(100.0,5,linear(10)); zoomto(130,smooth()); lookto(33,-22,30,smooth(100,50,20)); looktohotspot(hotspot1); looktohotspot(hotspot2, 40); looktohotspot(hotspot3, 25, smooth(100,50,20)); looktohotspot(get(name));
调整视图:adjusthlookat(desthlookat)
调整view.hlookat值
解决360度环绕中到达目标水平位置(desthlookat)的最短路径
为 0 时,能够从 view.hlookat 中获取正确的当前水平位置值:-180 到 +180
为任意 0到360 的值时,则会修正从当前位置到达该水平位置的最短运动方式
能够直接使用变量,会自动获取实际值
此时当前的view.hlookat会被调整到与该参数的邻近值(不改变当前视图)
//用途一:让读取的view.hlookat值正确落在 -180到+180 的范围内 adjusthlookat(0); trace(view.hlookat); //用途二:修正view.hlookat,以期经过最短路径方式移动到目标水平位置 adjusthlookat(140); tween(view.hlookat, 140);
得到球面距离:getlooktodistance(result, toH, toV, fromH*, fromV*)
获取球面坐标中两个位置之间的夹角度数(0到180度)
中止 lookto / looktohotspot / moveto / zoomto事件:stoplookto()
中止一个未阻塞的 lookto()/looktohotspot()/moeto()/zoomto()动做
中止用户操做:stopmovements()
当即中止用户触发的(经过鼠标、键盘或触控板)全部panning投影和缩放行为
等待:wait(parameter)
等待若干秒的时间或等待特定的事件(LOAD 或 BLEND)
注意- 用户界面及全部后续动做将被阻塞,这意味着后面的动做只能在当前动做完成以后才能获得执行。可使用 oninterrupt 以便让用户有中断能力
任意数字 - 等待的时间秒数
LOAD - 一直等待直到加载完成
BLEND - 一直等待直到混合效果处理完成
oninterrupt(break); lookto(150,30,70); wait(3); lookto(242,0,150); lookto(280,-10,50); wait(3); loadpano(pano2.xml,null,MERGE,BLEND(2)); lookat(100,50,5); wait(BLEND); lookto(100,50,150);
oninterrupt:oninterrupt(actions)
在处理一些会阻塞用户界面的动做以前(如 lookto()、looktohotspot()、moveto()、zoomto()、wait()以及使用WAIT做为donecall参数的tween()),使用该语句,用户就能够随时经过操控界面(如点击动做)来停止这些动做的执行,同时执行参数内容中的动做。
用户中断后要执行的命令
另外这里还有一个特殊的命令:
break - 仅中断当前动做(无其它附加命令)
## 坐标相关
屏幕坐标和球坐标之间的转换:screentosphere(x,y, h,v)、 spheretoscreen(h,v, x,y, stereoside*)
屏幕坐标与球面坐标之间的相互转换
针对分屏VR模式 - 定义哪一边的屏幕坐标,可能的设置有两种:l- 左屏;r- 右屏;或者不设置表示无分屏的普通坐标
x,y,h,v必须为变量名,不充许使用确切的数值
若是变量未定义,它将被自动建立screentosphere(mouse.x, mouse.y, toh, tov);
屏幕坐标和球坐标之间的转换,层的坐标:screentolayer(layer, screenx,screeny, layerx,layery)
、layertoscreen(layer, layerx,layery, screenx,screeny)
在真实屏幕与相对图层坐标之间转换
注意:
屏幕坐标系是从左上角 (x=0; y=0) 到右下角 (x=stagewidth; y=stateheight)
若是使能scalechildren,那么层坐标也会被缩放
不支持旋转的层
全部参数必须为变量,不充许使用常量
当变量不存在时,它将被建立
screentolayer(bar, mouse.stagex,mouse.stagey, lx,ly); div(fill, lx, layer[bar].pixelwidth); mul(fill, 100); clamp(fill, 0, 100); txtadd(layer[barfill].width, get(fill), '%');
remapfovtype:remapfovtype(fov, srcfovtype, dstfovtype)、 remapfovtype(fov, srcfovtype, dstfovtype, width, height)
就当前视域范围,从新计算出另外一种fovtype对应的新fov值
在改变fovtype及从新计算对应fov的过程当中,当前视域(镜头变焦)不会变化
将被改变的fov变量
返回的新值也将存贮在该变量中
当前的fovtype
能够是:HFOV,VFOV,DFOV或者MFOV
新的fovtype
能够是:HFOV,VFOV,DFOV或者MFOV
指定视图区域的宽度像素数
默认为当前视图尺寸
指定视图区域的高度像素数
默认为当前视图尺寸
set(view.fovtype, HFOV); set(view.fov, 90); ... set(view.fovtype, VFOV); remapfovtype(view.fov, HFOV, VFOV);
更新/重建pano对象的内部3D模型: updateobject(updateall*, updatefov*)
重建全景对象的3D模型
在浏览时动态改变display.details以及display.tessmode后必须使用这个语句以更新全景。当在交互方式更改image.hfov,image.vfov或者image.voffset这些设置时,应使用updatefov=true试调用该语句,以便获得更新后的全景对象
注意-该语句很消耗系统资源,请谨慎使用!
针对多重分辨率 - 是否更新全部层
可能的设置:true 或 false (默认为 false)
全景更新同时从新解析出新的image.hfov,image.vfov以及image.voffset
可能的设置:true 或 false (默认为 false)
set(image.hfov,1); updateobject(true,true);
屏幕重绘:updatescreen()
直接强制重绘当前屏幕内容
重绘屏幕,并重置idletime计数器:invalidatescreen()
直接强制重绘当前屏幕内容,并全重置idletime计数(无用户交互时间计数)
动态地建立和添加:
addlayer(name) addplugin(name) addhotspot(name) addlensflare(name, ath*, atv*)
动态建立一个新的图层、插件、热点或光晕
addlayer(button); addhotspot(newspot); addhotspot(polyspot); addlensflare(sun, 20, -60);
移除:
removelayer(name, removechildren*) removeplugin(name, removechildren*) removehotspot(name) removelensflare(name)
动态删除一个图层、插件、热点或光晕
layer/plugin/hotspot专属:
layer / plugin / hotspot[name].loadstyle(name) layer / plugin / hotspot[name].registercontentsize(imagewidth,imageheight) layer / plugin / hotspot[name].resetsize() layer / plugin / hotspot[name].updatepos() layer / plugin / hotspot[name].changeorigin(align,edge) layer / plugin / hotspot[name].getfullpath() hotspot[name].getcenter(ath,atv)
调用js函数:js( "Javascript函数(参数)" )
调用一个Javascript函数,在实际调用js代码以前,其中的参数将预先被krpano解析,记得要使用get(var)语句去获取变量的确切值
Flash模式时注意 - 该语句须要使用Flashplayer的扩展接口,它仅在浏览器内部且在线时有效,当离线浏览或本地url浏览,那么就须要设置Flashplayer的安全设置项
//如下是存在于js或 html文件中的Javascript代码 function test(p1, p2, p3) { alert(p1 + ": " + p2 + " / " + p3); } //全景项目中的调用代码 js( test('Lookat', get(view.hlookat), get(view.vlookat)) );
调用js代码:jscall( "...任意Javascript代码... ")
直接在全景中执行任何Javascript代码,能够在Javascript代码中直接读写krpano的js接口对象
Flash模式时注意 - 该语句须要使用Flashplayer的扩展接口,它仅在浏览器内部且在线时有效,当离线浏览或本地url浏览,那么就须要设置Flashplayer的安全设置项
//改变html元素的风格 jscall('document.getElementById("test").style.display="none";'); //使用calc()语句构建js语句并使用krpano变量 jscall(calc('console.log("krpano version: ' + version + '")')); //返回前一页面 jscall('history.back()');
获取一个Javascript变量的值或一个Javascript函数的返回值:jsget(variable, ...Javascript代码... )
获取Javascript变量或Javascript函数的值,能够在js代码读写krpano接口对象
用于存贮返回值的变量名
若是变量不存在则自动建立
Flash模式时注意 - 该语句须要使用Flashplayer的扩展接口,它仅在浏览器内部且在线时有效,当离线浏览或本地url浏览,那么就须要设置Flashplayer的安全设置项
//获得当前页面的地址 jsget(ret, 'location.href'); trace('地址为:', get(ret)); //让用户输入内容 jsget(passwort, 'prompt("请输入口令")'); if(password == 'hidden', ...); //获得当前日期(YYYY-MM-DD): jsget(date, 'new Date().toISOString().slice(0,10);'); trace('日期为:', get(date)); js网页跳转: js(eval(this.location="{url}")) 调用软窗口: js(openWindow({url},{width},{height},{name},{yes/no})); 调用搜索查询窗口: js(openWindow(search.html,290,330,搜索查询,no)); 提示窗口: js(alert({弹出窗口}));
是否显示输出日志:showlog(state*)
显示或隐藏日志信息
true - 显示日志信息(默认)
false - 隐藏日志信息
变量跟踪: debugvar(varname)
在输出日志中显示/跟踪关于变量的详细信息(值和类型),当变量是一个对象时,也将显示全部对象属性。
打印调试信息
debug(...) trace(...) warning(...) error(...)
将文本或变量输出到日志信息中
注意- 过多地输入跟踪信息会影响全景渲染效率,尤为不要在每一帧都有跟踪信息
trace('view.maxpixelzoom=', view.maxpixelzoom); <events onkeydown="trace('keycode=',keycode);" /> onresize="trace('size=',stagewidth,'x',stageheight);" onclick="trace('mouse clicked at ', mouse.x, ' / ', mouse.y);" trace('xyz=',xyz,' get(xyz)=',get(xyz));
显示一个错误消息,并阻止用户交互: fatalerror(errormessage)
待显示的错误信息
显示文字(废弃):showtext(text, textstyle*)
在屏幕上显示字符串内容
onhover="showtext(you are hovering me);" onhover="showtext(style text,TEXTSTYLE);" //样式调用 onhover="showtext(line 1[br]line 2[br]line 3);" //分行 onhover="showtext([b]bold[/b] [i]italic[/i]);" //字体
官方地址:https://krpano.com/docu/quick...
方法1.在html中可使用最大z-index:2147483647避免全屏下弹窗被覆盖问题(慎用)
方法2:将弹窗生成在全景容器内
预加载MP3文件:preloadsound({mp3});
playsound: playsound({voice},{mp3},*{Cycle},*{execution}); playsound2D: playsound2D({voice},{mp3},*{Volume},*{Track },*{Cycle},*{execution}); playsound3D: playsound3D({voice}, {mp3},{ath},{atv},*{range},*{Volume},*{Cycle},*{execution}); playsound3DHS: playsound3DHS({voice},{mp3},*{range},*{Volume },*{Cycle },*{execution});
暂停声音:pausesound({voice});
恢复声音:resumesound({voice});
暂停/恢复声音:pausesoundtoggle({voice});
中止声音:stopsound({voice});
中止全部声音:stopallsounds();
内部控制
播放视频: playvideo({video}); 关闭视频: closevideo(); 中止:stop(); 暂停: pause(); 播放:play(); 播放/中止:togglepause();
外部控制
播放视频:hotspot[{name}].playvideo({video}); 关闭视频:hotspot[{name}].closevideo(); 中止: hotspot[{name}].stop(); 暂停: hotspot[{name}].pause(); 播放: hotspot[{name}].play(); 播放/中止:hotspot[{name}].togglepause();
切换全屏:switch(fullscreen,true);
进入全屏:set(fullscreen,true);
退出全屏:set(fullscreen,false);
鼠标类型:
移动到:set(control.mousetype,moveto); 2D拖拽:set(control.mousetype,drag2d); 3D拖拽: set(control.mousetype,drag3d);
旋转缩放:
放大:set(fov_moveforce,-1); 缩小:set(fov_moveforce,1); 中止缩放:(fov_moveforce,0); 向左:set(hlookat_moveforce,-1); 向右:set(hlookat_moveforce,1); 中止左右:set(hlookat_moveforce,0); 向上: set(vlookat_moveforce,-1); 向下:set(vlookat_moveforce,1); 中止上下:set(vlookat_moveforce,0);
鼠标控制类型:control.mousetype
前一场景:_loadpano(%FIRSTXML%GigaMap/{scene_id}/scene.xml,MERGE,{blend})
后一场景: _loadscene(get(SSet.Next_Scene_ID));
场景调用:
loadpano(%FIRSTXML%scene/{scene_id}/scene.xml,MERGE,{blend}) loadpano(pano2.xml); loadpano(pano2.xml, null, MERGE, BLEND(1)); loadscene(scene1); loadscene(scene1, null, MERGE, BLEND(1)); loadxml('<krpano><image><sphere url="pano.jpg"/></image></krpano>'); loadxml(get(data[xml].content), null, KEEPALL); loadpano('%SWFPATH%/pano.xml', null, MERGE, BLEND(2)); loadpano(sphere.xml, image.hfov=1.0&view.limitview=fullrange);
矩阵地图调用: loadpano(%FIRSTXML%GigaMap/{scene_id}/scene.xml,MERGE,{blend})
JavaScript 调用 Krpano 对象
embedpano({ //省略其它不相关设置... id: "krpanoSWFObject", onready: krpanoReady }); function krpanoReady() { var krpano = document.getElementById('krpanoSWFObject'); var btn = document.getElementById('btn'); btn.onclick = function() { krpano.call("webvr.enterVR()"); //进入VR }; }
krpano 对象默认 ID 为krpanoSWFObject,不过为了肯定每次都能正常获取到,请在embedpano的onready函数中处理。
Krpano JavaScript 接口对象
set(variable, value) - 将指定数值赋值给指定 krpano 对象 get(variable) - 返回指定 krpano 变量的数值 call(action) - 调用和执行任意 krpano 动做代码 spheretoscreen(h, v) - 直接调用 spheretoscreen 动做 screentosphere(x ,y) - 直接调用 screentosphere 动做
Krpano 调用 JavaScript
jscall("任何JS代码") jscall("alert('11')") jscall("window.funName()") jsget(variable, "javascript code") //返回值所存储的krpano变量的名字,变量不存在则建立
js获取任何标签的属性
function Getinfo() { var krpano = document.getElementById("krpanoSWFObject"); var ath = krpano.get('hotspot[hotspot1].ath'); var atv = krpano.get('hotspot[hotspot1].atv'); alert("ath:" + ath+" atv:" + atv); } <hotspot name="hotspot1" url="http://www.new720.com/images/logo.png" onclick="js(Getinfo())" ath="0" atv="0" ondown="draghotspot();" />
Flash 注意事项
该动做须要 Flashplayer 的外部接口,这样在浏览器运行时才可用。本地或离线使用有file://的路径时,使用 Flashplayer 的本地/离线调用设置。
在xml中编写一个action,如:
<action name="layerinfo"> trace(%1); </action>
在页面中编写js脚本,如:
注意事项,embedpano中的ID名称和JS获取的ID名称要一致
<script type="text/javascript"> var krpano = document.getElementById("krpanoSWFObject"); krpano.call("layerinfo('New720.cn');"); </script>
方法一:
var krpano = document.getElementById(‘krpanoSWFObject’); krpano.set(“curscreen_x”, window.innerWidth / 2); krpano.set(“curscreen_y”, window.innerHeight/ 2); krpano.call(“screentosphere(curscreen_x, curscreen_y, curscreen_ath, curscreen_atv);”); ath = krpano.get(“curscreen_ath”); atv = krpano.get(“curscreen_atv”);
方法二:
var ath = krpano.view.hlookat; var atv = krpano.view.vlookat;
<krpano> <!-- include the videoplayer plugin --> <plugin name="video" url.flash="videoplayer.swf" url.html5="videoplayer.js" videourl="video.mp4|video.webm" /> <!-- define the pano image and refer to the videoplayer plugin --> <image> <sphere url="plugin:video" /> </image> </krpano>
方法:plugin[video].playvideo('video2.mp4|video2.webm');
具体使用方法参考官网:https://krpano.com/tools/
krpano提供了一个小而简单的接口开发本身的插件,插件能够是Flash(. swf),Javascript(js),xml(xml)插件。
官网地址:https://krpano.com/docu/plugi...
能够本身开发插件,这里只介绍官方的免费插件
在平常开发中,须要定制高级功能的时候建议按照插件来开发,每一个插件可单独配置、低耦合,在须要的时候引入文件便可,不对其余功能形成影响,如下是我的开发结构,为了减小请求数,经过构建工具自动监听文件变化,最终合并成一个主文件,上线也只须要此文件便可。
若是您有更好的方案或者其余想法也能够一块儿探讨。
首先须要导入插件<include url="plugins/combobox.xml" />
建立静态列表框:
<combobox name="box1" design="default" ...any layer settings...> <item name="item1" caption="Item 1" onclick="..." /> <item name="item2" caption="Item 2" onclick="..." /> <item name="item3" caption="Item 3" onclick="..." /> </combobox>
动态建立列表框:
<action name="test"> addComboboxLayer(box1, default); set(layer[box1].align, 'lefttop'); set(layer[box1].x, 20); set(layer[box1].y, 20); layer[box1].addItem('Item 1', trace(Item 1 clicked) ); layer[box1].addItem('Item 2', trace(Item 2 clicked) ); layer[box1].addItem('Item 3', trace(Item 3 clicked) ); </action>
大小位置:
属性/事件
design="default" 设计方案 selecteditemindex 选中项的索引(只读) onchange="" 选定项目改变时调用 item="" 包含的项目,数组格式,layer[cbname].item[itemname].*/layer[cbname].item.count item[itemname].caption 项目的标题文本 item[itemname].onclick 项目的点击事件
插件操做
addComboboxLayer(name, design*) 添加列表框(名字,设计方案) removeComboboxLayer(name) 移除 layer[name].addItem(caption, onclick) 添加项及对应事件 layer[name].addNamedItem(name, caption, onclick) 添加项,标题及对应事件 layer[name].selectItem(caption) 根据标题选择项 layer[name].selectItemByName(name) 根据name选择项 layer[name].removeAll() 移除全部项 layer[name].openList() 打开列表 layer[name].closeList() 关闭列表
自定义设计方案
经过 < combobox_design >元素定义,具备如下属性
margin="2" 边距 open_close_speed="0.25" 打开/关闭速度(秒)
内部包含三个style元素分别设置容器,遮罩及项目的样式
<combobox_design name="default" margin="2" open_close_speed="0.25"> <style name="combobox_container_style" bgalpha="1.0" bgcolor="0xFFFFFF" bgborder="1 0xFFFFFF 0.5" bgroundedge="1" bgshadow="0 1 3 0x000000 1.0" /> <style name="combobox_marker_style" css="color:#FFFFFF;" bg="false" txtshadow="0 0 2 0x000000 1" /> <style name="combobox_item_style" css="color:#222222;" padding="4 4" bg="false" bgcolor="0xC7E4FC" bgalpha="1.0" bgroundedge="1" txtshadow="0 0 1 0xFFFFFF 1.0" /> </combobox_design>
官方文档:https://krpano.com/plugins/co...
layer:
<layer name="video" url.flash="videoplayer.swf" url.html5="videoplayer.js" videourl="video.m4v|video.webm" posterurl="videoposter.jpg" align="center" x="0" y="0" pausedonstart="false" loop="false" volume="1.0" onvideoready="" onvideoplay="" onvideopaused="" onvideocomplete="" onerror="" />
3 d-distorted热点:
<hotspot name="video" url.flash="videoplayer.swf" url.html5="videoplayer.js" videourl="video.m4v|video.webm" posterurl="videoposter.jpg" ath="0.0" atv="0.0" distorted="true" scale="1.0" rx="0.0" ry="0.0" rz="0.0" pausedonstart="false" loop="false" volume="1.0" directionalsound="true" range="90.0" rangefalloff="1.0" outofrangevolume="0.0" onvideoready="" onvideoplay="" onvideopaused="" onvideocomplete="" onerror="" />
全景图像:
<plugin name="video" url.flash="videoplayer.swf" url.html5="videoplayer.js" videourl="video.m4v|video.webm" posterurl="videoposter.jpg" panovideo="true" pausedonstart="false" loop="false" volume="1.0" onvideoready="" onvideoplay="" onvideopaused="" onvideocomplete="" onerror="" /> <image hfov="360" vfov="180"> <sphere url="plugin:video" /> </image>
属性:
`videourl:`视频地址,通常就是MP4+webm,优先从左到右,可用preferredformat调整(MPEG4 / H264 (。 mp4,。 m4v。mov)- flash播放器/ Firefox(Windows 7 +)/ Safari和Chrome / IE Android / iOS / WebM (.webm)——Firefox和Chrome Ogg Theora (。 ogg,.ogv)- Firefox和Chrome Flash视频 (。 flv,.f4v)——flash播放器 RTMP视频流 ( rtmp:/ / url)- flash播放器 HTTP流媒体直播 (。 m3u,.m3u8)——iOS,Mac Safari只——并且只有<层>用法,不是由于帕诺人——由于这个视频 iOS错误 !) posterurl(html5):封面,默认第一帧 panovideo (use_as_videopano 老版):false是否用做全景视频 pausedonstart:false在一开始是否暂停 loop:false循环 volume:音量 0.0-1.0 muted(html5):静音 playbackrate(html5):1.0回放速度 directionalsound(flash):3d声音音效 range(flash):90.0 rangefalloff (flash):1.0 outofrangevolume(flash):0.0 preferredformat(html5):格式优先 autopause(html5) :true自动暂停视频当浏览器选项卡/窗口被隐藏 autoresume(html5):false自动恢复视频的时候停顿了一下,而后经过隐藏浏览器选项卡/窗口 html5controls(html5):false当启用(设置为true),显示浏览器内置的视频控件。 html5preload(html5):auto预加载 buffertime(falsh):0.1视频应该在开始以前加载/缓冲的时间 ignoremetadata(flash):false playsinline(html5):true在移动设备上播放视频内联krpano(iPhone、iPad、Android)。当禁用,那么浏览器就能够最终在本身内部的放像机播放视频 iphoneworkarounds(html5):true使工做区为iPhone视频支持(iOS版本iOS前10)。 touchworkarounds(html5):true使播放经过触摸手机和平板设备的解决方案
事件:
onvideoready:准备就绪 onvideoplay:播放 onvideopaused:暂停 onvideocomplete:播放完成 onerror:错误 onneedtouch:须要触摸 ongottouch:触摸时
状态(只读):
isvideoready ispaused isseeking iscomplete isautopaused needtouch videoerror time totaltime videowidth videoheight loadedbytes totalbytes
操做:
playvideo(url, posterurl, pausedonstart, starttime) play() pause() togglepause() stop() seek(time)
官网:https://krpano.com/plugins/vi...
<layer name="scrollarea" url="scrollarea.swf" alturl="scrollarea.js" parent="..." align="..." width="..." height="..." direction="all" //方向h/v/all draggable="true" //容许拖动 mwheel="true" //鼠标滚动 onhover_autoscrolling="false" //hover自动滚动 overscroll="1.0" //滚动超出 friction="0.95" //摩擦 acceleration="0.08" //运动加速度 returnacceleration="0.15" //回弹 momentum="0.06" //动力加速度 onscroll="" //滚动回调 />
只读属性:
loverflow (只读) loverflow =左溢 roverflow (只读) roverflow =对溢出 toverflow (只读) toverflow =顶部溢出 boverflow (只读) boverflow =底部溢出 woverflow (只读) woverflow =总宽度溢出 hoverflow (只读) hoverflow =总高度溢出
事件
onscroll //滚动
setcenter(x,y) //设置中心
scrolltocenter(x,y) //滚动到中心
scrollby(dx,dy) //设置滚动速度向量
stopscrolling() //中止滚动
官方文档:https://krpano.com/plugins/sc...
使用手机/平板电脑设备的陀螺仪和加速度传感器来控制全景查看方向,相比旧版(gyro插件),此版本更快,相应更及时、准确、流畅,建议使用新版。
支持:
ios,android,windows phone只要设备自己有硬件支持均可以使用
用法:
<plugin name="gyro" devices="html5" keep="true" url="gyro2.js" //引入插件 enabled="false" //是否启用陀螺仪 camroll="true" //根据设备旋转调整观看位置 friction="0.0" 0.0-0.99或者auto 摩擦力,auto和zoom/fov/frame-rate有关 touch_mode="full" off(关闭)/horizontaloffset(横向)/full(所有)/disablegyro(),触摸方式 sensor_mode="1" 传感器类型 softstart="0.5" 启用陀螺时,方向改变的时间,为0将当即使用gyro-tracked值 autocalibration="false" 自动校准陀螺仪 onavailable="" onunavailable="" onenable="" ondisable="" />
属性:sensor_mode:
传感器类型
状态isavailable="false"
设备是否支持陀螺仪
事件
onavailable: 在支持陀螺仪的设备上调用 onunavailable:在不支持陀螺仪的设备上调用 onenable: 在陀螺仪启用的时候调用 ondisable: 在陀螺仪禁用的时候调用
操做resetSensor(hlookat, vlookat*):重置陀螺仪方向
本插件做为tween方法的参数使用。
Ease Out and In:
Ease In and Out:
<plugin url.html5="moretweentypes.js" url.flash="moretweentypes.swf" preload="true" />
button(可选)
padding_top(可选)
padding_bottom(可选)
width_margin(可选)
grid_bgcolor(可选)
grid_bgalpha(可选)
display_title(可选)
grid_title(可选)
grid_title_css(可选)
group(可选)
current(可选)
cat_container_height(可选)
cat_container_border(可选)
cat_container_title_css(可选)
cat_container_title_align(可选)
cat_container_border_height(可选)
display_cat_desc(可选)
cat_desc_css(可选)
thumbs_crop(可选)
thumbs_width(可选)
thumbs_height(可选)
thumbs_padding(可选)
thumbs_scale (可选)
active_thumb_border(可选)
display_thumb_title(可选)
thumb_title_align(可选)
thumb_title_x(可选)
thumb_title_y(可选)
thumb_title_css(可选)
thumb_title_roundedge(可选)
thumb_title_background(可选)
thumb_title_backgroundcolor(可选)
thumb_title_backgroundalpha(可选)
thumb_title_border(可选)
thumb_title_borderwidth(可选)
thumb_title_bordercolor(可选)
thumb_title_borderalpha(可选)
thumb_title_padding(可选)
display_thumb_desc(可选)
thumb_desc_css(可选)
thumb_desc_bg_color(可选)
thumb_desc_bg_alpha(可选)
thumb_desc_padding(可选)
loadscene_flags(可选)
loadscene_blend(可选)
vcenter(可选)
rg_show_thumbs_grid(true/false)
:显示或隐藏网格菜单
能够选择不使用默认按钮,或者用下面代码来覆盖
<layer name="thumbs_button" url="gridbut.png" keep="true" align="bottom" onclick="rg_show_thumbs_grid(true);" crop="0|0|45|45" y="15" zorder="101"/>
<!-- skin_setting 自定义元素,默认皮肤的参数设置--> maps="false" <!-- 是否使用必应地图或谷歌地图 --> maps_type="bing" <!-- 选择使用谷歌地图或必应地图 --> maps_bing_api_key="" <!-- 必应地图所需的API密钥,需申请 --> maps_google_api_key="" <!-- 谷歌地图所需的API密钥,需申请 --> maps_zoombuttons="false" <!-- 是否在地图上显示缩放按钮 --> gyro="true" <!-- 是否使用陀螺仪 --> webvr="true" <!-- 是否启用VR --> webvr_gyro_keeplookingdirection="false" <!-- 进入陀螺仪或VR时是否保持观看方向 --> webvr_prev_next_hotspots="true" <!-- 在VR下是否启用导航到先后场景的连接热点--> littleplanetintro="false" <!-- 是否使用小行星开场 --> title="true" <!-- 是否左下角显示title --> thumbs="true" <!-- 是否使用缩略图,如不使用,则没有缩略图一栏 --> thumbs_width="120" thumbs_height="80" thumbs_padding="10" thumbs_crop="0|40|240|160" <!-- 缩略图宽度、高度、间距以及缩略图裁切范围 --> thumbs_opened="false" <!-- 是否在启动时弹出缩略图一栏 --> thumbs_text="false" <!-- 是否在缩略图上显示名字 --> thumbs_dragging="true" <!-- 是否容许鼠标拖拽缩略图区域 --> thumbs_onhoverscrolling="false" <!-- 是否容许鼠标悬停缩略图自动滚动 --> thumbs_scrollbuttons="false" <!-- 是否显示缩略图滚动按钮 --> thumbs_scrollindicator="false" <!-- 是否显示缩略图滚动条 --> thumbs_loop="false" <!-- 滚动按钮是否使用缩略图循环 --> tooltips_buttons="false" <!-- 鼠标在按钮悬停时是否弹出文字提示 --> tooltips_thumbs="false" <!-- 鼠标在缩略图悬停时是否弹出文字提示 --> tooltips_hotspots="false" <!-- 鼠标在热点上悬停时是否弹出文字提示 --> tooltips_mapspots="false" <!-- 鼠标在地图热点悬停时是否弹出文字提示 --> deeplinking="false" <!-- 是否使用深度连接获取功能,可以使得当前页面路径获取场景及视角信息 --> loadscene_flags="MERGE" <!-- 缩略图切换场景时的变量 --> loadscene_blend="OPENBLEND(0.5, 0.0, 0.75, 0.05, linear)" <!-- 缩略图切换场景时的融合 --> loadscene_blend_prev="SLIDEBLEND(0.5, 180, 0.75, linear)" <!-- 缩略图切换到上一个场景时的融合 --> loadscene_blend_next="SLIDEBLEND(0.5, 0, 0.75, linear)" <!-- 缩略图切换到下一个场景时的融合 --> loadingtext="载入中..." <!-- 在全景图载入中时显示的文字 --> layout_width="100%" <!--导航条容器相对屏幕宽度的百分比 --> layout_maxwidth="814" <!--导航条容器的最大宽度像素 --> controlbar_width="-24" <!--导航条背景的宽度像素 --> controlbar_height="40" <!--导航条背景的高度像素 --> controlbar_offset.normal="20" <!--导航条背景与屏幕底部的距离--> controlbar_offset_closed="-40" <!--导航条隐藏状态时与屏幕底部的距离--> controlbar_overlap.no-fractionalscaling="10" <!--在不支持分级缩放页面和设置像素比的设备的导航条重叠的像素--> controlbar_overlap.fractionalscaling="0" <!--支持分级缩放页面和设置像素比的设备的导航条重叠的像素--> design_skin_images="vtourskin.png" <!--皮肤所用的源图片--> design_bgcolor="0x000000" <!--皮肤的背景颜色--> design_bgalpha="0.5" <!--皮肤的透明度--> design_bgborder="0 0xFFFFFF 1.0" <!--皮肤的边框--> design_bgroundedge="1" <!--皮肤边框圆角设置--> design_bgshadow="0 0 9 0xFFFFFF 0.5" <!--皮肤的背景阴影--> design_thumbborder_bgborder="4 0xFFFFFF 1.0" <!--皮肤的缩略图边框--> design_thumbborder_padding="2" <!--皮肤缩略图边框间距--> design_thumbborder_bgroundedge="5" <!--皮肤缩略图边框的圆角--> design_text_css="color:#FFFFFF; font-family:Arial; font-weight:bold;"<!--皮肤文字样式--> design_text_shadow="1" <!--皮肤的文字阴影--> <!-- 若是你要更改皮肤样式,你能够改变上面的skin_settings数值,或者选择性地include下面一个预设的设计,能够经过移除特定include元素的if属性或者在html文件的embedpano()中增长initvar:{design:’flat_light’}。 --> <include url="skin/vtourskin_design_glass.xml" if="design === 'glass'" /> <include url="skin/vtourskin_design_flat.xml" if="design === 'flat'" /> <include url="skin/vtourskin_design_flat_light.xml" if="design === 'flat_light'" /> <include url="skin/vtourskin_design_ultra_light.xml" if="design === 'ultra_light'" /> <include url="skin/vtourskin_design_117.xml" if="design === '117'" />