Unity UGUI拖拽移动

简介: 本文介绍了两种UI拖拽实现方式:精准拖拽和克隆拖拽。精准拖拽通过计算鼠标点击点与UI中心的偏移量,使UI跟随鼠标移动,适用于需要精确控制的场景。代码中通过`IBeginDragHandler`、`IDragHandler`和`IEndDragHandler`接口实现拖拽逻辑。克隆拖拽则在拖拽时克隆一个UI对象,使其跟随鼠标移动,适合视觉效果需求较高的场景。代码中同样使用上述接口,并在拖拽结束时销毁克隆对象。具体实现可参考提供的代码示例。

两种方式实现
一种是精准拖拽,一种是克隆拖拽
第一种精准拖拽的
代码如下:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
/// <summary>
/// 挂在要拖拽的ui上即可
/// </summary>
public class TuoDongImage : MonoBehaviour,IBeginDragHandler ,IDragHandler,IEndDragHandler 
{
    public bool isPrecision=true;  //精准拖拽为true ,鼠标一直在UI中心可以为false
    //存储图片中心点与鼠标点击点的偏移量
    private Vector3 offect;
    //存储当前拖拽图片的RectTransform组件
    private RectTransform m_rt;
    void Start()
    {
        m_rt = this.transform.GetComponent<RectTransform>();
    }
    public void OnBeginDrag(PointerEventData eventData)
    {
        //如果是精确拖拽则进行计算偏移量操作
        if (isPrecision)
        {
            // 存储点击时的鼠标坐标
            Vector3 tWorldPos;
            //UI屏幕坐标转换为世界坐标
            RectTransformUtility.ScreenPointToWorldPointInRectangle(m_rt, eventData.position, eventData.pressEventCamera, out tWorldPos);
            //计算偏移量   
            offect = transform.position - tWorldPos;

        }
        //否则,默认偏移量为0
        else
        {
            offect = Vector3.zero;
        }
        //m_rt.position = Input.mousePosition + offect;
        SetDraggedPosition(eventData);

    }

    //拖拽过程中触发
    public void OnDrag(PointerEventData eventData)
    {
        //m_rt.position = Input.mousePosition + offect;
        SetDraggedPosition(eventData);
    }

    //结束拖拽触发
    public void OnEndDrag(PointerEventData eventData)
    {
        //m_rt.position = Input.mousePosition + offect;
        SetDraggedPosition(eventData);
    }
    private void SetDraggedPosition(PointerEventData eventData)
    {
        //存储当前鼠标所在位置
        Vector3 globalMousePos;
        //UI屏幕坐标转换为世界坐标
        if (RectTransformUtility.ScreenPointToWorldPointInRectangle(m_rt, eventData.position, eventData.pressEventCamera, out globalMousePos))
        {
            //设置位置及偏移量
            m_rt.position = globalMousePos + offect;
        }
    }

}

第二种克隆拖拽的
代码如下:

/******************************************
 * 项目名称:UGUI通用
 * 脚本功能:UI图片拖拽功能(将脚本挂载在需要拖放的图片上)
*******************************************/
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;

public class Clonephoto : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler
{
    private GameObject objj;
    private RectTransform m_rt;//canvas下面的一个ui
    private Vector3 offect;
    private RectTransform rect;
    void Start()
    {
        //查找这个ui(前提是必须得有这个UI)
        m_rt = GameObject.Find("Canvas").GetComponent<RectTransform>();
        rect = this.transform.GetComponent<RectTransform>();
    }
    //开始拖拽
    public void OnBeginDrag(PointerEventData eventData)
    {
        //ui屏幕坐标转换为世界坐标
        RectTransformUtility.ScreenPointToWorldPointInRectangle(rect, eventData.position, eventData.
            pressEventCamera, out offect);
        //克隆自己在m_rt上面显示
        objj = Instantiate(transform.gameObject,m_rt);
        //objj.transform.GetComponent<RectTransform>().sizeDelta = new Vector2(80, 80); //设置ui大小
        //objj.transform.localScale = new Vector3(0.7f, 0.7f, 0.7f);                  //设置一下拖的时候大小,显得好看一点点,可要可不要
        objj.transform.GetComponent<RectTransform>().anchoredPosition = Input.mousePosition -offect; //计算偏移量
    }
    //拖拽中
    public void OnDrag(PointerEventData eventData)
    {
        if (objj !=null )
        {
            objj.transform.GetComponent <RectTransform>().anchoredPosition = Input.mousePosition-offect;
        }
    }
    //结束拖拽
    public void OnEndDrag(PointerEventData eventData)
    {
        if (objj!=null)
        {
            Accuracy_testing.name = objj.transform.name;
             objj.SetActive(false);
             Invoke("ShanChu", 0.1f);            
        }
    }
    void ShanChu()
    {
        Destroy(objj.gameObject);
    }

}

