移花接木（20）- 可滑动文本

更新于 2020.11.19 krpano 1.20.9

本案例实现了在场景中插入大段文字，使其在特定区域滚动显示，可用鼠标可用滑条。

本案例在下载包的位置是：

1.18.5\krpano-1.18.5\examples\xml-usage\scrollingtextfield

我们只需要将下面的代码放进xml内即可。中文为代码的解释。如果是scene外面的话，要给textfield这个layer加上keep=”true”

点击代码窗口最右侧按钮，在新窗口打开后复制代码

<!-- 文本域，整个文本域的父元素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>

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

<!-- 文本域，整个文本域的父元素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>