zoukankan      html  css  js  c++  java
  • 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这个事件

  • 相关阅读:
    处理数据
    Vue--Vue常用指令及操作
    Vue--Vue实例
    ES6--解构赋值
    ES6--入门
    前端模块化开发
    Node.js--入门
    HTML5--canvas与svg的使用
    input整理
    移动端开发入门
  • 原文地址:https://www.cnblogs.com/FlyingZiming/p/14549338.html
Copyright © 2011-2022 走看看