移花接木(8)- 可拖拽的图层与热点

更新于 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方法说明

  • 可拖拽的热点

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

这里我们的例子有3个hotspot,同样是都有ondown事件,因此需要在hotspot里加

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

然后就是对应的action

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

 

演示中可以看到,分别拖拽了三种不同的样式,图层,文字层以及热点。因此我们分别说明如何使用,(复制代码可使用代码框右上角在新窗口中打开复制

  • 可拖拽的图层

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

上面是两个layer,其中box2是box1的子layer。两个图层都是可拖拽的。通过ondown事件,也就是鼠标按下,实现了拖拽。也就是说你要移花接木的话,你首先要在你的layer静态代码中,加入

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

然后你还要在xml文件中放入一个对应的action:

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

  • 可拖拽的文字层

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

可拖拽的文字层使用了只在其父元素的垂直方向上拖拽的draglayer_vertically_within_parent

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

 

可拖拽图层官方演示(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)

从演示中可以看到,分别拖拽了三种不同的样式,图层,文字层以及热点。因此我们分别说明如何使用,(复制代码可使用代码框右上角在新窗口中打开复制

  • 可拖拽的图层

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

上面是两个layer,其中box2是box1的子layer。两个图层都是可拖拽的。通过ondown事件,也就是鼠标按下,实现了拖拽。也就是说你要移花接木的话,你首先要在你的layer静态代码中,加入

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

然后你还要在xml文件中放入一个对应的action:

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

  • 可拖拽的文字层

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

可拖拽的文字层实际上也可以使用scrollarea完成。在这里文字层是使用了textfield插件,同时调用了data来完成文字部分。你可以修改textbox的align、x、y来放置整个文字层在全景中的位置。调整data内的内容来输入你要显示的文字。

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

start这个参数是要保留的,260是容器的高度。也就是textmask的height属性。

然后你需要的一个action

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

这个action是允许在垂直方向的一定范围内拖动文字。

  • 可拖拽的热点

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

这里我们的例子有四个hotspot,同样是都有ondown事件,因此需要在hotspot里加

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

然后就是对应的action

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

 

在 “移花接木(8)- 可拖拽的图层与热点” 上有 1 条评论

发表评论