NGUI UIPanel 面板拖动以及限制面板拖动区域

NGUI 提供了非常丰富、强大的组件库,其中就包括 UIDragObject 组件,这个组件用来实现面板的拖动效果,但是这个组件有一个不好的地方就是被拖动的对象可以被拖到屏幕之外,不过我们可以很容易的借助 NGUI 的代码类库进行来修复这个问题。

我们先看一下 NGUI 自带的 UIDragObject 组件如何实现面板的拖动。

第一步先布局好界面,如图:

然后我们给可拖动的对象(Background)添加 UIDragObject 组件,如图:

接着设置 UIDragObject 的 Target 属性为 Background,如图:

到这儿我们先运行一下,看看效果,这时候我们是无法拖动面板的,究其原因很简单,我们没有给 Background 添加 Collider,如图:

下面,我们给 Background 添加 Box Collider,如图:

设置好 Box Collider 的 Size 信息,如图:

这时候我们再次运行,就可以看到,我们可以拖动面板了,但是我们也可以发现,我们可以把面板拖到屏幕之外,如图:

下面我们就去修复这个问题,我们先去掉 UIDragObject 组件,如图:

接着我们新建立一个 C# 类,取名 UDragManager.cs,如图:

然后我们编写 UDragManager.cs 类,具体代码如下:

using UnityEngine;
using System.Collections;

public class UDragManager : MonoBehaviour
{
	public Transform target;

	private Vector3 offset;
	private Bounds bounds;

	void OnPress(bool pressed)
	{
		if (target == null) return;
		if (pressed)
		{
			bounds = NGUIMath.CalculateRelativeWidgetBounds(target.transform);
			Vector3 position = UICamera.currentCamera.WorldToScreenPoint(target.position);
			offset = new Vector3(Input.mousePosition.x - (position.x - bounds.size.x / 2), Input.mousePosition.y - (position.y - bounds.size.y / 2),0f);
		}
	}

	void OnDrag(Vector2 delta)
	{
		Vector3 currentPoint = new Vector3 (Input.mousePosition.x - offset.x, Input.mousePosition.y - offset.y, 0f);

		//如果坐标小于0
		if (currentPoint.x < 0)
		{
			currentPoint.x = 0;
		}
		//如果坐标大于屏幕宽
		if (currentPoint.x + bounds.size.x > Screen.width)
		{
			currentPoint.x = Screen.width - bounds.size.x;
		}
		//如果坐标小于0
		if (currentPoint.y < 0)
		{
			currentPoint.y = 0;
		}
		//如果坐标大于屏幕高
		if (currentPoint.y + bounds.size.y > Screen.height)
		{
			currentPoint.y = Screen.height - bounds.size.y;
		}

		currentPoint.x += bounds.size.x / 2;
		currentPoint.y += bounds.size.y / 2;

		target.position = UICamera.currentCamera.ScreenToWorldPoint (currentPoint);
	}
}

接下来,我们再给 Background 添加 UDragManager 类,如图:

并且设置好 UDragManager 的 Target 属性为 Background,如图:

这时候我们再次运行,看看最终的效果,这时候我们已经把面板限制在屏幕中间了,其实我们还可以把面板限制在屏幕中的一块区域中,只需要修改区域判定的代码就可以了,最终效果图如下:

原文链接地址:http://www.omuying.com/article/40.aspx

时间: 2024-11-06 09:59:21

NGUI UIPanel 面板拖动以及限制面板拖动区域的相关文章

Unity NGUI UIPanel下对粒子或自定义Mesh的剪裁

写在开篇: 越来越烦那些无脑转发自己不做验证的博主论坛楼主,网上好不容易找到一些资料,结果代码搞下来却是错的,有些确实是因为版本问题太老不兼容,但是有些明显是有问题的,转发前自己试试就知道肯定是不能用的.结果...哎...真是不想说啥了. 这次是在小地图中画线画圈,用到了动态绘制Mesh,小地图需要对这些线进行裁切,所以去网上搜了一篇叫做<Unity NGUI UIPanel下对粒子的剪裁>的文章.当然还是感谢一下原作者提供的思路.我这里对这篇文章中涉及到的代码进行了优化改动,使之可以使用.没

NGUI 触摸拖动,并限制拖动区域

using UnityEngine; using System.Collections; public class UDragManager : MonoBehaviour { public Transform target; private Vector3 offset; private Bounds bounds; public static float ImageWidth; public static float ImageHeight; public static float Scre

鼠标拖动虚影效果(拖动的时候使用图片蒙人,但效果不错)

疯狂delphi delphiXE7.XE8.XE10公开课A 群号:58592705 鼠标拖动虚影效果 1 //1.定义消息 2 procedure MYHideMessage(var Msg: tagMSG; var Handled: Boolean); 3 4 //2.执行消息 5 procedure TForm2.MYHideMessage(var Msg: tagMSG; var Handled: Boolean); 6 var 7 pt:TPoint; 8 bit: TBitmap;

NGUI: UIPanel控件

转自:http://blog.csdn.net/huang9012/article/details/19411703 http://bbs.9ria.com/thread-417659-1-1.html NGUI官方文档:http://tasharen.com/ngui/docs/annotated.html 概述 UIPanel用来收集和管理它下面所有widget的组件.通过widget的geometry创建实际的draw call.没有panel所有东西都不能够被渲染出来.如果你对Unity

HTML5 元素拖动 - 实现元素左右拖动, 或更改自身排序

1.拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 浏览器支持:Internet Explorer 9.Firefox.Opera 12.Chrome 以及 Safari 5 支持拖放(注:在 Safari 5.1.2 中不支持拖放.). 2.相关属性及方法  设置元素为可拖放,把 draggable 属性设置为 true <labeldraggable="tr

宝塔linux面板命令大全 - 宝塔面板

安装宝塔 Centos安装脚本 yum install -y wget && wget -O install.sh http://download.bt.cn/install/install.sh && sh install.sh Ubuntu/Deepin安装脚本 wget -O install.sh http://download.bt.cn/install/install-ubuntu.sh && sudo bash install.sh Debian

Unity NGUI UIPanel下对粒子的剪裁

使用 unity 做游戏开发时,有时需要在scroll view下使用粒子,但粒子是不会被 UIPanel 所裁剪的,本人提供了脚本 ParticleSystemClipper,用来处理这种情况: using System; using UnityEngine; [RequireComponent(typeof(UIPanel))] public class ParticleSystemClipper : MonoBehaviour { const string ShaderName = "Bl

ngui UIPanel之间的点击穿透问题

在做UI界面的时候,经常需要上层的界面能够屏蔽掉点击,不让下层的控件相应点击.在NGUI中如何处理呢,只需要在两个层之间添加一个含有BoxCollider组件的UIWidget即可..

取消在微信里面上拉拖动或者下拉拖动看到的空白。(也是什么橡皮筋效果)

场景: 如果页面里面的背景是一个图片(如下图)或者是背景颜色来着,那么上拉或者下拉就看到底层白色的背景可能很烦. 下面是vue里面用具体代码, 因为我是全页面都是颜色做背景,所以我就直接在App.vue里面写全局了. methods: { cancel_scoll_boune() { var startY,endY document.querySelector('body').addEventListener("touchstart",function (evt) { startY =