Unity 基础之 OnMouse 简单实现 GameObject 和 UGUI 元素随着鼠标移动，拖动的效果

秒速五厘米 2023-02-26 08:28 51阅读 0赞

![20200714223342500.png][]

# Unity 基础 之 OnMouse 简单实现 GameObject 和 UGUI 元素随着鼠标移动，拖动的效果 #

**目录**

Unity 基础 之 OnMouse 简单实现 GameObject 和 UGUI 元素随着鼠标移动，拖动的效果

一、简单介绍

二、实现原理

三、注意事项

四、效果预览

五、实现步骤

六、关键代码

--------------------

## 一、简单介绍 ##

Unity中的一些基础知识点。

本节介绍，使用 OnMouse 函数，简单的就实现游戏物体或者UI，随着鼠标的移动而移动的效果。

## 二、实现原理 ##

1、 OnMouse 监控点中 游戏物体或者 UI

2、WorldToScreenPoint 和 ScreenToWorldPoint 的函数把物体和鼠标的坐标做转换，得到物体的随鼠标移动，最终实现效果

## 三、注意事项 ##

1、这里还是通过camera 转换的位置，如果该camera 旋转移动了，效果你们可测试下哈

2、使用的该移动方法，在移动 UI 的时候 ，对应的Canvas 的Render Mode 不能是 Screen Space - Overlay ，Event Camera ，要进行对应设置

3、如果要在 Canvas 的Render Mode 是 Screen Space - Overlay 移动 UI ，建议使用其他方法

## 四、效果预览 ##

![20200715090122187.gif][]

## 五、实现步骤 ##

1、打开Unity，新建空工程

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70][]

2、在场景中布局UI和游戏物体，如图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 1][]

3、设置 Canvas 的 Render Mode 为 Screen Space - Camera 或者 World Space

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 2][]

4、设置 Canvas 的 Event Camera

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 3][]

5、因为要移动 UI 的 Image ，所以给 Image 添加 碰撞器，注意调整大小合适

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 4][]

6、新建脚本，编写代码

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 5][]

7、把脚本挂载到 Cube 和 Image 上

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 6][]

8、运行场景，效果如上

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 7][]

## 六、关键代码 ##

using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;
    
    public class MouseMoveGameObjectOrUI : MonoBehaviour
    {
       
        private Vector3 screenSpace;
        private Vector3 offset;
        private Vector3 curScreenSpace;
        private Vector3 CurPosition;
    
        Camera mCamera ;
        // Use this for initialization
        void Start()
        {
            mCamera = Camera.main;
            
            StartCoroutine(OnMouseDown());
    
        }
    
        // Update is called once per frame
        void Update()
        {
    
        }
        void OnMouseEnter()
        {
            Debug.Log("OnMouseEnter");
        }
        void OnMouseExit()
        {
            Debug.Log("OnMouseExit");
        }
        private void OnMouseUp()
        {
            Debug.Log("OnMouseUp");
        }
    
        IEnumerator OnMouseDown()
        {
            Debug.Log("OnMouseDown");
            if (mCamera)
            {
                //转换对象到当前屏幕位置
                Vector3 screenPosition = mCamera.WorldToScreenPoint(transform.position);
    
                //鼠标屏幕坐标
                Vector3 mScreenPosition = new Vector3(Input.mousePosition.x, Input.mousePosition.y, screenPosition.z);
                //获得鼠标和对象之间的偏移量,拖拽时相机应该保持不动
                Vector3 offset = transform.position - mCamera.ScreenToWorldPoint(mScreenPosition);
                //print ("drag starting:"+transform.name);
    
                //若鼠标左键一直按着则循环继续
                while (Input.GetMouseButton(0))
                {
    
                    //鼠标屏幕上新位置
                    mScreenPosition = new Vector3(Input.mousePosition.x, Input.mousePosition.y, screenPosition.z);
    
                    // 对象新坐标
                    transform.position = offset + mCamera.ScreenToWorldPoint(mScreenPosition);
    
    
                    //协同，等待下一帧继续
                    yield return new WaitForFixedUpdate();
                }
    
                Debug.Log("drag compeleted");
    
            }
        }
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 8][]

[20200714223342500.png]: /images/20230209/a5b2143bb23548be863e7fa99d997fac.png
[20200715090122187.gif]: /images/20230209/447daa39161c44839736ea07afc95466.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70]: /images/20230209/78c7e7ffd764403193bac6c58228e839.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 1]: /images/20230209/7d05c935075c4b98bdfe75f6673beaed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 2]: /images/20230209/1449e5d0d78844f6a1b28ff8f45304ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 3]: /images/20230209/5940db544bfe497e8164de39bb51190a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 4]: /images/20230209/34b170580e374c2796d23b7edf9a5e02.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 5]: /images/20230209/58f13163a5064666b6510e9673d31d9a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 6]: /images/20230209/eec2bac899954265851d79fcfe3ee295.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 7]: /images/20230209/8b7b581b1f9e43bd9d7e727ff39e7692.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 8]: /images/20230209/d7f2a8d10752472d9281d24a388619c9.png