【Unity3D UGUI】事件接口(三) 按下移动、释放

5 篇文章 1 订阅

【准备工作】

相关基础知识与注意事项烦请参见拙作——事件接口(零)总述

【接口介绍】

IDragHandler

该接口实现方法如下:

public void OnDrag(PointerEventData eventData)
{
    //当鼠标在A对象按下并拖拽时 A对象每帧响应一次此事件
    //注:如果不实现此接口,则后面的四个接口方法都不会触发
    Debug.Log("OnDrag " + name);
}

IInitializePotentialDragHandler

该接口实现方法如下:

public void OnInitializePotentialDrag(PointerEventData eventData)
{
    //当鼠标在A对象按下还没开始拖拽时 A对象响应此事件
    //注:此接口事件与IPointerDownHandler接口事件类似
    //    有兴趣的朋友可以测试下二者的执行顺序这里不再赘述
    Debug.Log("OnInitializePotentialDrag " + name);
}

IBeginDragHandler

该接口实现方法如下:

public void OnBeginDrag(PointerEventData eventData)
{
    //当鼠标在A对象按下并开始拖拽时 A对象响应此事件
    // 此事件在OnInitializePotentialDrag之后响应 OnDrag之前响应
    Debug.Log("OnBeginDrag " + name);
}

IEndDragHandler

该接口实现方法如下:

public void OnEndDrag(PointerEventData eventData)
{
    //当鼠标抬起时 A对象响应此事件
    Debug.Log("OnEndDrag " + name);
}

IDropHandler

该接口实现方法如下:

public void OnDrop(PointerEventData eventData)
{
    //A、B对象必须均实现IDropHandler接口,且A至少实现IDragHandler接口
    //当鼠标从A对象上开始拖拽,在B对象上抬起时 B对象响应此事件
    //此时name获取到的是B对象的name属性
    //eventData.pointerDrag表示发起拖拽的对象(GameObject)
    Debug.Log(eventData.pointerDrag.name + " OnDrop to " + name);
}

这里写图片描述

【应用案例】

案例说明

本案例将实现从图片组中拖出图片到目标时,释放鼠标则目标变为拖入的图片。

具体实施

(1)创建五个 Image,其中三个命名为 Image Source 并指定不同的图片作为其“Source Image”属性,其余两个命名为 Image Target,不指定图片。五张图片看心情随便摆一摆;
(2)创建 DragImage 脚本,将其指定给所有 Image Source,并添加如下代码:

/*- - - - - - - - - - - - - - - - - - - - - - - - - -*/
/*    Script Editor: Eazey丶亦泽                      
/*    Blog   Adress: http://blog.csdn.net/eazey_wj     
/*    GitHub Adress: https://github.com/Eazey        
/*- - - - - - - - - - - - - - - - - - - - - - - - - -*/

/*   Either none appetency, or determined to win.    */

/* * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Script Overview: 
 * The script target is that realize effect of drag 
 * image.
/* * * * * * * * * * * * * * * * * * * * * * * * * * */

using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

public class DragImage : MonoBehaviour,
    IDragHandler,IBeginDragHandler,IEndDragHandler
    {

    private Image image;
    private GameObject go;

    void OnEnable()
    {
        image = GetComponent<Image>();
    }

    public void OnBeginDrag(PointerEventData eventData)
    {
        if (image.sprite == null)
        {
            Debug.LogError("Current component of 'Image' have none 'Sprite'.");
            return;
        }

        go = new GameObject("Draging");
        go.transform.SetParent(eventData.pointerDrag.transform.parent);

        go.transform.localPosition = Vector3.zero;
        go.transform.localScale = Vector3.one;

        Image goImg = go.AddComponent<Image>();
        goImg.sprite = image.sprite;
        goImg.raycastTarget = false;
    }

    public void OnDrag(PointerEventData eventData)
    {
        if (go == null)
            return;

        go.transform.position = Input.mousePosition;
    }

    public void OnEndDrag(PointerEventData eventData)
    {
        Destroy(go);
        go = null;
    }
}

(3)创建 DropImage 脚本,将其指定给所有的 Image Target,并添加如下代码:

/*- - - - - - - - - - - - - - - - - - - - - - - - - -*/
/*    Script Editor: Eazey丶亦泽                      
/*    Blog   Adress: http://blog.csdn.net/eazey_wj     
/*    GitHub Adress: https://github.com/Eazey        
/*- - - - - - - - - - - - - - - - - - - - - - - - - -*/

/*   Either none appetency, or determined to win.    */

/* * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Script Overview: 
 * The script target is change the image after it had 
 * dropped.
/* * * * * * * * * * * * * * * * * * * * * * * * * * */

using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

public class DropImage : MonoBehaviour,IDropHandler {

    private Image image;

    void OnEnable()
    {
        image = GetComponent<Image>();
        if (image == null)
            image = gameObject.AddComponent<Image>();
    }

    public void OnDrop(PointerEventData eventData)
    {
        Sprite s = GetSprite(eventData);
        if (s != null)
            image.sprite = s;
    }

    private Sprite GetSprite(PointerEventData eventData)
    {
        GameObject goSource = eventData.pointerDrag;
        if (goSource == null)
            return null;

        Image imgSource = eventData.pointerDrag.GetComponent<Image>();
        if (imgSource == null)
            return null;

        DragImage DragSource = imgSource.GetComponent<DragImage>();
        if (DragSource == null)
            return null;

        return imgSource.sprite;
    }
}

(4)最终效果如下图所示:
这里写图片描述

  • 25
    点赞
  • 91
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
Unity UGUI(User Interface)是Unity引擎中用于创建用户界面的接口UGUI提供了一系列的组件和功能,用于创建交互式的用户界面,包括按钮、文本框、滑动条、面板等。 以下是一些常用的UGUI接口: 1. Canvas(画布):Canvas是UGUI的根节点,用于容纳所有的UI元素。可以通过Canvas组件设置画布的渲染模式、分辨率适配等属性。 2. UI元素:UGUI提供了一系列的UI元素组件,如Text(文本)、Image(图片)、Button(按钮)、Slider(滑动条)、InputField(输入框)等。这些组件可以通过Inspector面板或脚本进行属性设置和事件绑定。 3. Layout组件:UGUI提供了Layout组件,用于自动调整UI元素的位置和大小。常用的Layout组件有HorizontalLayoutGroup(水平布局)、VerticalLayoutGroup(垂直布局)和GridLayoutGroup(网格布局)等。 4. EventSystem(事件系统):EventSystem用于处理用户输入事件,如点击、拖拽等。可以通过EventSystem组件设置事件的触发方式和优先级。 5. UI动画:UGUI支持UI元素的动画效果,可以通过Animator组件和Animation组件来实现。Animator组件可以控制UI元素的状态转换和过渡效果,而Animation组件可以实现基于关键帧的动画效果。 6. UI交互:UGUI提供了一些常用的UI交互功能,如按钮点击事件、滑动条数值改变事件等。可以通过脚本来监听和处理这些事件,实现与用户的交互。 以上只是UGUI接口的一部分,UGUI还提供了更多的功能和组件,可以根据具体需求进行学习和使用。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值