美文网首页Unity技术分享unity
Unity3D 一句话代码实现UGUI图片的拖拽功能

Unity3D 一句话代码实现UGUI图片的拖拽功能

作者: 雨落随风 | 来源:发表于2017-07-17 13:48 被阅读396次

    在本文,你将学会如何使用一句话代码实现UGUI图片的拖动,不需要坐标的转换,不需要Piovt的变换

    效果演示:

    效果演示
    Tips: Showinfo脚本仅仅是为了看到笔者鼠标是否进行着触发而添加的,别无它用

    代码:

    using UnityEngine;
    using UnityEngine.EventSystems;
    using UnityEngine.UI;
    
    public class movePic : MonoBehaviour,IDragHandler ,IPointerDownHandler{
        private RawImage img; 
        Vector3 offsetPos; //存储按下鼠标时的图片-鼠标位置差
        void Start()
        {
            img = GetComponent<RawImage>();//获取图片,因为我们要获取他的RectTransform
        }
        public void OnDrag(PointerEventData eventData)
        {
            //将鼠标的位置坐标进行钳制,然后加上位置差再赋值给图片position
            img.rectTransform.position = new Vector3(Mathf.Clamp(Input.mousePosition.x, 0, Screen.width), Mathf.Clamp(Input.mousePosition.y, 0, Screen.height), 0) + offsetPos;
        }
        public void OnPointerDown(PointerEventData eventData)
        {
            offsetPos = img.rectTransform.position - Input.mousePosition;
        }
    }
    
    

    Tips:

    1. 最简代码,不涉及到Rect坐标转换,不考虑Piovt;
    2. 需要using UnityEngine.EventSystem
    3. 继承2个接口IDragHandlerIPointerDownHandler,在接口的实现中加入图片移动逻辑

    简单拓展

    可以作为输入框背景,输入框既美观又实用

    特别关注

    上述代码实现的前提是:Canvas -RenderMode-ScreenSpace_Overlay
    如果要实现:Canvas -RenderMode-Word Space下的图片拖拽,涉及到坐标装换,也是挺简单:

    using System;
    using UnityEngine;
    using UnityEngine.EventSystems;
    using UnityEngine.UI;
    
    public class MoveImage : MonoBehaviour, IDragHandler, IPointerDownHandler
    {
        private Image img;
        Vector3 offsetPos; //存储按下鼠标时的图片-鼠标位置差
        Vector3 arragedPos; //保存经过整理后的向量,用于图片移动
        void Start()
        {
            img = GetComponent<Image>();//获取图片,因为我们要获取他的RectTransform
        }
        public void OnDrag(PointerEventData eventData)
        {
            //将鼠标的位置坐标进行钳制,然后加上位置差再赋值给图片position
            img.transform.position =Camera.main.ScreenToWorldPoint(new Vector3(Mathf.Clamp(Input.mousePosition.x, 0, Screen.width), Mathf.Clamp(Input.mousePosition.y, 0, Screen.height), 0) + offsetPos);
        }
        public void OnPointerDown(PointerEventData eventData)
        {
            offsetPos = Camera.main.WorldToScreenPoint(img.rectTransform.position) - Input.mousePosition;
        }
    }
    

    Tips:请注意我用到了:Camera.main.WorldToScreenPointCamera.main.ScreenToWorldPoint

    其他实现方式:UGUI研究院之获取UI子节点在Canvas的2D坐标(十二)

    标签:Unity3d 、UGUI 、IDragHandler、IPointerDownHandler、图片拖拽、RectTransformUtility.ScreenPointToLocalPointInRectangle

    相关文章

      网友评论

        本文标题:Unity3D 一句话代码实现UGUI图片的拖拽功能

        本文链接:https://www.haomeiwen.com/subject/cqifkxtx.html