更新于 2020.11.19 krpano 1.20.9
官方下载包路径
你电脑的路径\krpano-1.20.9\viewer\examples\animated-hotspots\dragable-hotspots
你电脑的路径\krpano-1.20.9\viewer\examples\animated-hotspots\dragable-layers
提示:如果不明白下载包路径是什么,请查看 循序渐进(3)- krpano下载包的使用说明
在线演示
1.20方法说明
- 可拖拽的热点
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 |
<hotspot name="spot1" url="hotspot.png" scale="0.5" ath="-25" atv="+5" ondown="draghotspot();" /> <hotspot name="spot2" url="hotspot.png" zoom="true" scale="0.5" ath="0" atv="+25" ondown="draghotspot();" /> <hotspot name="spot3" url="hotspot.png" distorted="true" scale="0.5" ath="+25" atv="+5" ondown="draghotspot();" /> |
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 |
ondown="draghotspot();" |
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 8 9 10 |
<action name="draghotspot"> spheretoscreen(ath, atv, hotspotcenterx, hotspotcentery, calc(mouse.stagex LT stagewidth/2 ? 'l' : 'r')); sub(drag_adjustx, mouse.stagex, hotspotcenterx); sub(drag_adjusty, mouse.stagey, hotspotcentery); asyncloop(pressed, sub(dx, mouse.stagex, drag_adjustx); sub(dy, mouse.stagey, drag_adjusty); screentosphere(dx, dy, ath, atv); ); </action> |
演示中可以看到,分别拖拽了三种不同的样式,图层,文字层以及热点。因此我们分别说明如何使用,(复制代码可使用代码框右上角在新窗口中打开复制)
- 可拖拽的图层
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 |
<layer name="box1" type="container" align="lefttop" x="10" y="10" width="250" height="250" bgcolor="0x000000" bgalpha="0.5" bgcapture="true" maskchildren="true" ondown="draglayer();"> <layer name="box2" type="container" align="center" x="0" y="0" width="100" height="100" bgcolor="0x44AADD" bgalpha="1.0" bgcapture="true" ondown="draglayer();" /> </layer> |
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 |
ondown="draglayer();" |
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<action name="draglayer"> copy(drag_currentx, x); copy(drag_currenty, y); copy(drag_stagex, mouse.stagex); copy(drag_stagey, mouse.stagey); indexoftxt(align_contains_right, get(align), 'right'); indexoftxt(align_contains_bottom, get(align), 'bottom'); calc(drag_align_x, align_contains_right GE 0 ? -1 : +1); calc(drag_align_y, align_contains_bottom GE 0 ? -1 : +1); asyncloop(pressed, calc(x, drag_currentx + (mouse.stagex - drag_stagex)*drag_align_x); calc(y, drag_currenty + (mouse.stagey - drag_stagey)*drag_align_y); ); </action> |
- 可拖拽的文字层
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<layer name="textbox" type="container" align="center" x="0" y="0" width="300" height="300" bgcolor="0x333333" bgalpha="0.7" bgcapture="true" ondown="draglayer();"> <layer name="title" style="text" align="top" y="5" width="100%" css="text-align:center; color:#FFFFFF; font-family:Arial; font-weight:bold; font-size:14px;" html="Textbox" /> <layer name="textarea" type="container" align="lefttop" x="10" y="30" width="280" height="260" bgcolor="0xFFFFFF" bgalpha="1.0" maskchildren="true"> <layer name="text" style="text" enabled="true" align="lefttop" x="0" y="0" width="100%" autoheight="true" css="text-align:left; color:#000000; font-family:Arial; font-size:15px;" html="data:testtext" ondown="draglayer_vertically_within_parent();" /> </layer> </layer> <data name="testtext"> The [b]krpano Viewer[/b] is a small and very flexible high-performance viewer for all kind of panoramic images and interactive virtual tours. The viewer is available as Flash and HTML5 application. The viewer is designed for the usage inside the Browser on Desktop (Windows, Mac, Linux) and on Mobiles/Tablets (iPhone, iPad, Android, ...).[br/] [br/] In addition to the [b]krpano Viewer[/b] there are the [b]krpano Tools[/b] - this are small tools and droplets which are helping to automatically prepare the panoramic images for viewing and making them ready-to-use. Making a pano or a tour is possible just by drag-and-drop.[br/] [br/] Convince yourself by viewing the examples and / or by downloading the krpano Viewer and krpano Tools for free and try using them with your own panoramic images.[br/] </data> |
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 8 9 10 11 |
<action name="draglayer_vertically_within_parent"> copy(drag_currenty, y); copy(drag_stagey, mouse.stagey); calc(y_min, layer[get(parent)].pixelheight - pixelheight); if(y_min LT 0, asyncloop(pressed, calc(y, drag_currenty + (mouse.stagey - drag_stagey)); clamp(y, get(y_min), 0); ); ); </action> |
可拖拽图层官方演示(1.18)
可拖拽热点官方演示(1.18)
官方案例路径(1.18)
在下载包中的
examples/118/examples/xml-usage/dragable-layers-plugins/dragable-layers.html
examples/118/examples/xml-usage/dragable-hotspots/dragable-hotspots.html
说明(1.18)
从演示中可以看到,分别拖拽了三种不同的样式,图层,文字层以及热点。因此我们分别说明如何使用,(复制代码可使用代码框右上角在新窗口中打开复制)
- 可拖拽的图层
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 |
<layer name="box1" type="container" align="lefttop" x="10" y="10" width="250" height="250" bgcolor="0x000000" bgalpha="0.5" bgcapture="true" maskchildren="true" ondown="draglayer();"> <layer name="box2" type="container" align="center" x="0" y="0" width="100" height="100" bgcolor="0x44AADD" bgalpha="1.0" bgcapture="true" ondown="draglayer();" /> </layer> |
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 |
ondown="draglayer();" |
点击代码窗口最右侧按钮,在新窗口打开后复制代码
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 |
<action name="draglayer"> if(%1 != dragging, copy(drag_currentx, x); copy(drag_currenty, y); copy(drag_stagex, mouse.stagex); copy(drag_stagey, mouse.stagey); set(drag_sx, +1); set(drag_sy, +1); if(align == righttop, set(drag_sx,-1); ); if(align == right, set(drag_sx,-1); ); if(align == rightbottom, set(drag_sx,-1); set(drag_sy,-1); ); if(align == bottom, set(drag_sy,-1); ); if(align == leftbottom, set(drag_sy,-1); ); draglayer(dragging); , if(pressed, sub(dx, mouse.stagex, drag_stagex); sub(dy, mouse.stagey, drag_stagey); mul(dx, drag_sx); mul(dy, drag_sy); add(x, drag_currentx, dx); add(y, drag_currenty, dy); delayedcall(0, draglayer(dragging) ); ); ); </action> |
- 可拖拽的文字层
点击代码窗口最右侧按钮,在新窗口打开后复制代码
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 |
<layer name="textbox" type="container" align="center" x="0" y="0" width="300" height="300" bgcolor="0x333333" bgalpha="0.7" bgcapture="true" ondown="draglayer();"> <layer name="title" url="%SWFPATH%/plugins/textfield.swf" children="false" enabled="false" align="top" y="5" width="100%" autoheight="true" border="false" background="false" css="text-align:center; color:#FFFFFF; font-family:Arial; font-weight:bold; font-size:14px;" html="Textbox" /> <layer name="textmask" type="container" align="lefttop" x="10" y="30" width="280" height="260" bgcolor="0xFFFFFF" bgalpha="1.0" maskchildren="true"> <layer name="text" url="%SWFPATH%/plugins/textfield.swf" children="false" align="lefttop" x="0" y="0" width="100%" autoheight="true" border="false" background="false" css="text-align:left; color:#000000; font-family:Arial; font-size:15px;" html="data:testtext" ondown="draglayer_text(start,260);" /> </layer> </layer> <data name="testtext"> The [b]krpano Viewer[/b] is a small and very flexible high-performance viewer for all kind of panoramic images and interactive virtual tours. The viewer is available as Flash and HTML5 application. The viewer is designed for the usage inside the Browser on Desktop (Windows, Mac, Linux) and on Mobiles/Tablets (iPhone, iPad, Android, ...).[br/] [br/] In addition to the [b]krpano Viewer[/b] there are the [b]krpano Tools[/b] - this are small tools and droplets which are helping to automatically prepare the panoramic images for viewing and making them ready-to-use. Making a pano or a tour is possible just by drag-and-drop.[br/] [br/] Convince yourself by viewing the examples and / or by downloading the krpano Viewer and krpano Tools for free and try using them with your own panoramic images.[br/] [br/] </data> |
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 |
ondown="draglayer_text(start,260);" |
然后你需要的一个action
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<action name="draglayer_text"> if(%1 != dragging, copy(drag_currenty, y); copy(drag_stagey, mouse.stagey); draglayer_text(dragging,%2); , if(pressed, sub(dy, mouse.stagey, drag_stagey); add(y1, drag_currenty, dy); add(y2, y1, pixelheight); sub(y2, %2); if(y1 GT 0, set(y1,0)); if(y2 LT 0, sub(y1,y2)); copy(y,y1); delayedcall(0, draglayer_text(dragging,%2) ); ); ); </action> |
- 可拖拽的热点
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 |
<hotspot name="spot1" url="hotspot.png" zoom="true" scale="0.5" ath="-35" atv="+6" ondown="draghotspot();" /> <hotspot name="spot2" url="hotspot.png" zoom="true" scale="0.5" ath="-1" atv="+24" ondown="draghotspot();" /> <hotspot name="spot3" url="hotspot.png" distorted="true" scale="0.5" ath="+20" atv="+8" ondown="draghotspot();" /> <hotspot name="spot4" url="hotspot.png" distorted="true" scale="0.5" ath="+32" atv="+16" ondown="draghotspot();" /> |
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 |
ondown="draghotspot();" |
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<action name="draghotspot"> if(%1 != dragging, spheretoscreen(ath, atv, hotspotcenterx, hotspotcentery); sub(drag_adjustx, mouse.stagex, hotspotcenterx); sub(drag_adjusty, mouse.stagey, hotspotcentery); draghotspot(dragging); , if(pressed, sub(dx, mouse.stagex, drag_adjustx); sub(dy, mouse.stagey, drag_adjusty); screentosphere(dx, dy, ath, atv); copy(print_ath, ath); copy(print_atv, atv); roundval(print_ath, 3); roundval(print_atv, 3); delayedcall(0, draghotspot(dragging) ); ); ); </action> |
在 “移花接木(8)- 可拖拽的图层与热点” 上有 1 条评论