最后自行测试吧

相关文章
|
1月前
|
图形学
Unity 获取鼠标位置下的UGUI或3D物体
本文总结了两种检测方法,分别用于UGUI和3D物体的检测。第一种方法`GetOverUIobj`专门用于检测鼠标悬停的UGUI元素,通过`GraphicRaycaster`实现。第二种方法`GetOverWordGameObject`则同时适用于UI和3D物体检测,利用`PhysicsRaycaster`进行射线检测。两者均返回悬停对象或null。
|
1月前
|
前端开发 图形学
unity UGUI跟随3D物体的坐标转换
在 Unity 中实现 UGUI 元素跟随 3D 物体,关键是将 3D 物体的世界坐标转换为屏幕或画布坐标。通过 Camera.WorldToScreenPoint 方法,可将 3D 物体位置映射到屏幕上,再更新 UGUI 元素的位置。代码示例展示了如何使用该方法,使 UGUI 图像跟随 3D 模型,并提供文字显示、图像和线条的显示/隐藏功能。
|
1月前
|
图形学
Unity UGUI实现鼠标拖动图片
在 Unity UGUI 中实现鼠标拖动图片功能,主要涉及事件检测、坐标转换和物体位置更新。根据鼠标移动量更新图片位置。代码示例展示了如何通过这些步骤实现拖动效果。
|
9月前
|
图形学
【unity小技巧】实现FPS武器的瞄准放大效果(UGUI实现反向遮罩,全屏遮挡,局部镂空效果)
【unity小技巧】实现FPS武器的瞄准放大效果(UGUI实现反向遮罩,全屏遮挡,局部镂空效果)
215 1
|
9月前
|
数据可视化 大数据 API
【推荐100个unity插件之22】基于UGUI的功能强大的简单易用的Unity数据可视化图表插件——XCharts3.0插件的使用
【推荐100个unity插件之22】基于UGUI的功能强大的简单易用的Unity数据可视化图表插件——XCharts3.0插件的使用
438 0
|
9月前
|
编解码 前端开发 Java
【推荐100个unity插件之12】UGUI的粒子效果(UI粒子)—— Particle Effect For UGUI (UI Particle)
【推荐100个unity插件之12】UGUI的粒子效果(UI粒子)—— Particle Effect For UGUI (UI Particle)
687 0
|
9月前
|
开发工具 图形学
【推荐100个unity插件之11】Shader实现UGUI的特效——UIEffect为 Unity UI 提供视觉效果组件
【推荐100个unity插件之11】Shader实现UGUI的特效——UIEffect为 Unity UI 提供视觉效果组件
738 0
|
9月前
|
前端开发 图形学
技术经验解读:【Unity3d游戏开发】UGUI插件入门之游戏菜单
技术经验解读:【Unity3d游戏开发】UGUI插件入门之游戏菜单
51 0
|
10月前
|
编解码 前端开发 人机交互
【Unity 3D】UI系统中UGUI各个组件的详细讲解(附源码 超详细)
【Unity 3D】UI系统中UGUI各个组件的详细讲解(附源码 超详细)
438 0
|
图形学