UE4拖拽功能的蓝图基础实现


记录一个学习UE官方拖拽UI过程,指出一个层级结构问题

1、点击时记录鼠标点击位置为被拖拽UI 局部坐标下的偏移量

2、触发DragDetected事件

这个事件里创建被拖拽的预览物体

预览物体可以用一个被sizebox包裹的border色块来表示

这个预览物体创建时需要传入被拖拽的UI的引用,从中获取UI的大小,然后基于这个预览对象创建继承了DragDropOperation的对象(这里就叫WidgetDrag对象)

创建这个对象时的pivot选择mouse down,最下面的offset是pivot的offset

一次dragdrop是独立的,通过这个dragdropoperation的对象可以传递DragDrop数据

3、预览对象的蓝图就是创建时给sizebox的宽高赋值

expose on spawn可以当生成一个这个对象时让外界对这个对象赋值(WidgetDrag对象也用了这个来创建时候给要传递的数据赋值)

4、drop后计算拖拽的位置

UE原本的版本

使用了SetPositionInViewPort

这样会产生一个问题:先removefromparent导致被拖的UI原有的widgettree被打乱,重新addtoViewport后会被添加在别的层,使用widgetReflector查看

​ 原本的层级:

​ 拖动后的层级:

改进版

可以保留widgettree的结构,需要指定出是在哪个canvas的geometry,就是保持着原有的tree结构在parent的canvas局部坐标下进行位置改变,注意只有canvas slot可以直接SetPosition

这样就可以自由的拖拽普通的UI了
而对于Button这类UI,他们会吃掉OnMouseButtonDown这个事件


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM