导言
截止于krpano 1.18.4,krpano的官方环物droplet工具仅支持flash下的多层分辨率环物漫游(MAKE OBJECT droplet.bat),但由于HTML5的需求在手机端的存在,用户需要有支持HTML5的环物全景展示,因此为大家分享一个简单的HTML5环物。当然,这个HTML5的案例比较简单,仅支持简单的单分辨率画面缩放和水平360度环物。大家可以先在下面的地址下载范例,结合本文的中文注释进行学习。
HTML5环物在线演示
HTML5环物源码(含注释)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 |
<!-- 用krpano的onstart属性执行buildframe,该action有两个参数,第一个参数是图像序列所在的路径,第二个参数是图像总数 --> <krpano version="1.0.8.15" onstart="buildframes(%CURRENTXML%/objects/toyota-avalon/,36);"> <!-- 在改变浏览器窗口大小时和缩放环物全景时执行的两个action,实际上最终都是为了保证环物图片的尺寸在改变窗口大小(onresize)和缩放全景(onviewchange)时保持恰当的比例 --> <events onresize="updateframes()" onviewchange="updateframesscale()" /> <!-- 名为frame的style,是针对36个图像plugins要载入的style,可以看到关键的onloaded中执行了updateframesize的action,同时ondown中的domouserotate是实现鼠标拖拽图像实现环物图片切换的关键action --> <style name="frame" keep="true" visible="false" align="center" onloaded="updateframesize(get(name));set(plugin[loadingtext].visible,false);" ondown="copy(oldmousex,mouse.x);domouserotate();" /> <!-- 图片载入中的文字显示,主要是为了安慰用户焦躁的心,这里也可以运用动态热点的方式。或者你直接简单修改html属性中的loading,将其改为载入中 --> <plugin name="loadingtext" url="plugins/textfield.swf" keep="true" zorder="100" visible="true" enabled="false" preload="true" align="center" autoheight="true" width="100" background="false" html="[p]Loading...[/p]" css="p {color:#FFFFFF; font-family:arial; font-size:16px }" /> <!-- 设置左右两侧的按钮,用户也可以通过点击按钮来实现环物浏览效果,这个按钮位于右侧,主要功能由ondown中的dorotate实现。使环物逆时针旋转 --> <layer name="gallerynext" url="gallerybtns.png" keep="true" align="right" x="0" y="0" zorder="100" crop="100|0|100|100" onovercrop="100|100|100|100" ondowncrop="100|100|100|100" ondown="set(y,1);dorotate();" onup="set(y,0)" direction="-1" /> <!-- 左侧的按钮,使得环物顺时针旋转 --> <layer name="galleryprev" url="gallerybtns.png" keep="true" align="left" x="0" y="0" zorder="100" crop="0|0|100|100" onovercrop="0|100|100|100" ondowncrop="0|100|100|100" ondown="set(y,1);dorotate();" onup="set(y,0)" direction="1" /> <!-- 这个action就是在krpano的onstart中要执行的,它有两个参数,第一个是路径的前半部分,第二个是图像总数,for是循环36次建立36个图像layer,loadstyle为之前提到的名为frame的style,之后设定全局变量currentframe,也就是当前所在的图像,framecount为图像总数,oldmousex为鼠标的旧位置,这样可以通过新旧两个X坐标的对比,实现图像的切换,在执行完这些action之后,就是跳到showframe,这里第一个参数是0,因为不是要执行下一张或上一张图像,是要显示第一张图片,而krpano的序号都是从0开始 --> <action name="buildframes"> for(set(i,0), i LT %2, inc(i), txtadd(fname,frame,get(i)); txtadd(furl,%1,get(i),.jpg); addplugin(get(fname)); plugin[get(fname)].loadstyle(frame); copy(plugin[get(fname)].url,furl); ); set(currentframe,0); set(framecount,%2); set(oldmousex,0); showframe(0); </action> <!-- 图像的源宽度和高度与当前窗口的宽度与高度进行比较,让图像的宽高度始终适应窗口改变,保持环物图片与窗口大小的相对比例 --> <action name="updateframesize"> if(plugin[%1].imagewidth GT stagewidth, set(plugin[%1].width,100%); set(plugin[%1].height,prop); , if(plugin[%1].imageheight GT stageheight, set(plugin[%1].width,prop); set(plugin[%1].height,100%); , plugin[%1].resetsize(); ); ); </action> <!-- 鼠标滚轮缩放视角时,对36个图像进行统一的缩放操作 --> <action name="updateframesscale"> for(set(i,0), i LT framecount, inc(i), txtadd(fname,frame,get(i)); sub(temp,180,view.fov); div(newscale,temp,70); copy(plugin[get(fname)].scale,newscale); ); </action> <!-- 这个action是一个36次的循环,执行updateframesize,也就是浏览器窗口大小改变是相关的action --> <action name="updateframes"> for(set(i,0), i LT framecount, inc(i), txtadd(fname,frame,get(i)); updateframesize(get(fname)); ); </action> <!-- 决定显示哪一张图像的action,这里实际上%1只有三种可能的值,一个是0,这个也就是环物一开始载入时会遇到,另外两个分别是-1和1,分别是控制下一个和上一个图像。fname是当前图像plugin的名字,tempstr的目的就是为了隐藏上一个图像,两个if分别限定currentframe在0与35之间。最后ifnot控制图像完全载入之前的载入中文字显示--> <action name="showframe"> txtadd(fname,frame,get(currentframe)); txtadd(tempstr,'set(plugin[',get(fname),'].visible,false);'); ifnot(%1 == 0, delayedcall(0.03,get(tempstr)); ); add(currentframe,%1); if(currentframe LT 0, sub(currentframe,framecount,1); ); if(currentframe == framecount, set(currentframe,0); ); txtadd(fname,frame,get(currentframe)); set(plugin[get(fname)].visible,true); ifnot(plugin[get(fname)].loaded, set(plugin[loadingtext].visible,true);, set(plugin[loadingtext].visible,false); ); </action> <!-- 左右两侧按钮按下pressed执行showframe,通过送入-1或者1控制环物是显示上一张还是下一张图像,也就是顺时针还是逆时针旋转。--> <action name="dorotate"> if(pressed, showframe(get(direction)); delayedcall(0.05,dorotate();); ); </action> <!-- 鼠标拖放控制,通过比较新旧鼠标的X值来判断显示上一张还是下一张图像 --> <action name="domouserotate"> if(pressed, sub(temp,oldmousex,mouse.x); if(temp GT 0, set(temp,1); ); if(temp LT 0, set(temp,-1); ); showframe(get(temp)); copy(oldmousex,mouse.x); delayedcall(0.03,domouserotate();); ); </action> <!-- 开始自动旋转 - set(objautorot,true); doautorotate(); 停止自动旋转 - set(objautorot,false);--> <action name="doautorotate"> if(objautorot, showframe(-1); delayedcall(0.1,doautorotate();); ); </action> </krpano> |
在 “移花接木(31) – 支持HTML5的krpano环物全景” 上有 1 条评论