Unity3D-UGUI应用篇UGUI实现窗口的自由拖拽

Posted 2021-09-21 恬静的小魔龙

推荐阅读

• CSDN主页
• GitHub开源地址
• Unity3D插件分享
• 简书地址
• 我的个人博客
• QQ群：1040082875

大家好，我是佛系工程师☆恬静的小魔龙☆，不定时更新Unity开发技巧，觉得有用记得一键三连哦。

一、前言

前段时间分享了UGUI的每个组件的属性和使用方法，比如Text、Button、Image、Toggle、InputField、ScrollView等等。

接着分享了UGUI的一些原理，比如说UGUI的渲染模式、UGUI的缩放计算、UGUI的描点定位、UGUI的自动布局等等。

相信大家看完后会对UGUI有一个比较全面的认识了。

下面，就继续分享UGUI的UI组件进行应用的实例。

这是本系列文章的第七篇：
【Unity3D-UGUI应用篇】（一）使用Text实现进度等待动画
【Unity3D-UGUI应用篇】（二）使用Image实现进度条动画
【Unity3D-UGUI应用篇】（三）使用UGUI实现层级菜单
【Unity3D-UGUI应用篇】（四）使用UGUI弹窗显示模型及弹窗模型交互
【Unity3D-UGUI应用篇】（五）使用Button完成鼠标移动到UI上面显示文字功能
【Unity3D-UGUI应用篇】（六）屏幕自适应(多分配率适配)
【Unity3D-UGUI应用篇】（七）UGUI实现窗口的自由拖拽
【Unity3D-UGUI应用篇】（八）Image实现画线、画三角形、画正方形、画圆

二、介绍及效果图

在使用UGUI开发项目的时候，常常会遇到需要做一个窗口拖拽的功能。

窗口拖拽的功能可以使用UGUI内置的事件接口IPointerDownHandler和IDragHandler，并在接口方法OnPointerDown和OnDrag实现了相应的拖拽逻辑即可实现。

下面，来看一下效果：

实现比较简单，就不放源代码了。

下面就跟着博主来看一下如何实现吧。

三、实现

首先，我们搭建一个UI窗口：

UI结构：

一个Panel作为背景，然后父Image作为整个UI窗口的背景，子Image作为标题的背景，标题为窗口A。

再复制一个放到一边，修改标题窗口B。

代码实现：

using UnityEngine;
using UnityEngine.EventSystems;

public class DragWindow : MonoBehaviour, IPointerDownHandler, IDragHandler
{
    private Vector2 localMousePos;
    private Vector3 planeLocalPos;
    private RectTransform targetObject;
    private RectTransform parentRectTransform;
    private RectTransform targetRectTransform;

    void Awake()
    {
        targetObject = this.transform.GetComponent<RectTransform>();
        targetRectTransform = targetObject;
        parentRectTransform = targetObject.parent as RectTransform;
    }

    public void OnPointerDown(PointerEventData eventData)
    {
        planeLocalPos = targetRectTransform.localPosition;
        RectTransformUtility.ScreenPointToLocalPointInRectangle(parentRectTransform, eventData.position, eventData.pressEventCamera, out localMousePos);
        targetObject.gameObject.transform.SetAsLastSibling();
    }

    public void OnDrag(PointerEventData eventData)
    {
        Vector2 localPointerPosition;
        //屏幕点到矩形中的局部点
        if (RectTransformUtility.ScreenPointToLocalPointInRectangle(parentRectTransform, eventData.position, eventData.pressEventCamera, out localPointerPosition))
        {
            Vector3 offsetToOriginal = localPointerPosition - localMousePos;
            targetObject.localPosition = planeLocalPos + offsetToOriginal;
        }
    }
}

将代码拖到父Image身上：

运行程序即可。