泰安本地网站,公司文化墙创意设计,南京网站开发个人,网站开发报价明细表Unity3D 实现 UI 元素拖拽功能。
UI 拖拽
通常画布上的 UI 元素都是固定位置的#xff0c;我们可以通过实现拖拽接口#xff0c;让 UI 元素可以被拖拽到其他位置。
拖拽接口
创建一个脚本 UIDrag.cs#xff0c;在默认继承的 MonoBehaviour 后面#xff0c;再继承三个接…Unity3D 实现 UI 元素拖拽功能。
UI 拖拽
通常画布上的 UI 元素都是固定位置的我们可以通过实现拖拽接口让 UI 元素可以被拖拽到其他位置。
拖拽接口
创建一个脚本 UIDrag.cs在默认继承的 MonoBehaviour 后面再继承三个接口。
IBeginDragHandler开始拖拽IDragHandler拖拽中IEndDragHandler结束拖拽
继承接口之后要在脚本中实现接口中定义的方法即 OnBeginDrag、OnDrag、OnEndDrag。
using UnityEngine;
using UnityEngine.EventSystems;public class UIDrag : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler
{public void OnBeginDrag(PointerEventData eventData){}public void OnDrag(PointerEventData eventData){transform.position eventData.position;}public void OnEndDrag(PointerEventData eventData){}
}这里先在 OnDrag 方法中把 eventData.position 赋值给 transform.position。
然后创建一个 Image把 UIDrag 脚本拖拽到 Image 上。 运行游戏点击拖拽图片。 画布渲染模式
上述的拖拽实现是基于画布的 Overlay 模式。 如果把画布渲染模式改成 Camera 模式上述的代码实现就会出现问题。
因为 Camera 模式的画布会被缩小到相机的视野范围内坐标的数值会变得很小。 此时的运行效果拖拽后图片飞到了离画布很远的位置坐标错误。 所以我们需要对拖拽时获得的坐标位置进行转换。
坐标转换
首先定义一个 RectTransform 变量在 Awake 时进行赋值。
然后利用 RectTransformUtility.ScreenPointToWorldPointInRectangle 方法把自身的 rect、eventData.position、eventData.pressEventCamera 传入如果坐标转换正常则会返回转换后的 worldPoint把这个坐标赋值给 rect.position 就可以了。
这个方法可以把屏幕空间坐标转换成 UI 元素所在的世界坐标。
using UnityEngine;
using UnityEngine.EventSystems;public class UIDrag : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler
{RectTransform rect;void Awake(){rect GetComponentRectTransform();}public void OnBeginDrag(PointerEventData eventData){}public void OnDrag(PointerEventData eventData){if (RectTransformUtility.ScreenPointToWorldPointInRectangle(rect, eventData.position,eventData.pressEventCamera, out Vector3 worldPoint)){rect.position worldPoint;}}public void OnEndDrag(PointerEventData eventData){}
}修改代码后无论画布是 Overlay 还是 Camera 模式都可以正常拖拽。 开始与结束拖拽
单纯的拖拽只需要 OnDrag 方法而 OnBeginDrag 和 OnEndDrag 可以为拖拽操作添加更多的逻辑处理。
例如在场景中添加两个 Image修改名字改变颜色和不透明度放置到左右两边。 然后在代码中添加更多的逻辑添加一个 raycastResults 用于保存射线检测到的 UI 元素列表通过 EventSystem.current.RaycastAll 方法把鼠标经过的 UI 元素都添加到列表中包含 Image 自己。
如果鼠标经过的 UI 元素的名字包含 Container就把目标元素赋值给 target如果列表中只有 Image 自己则 target 为空。
我们可以在 OnBeginDrag 中把 Image 原来的位置保存起来。在 OnEndDrag 中检查 target 为空时把原来的位置赋值给 Image回到原位。只有在 target 不为空时Image 才会移动到目标容器位置。
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;public class UIDrag : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler
{RectTransform rect;ListRaycastResult raycastResults;GameObject target;Vector3 originPos;void Awake(){rect GetComponentRectTransform();raycastResults new ListRaycastResult();}public void OnBeginDrag(PointerEventData eventData){originPos transform.position;}public void OnDrag(PointerEventData eventData){if (RectTransformUtility.ScreenPointToWorldPointInRectangle(rect, eventData.position,eventData.pressEventCamera, out Vector3 worldPoint)){rect.position worldPoint;}// 清空上一次的射线检测结果raycastResults.Clear();// 进行射线检测EventSystem.current.RaycastAll(eventData, raycastResults);// 包含两个 UI 元素以上if (raycastResults.Count 1){// 遍历检测结果foreach (RaycastResult result in raycastResults){// 跳过自身对象的检测if (result.gameObject gameObject) continue;// 检测到目标容器if (result.gameObject.name.Contains(Container)){target result.gameObject;}}}// 只包含自己没有目标else{target null;}}public void OnEndDrag(PointerEventData eventData){if (target null){transform.position originPos;}else{transform.position target.transform.position;}}
}运行效果
