更新于 2020.11.19 krpano 1.20.9
本案例实现了在场景中插入大段文字,使其在特定区域滚动显示,可用鼠标可用滑条。
本案例在下载包的位置是:
1.18.5\krpano-1.18.5\examples\xml-usage\scrollingtextfield
我们只需要将下面的代码放进xml内即可。中文为代码的解释。如果是scene外面的话,要给textfield这个layer加上keep=”true”
点击代码窗口最右侧按钮,在新窗口打开后复制代码
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 <!-- 文本域,整个文本域的父元素textfield,包括了针对该文本域的位置和尺寸,通过align、x、y以及width、height进行修改。scale9grid属性能够使得图片边缘区域不被缩放,这样看起来背景会更加锐利。当然你可以不用这种带图片的做父元素,可以直接使用container,这样加载速度会大大加快。 --><layer name="textfield" url="textfield.png" align="center" x="0" y="0" width="50%" height="300" scale9grid="6|6|268|188"><!-- 滚动文字部分,基本的三大部分,一个是scrollarea插件必须要有的父元素,也就是textmask,它是一个容器container,width和height采用了负值,则是以父元素的尺寸加上该负值后的最终结果,也就是父元素的宽度减去30像素作为textmask的宽度,父元素高度减去10像素作为textmask的高度,同时maskchildren="true"也保证了文字滚动时不会超出遮罩区域。 --><layer name="textmask" type="container" align="lefttop" x="5" y="5" width="-30" height="-10" maskchildren="true"><!-- scrollarea插件。因为是垂直方向,所以direction="v",onscroll事件下的动作确保滚动区域的正确位置。 --><layer name="textscroller" url="%SWFPATH%/plugins/scrollarea.swf" alturl="%SWFPATH%/plugins/scrollarea.js" mwheel="true" direction="v" overscroll="0" align="lefttop" width="100%" height="100%" onscroll="if(hoverflow GT 0, div(yp,toverflow,hoverflow);Math.min(yp,1);Math.max(yp,0); copy(th,layer[scrollbar].pixelheight);sub(th,layer[scrollup].pixelheight);sub(th,layer[scrolldown].pixelheight);sub(th,layer[scrollslider].pixelheight); mul(yp,th);add(yp,layer[scrollup].pixelheight); copy(layer[scrollslider].y,yp); );"><!-- textfield插件。文本部分,文本内容有HTML属性决定。css属性确定字体样式。通过autoheight属性自动确定文本所占据的高度,同时将这个高度将调整尺寸时赋予textscroller。 --><layer name="text" url="%SWFPATH%/plugins/textfield.swf" align="lefttop" x="0" y="0" width="100%" autoheight="true" background="false" border="false" onautosized="copy(layer[textscroller].height, height);"padding="10 15"html="data:testtext"css="color:#000000; font-family:Arial; font-size:12px;"/></layer></layer><!-- 滚动条部分,包括了向上scrollup向下scrolldown以及滚动条scrollslider本身。 --><layer name="scrollbar" type="container" bgcolor="0x000000" bgalpha="0.25" align="righttop" x="5" y="5" width="19" height="-10"><layer name="scrollup" url="dirbutton.png" align="righttop" x="19" rotate="-90" crop="0|0|19|19" onovercrop="0|19|19|19" ondowncrop="0|38|19|19" ondown="asyncloop(pressed, layer[textscroller].scrollby(0,+1));" /><layer name="scrolldown" url="dirbutton.png" align="rightbottom" x="19" rotate="+90" crop="0|0|19|19" onovercrop="0|19|19|19" ondowncrop="0|38|19|19" ondown="asyncloop(pressed, layer[textscroller].scrollby(0,-1));" /><layer name="scrollslider" url="sliderbutton.png" align="righttop" x="0" y="19" crop="0|0|19|19" onovercrop="0|19|19|19" ondowncrop="0|38|19|19" ondown="if(layer[textscroller].hoverflow GT 0, copy(cy,y);copy(sy,mouse.stagey);dragging(); );" dragging="if(pressed, sub(dy,mouse.stagey,sy);add(ny,cy,dy);Math.max(ny,layer[scrollup].pixelheight); copy(th,layer[scrollbar].pixelheight);sub(th,layer[scrolldown].pixelheight);sub(th,layer[scrollslider].pixelheight);Math.min(ny,th); copy(y,ny); sub(ny,layer[scrollup].pixelheight);sub(th,layer[scrollslider].pixelheight);div(ny,th); copy(fh,layer[textscroller].hoverflow); mul(fh,-1); mul(ny,fh); layer[textscroller].stopscrolling(); copy(layer[textscroller].y,ny); delayedcall(0,dragging()); );" /></layer></layer><!-- 文本内容,对应text中的html属性 --><data name="testtext">你的文本内容</data>