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这个事件

posted @ 2021-03-17 14:50  飞翔的子明  阅读(2748)  评论(0编辑  收藏  举报