【Unity3D NGUI】----UI尺寸和位置的调整
1 尺寸与位置
通过UIWidget类获取,该类是所有UI元素的基类
在unity中创建一个sprite,如下图所示

这里面这个sprite的大小受几个属性的影响,首先是属性面板里的Size,对应的UIWidget成员为width和height字段,然后是其上层节点和自身scale属性。
1.1 局部大小
public override Vector3[] worldCorners
{
get
{
Vector2 offset = pivotOffset; float x0 = -offset.x * mWidth;
float y0 = -offset.y * mHeight;
float x1 = x0 + mWidth;
float y1 = y0 + mHeight; Transform wt = cachedTransform; mCorners[] = wt.TransformPoint(x0, y0, 0f);
mCorners[] = wt.TransformPoint(x0, y1, 0f);
mCorners[] = wt.TransformPoint(x1, y1, 0f);
mCorners[] = wt.TransformPoint(x1, y0, 0f); return mCorners;
}
}
从上面可以看出局部角点对应的矩形宽和长就等于width和height(mWidth等于width)
1.2 世界坐标系大小
所以计算某个UI元素在屏幕上的真实大小应该为
public override Vector3[] worldCorners
{
get
{
Vector2 offset = pivotOffset; float x0 = -offset.x * mWidth;
float y0 = -offset.y * mHeight;
float x1 = x0 + mWidth;
float y1 = y0 + mHeight; Transform wt = cachedTransform; mCorners[] = wt.TransformPoint(x0, y0, 0f);
mCorners[] = wt.TransformPoint(x0, y1, 0f);
mCorners[] = wt.TransformPoint(x1, y1, 0f);
mCorners[] = wt.TransformPoint(x1, y0, 0f); return mCorners;
}
}
从里面取两个四个角点之间的距离即可算出真实的大小(因为Transform类获取不到derived scale属性,只能获取到localScale属性)
上面代码中也用到了pivotOffset,该属性对应于在编辑器选中UI元素局部坐标系的原点,默认的情况下该值是(0.5,0.5),表示在UIWidget中的中心,为(0,0)表示在左下角,(1,1)表示在右上角。
同时根据上面的worldCorners也很好获取该UI元素在屏幕上的位置。这里面世界位置的计算中,可以看出同时用到了定义UI元素时的大小、坐标中心,以及该UI元素的转置矩阵。
所以说,假如需要改变UI元素的位置,只需改变其转置矩阵里的位置即可。
1.3 相对于其他元素的位置
采用通用的计算过程,即假如要计算B相对于A的位置,只需给出A和B的世界坐标PA和PB,那么B相对于A的位置即为 Rba = PB- PA。
NGUI里对应的代码如下:
public override Vector3[] GetSides (Transform relativeTo)
{
Vector2 offset = pivotOffset; float x0 = -offset.x * mWidth;
float y0 = -offset.y * mHeight;
float x1 = x0 + mWidth;
float y1 = y0 + mHeight;
float cx = (x0 + x1) * 0.5f;
float cy = (y0 + y1) * 0.5f; Transform trans = cachedTransform;
mCorners[] = trans.TransformPoint(x0, cy, 0f);
mCorners[] = trans.TransformPoint(cx, y1, 0f);
mCorners[] = trans.TransformPoint(x1, cy, 0f);
mCorners[] = trans.TransformPoint(cx, y0, 0f); if (relativeTo != null)
{
for (int i = ; i < ; ++i)
mCorners[i] = relativeTo.InverseTransformPoint(mCorners[i]);
}
return mCorners;
}
1.4 屏幕位置
上面讨论的位置均是3D空间的位置,而非屏幕上的位置。
要获取一个UI元素在屏幕上的位置,使用NGUI的摄像头将世界坐标转换到屏幕坐标
pt=UICamera.currentCamera.WorldToScreenPoint(pt);
对于置于世界原点的摄像机,它的光轴也穿过世界原点,假如使用
Vector3 screenPt = cam.WorldToScreenPoint(new Vector3(0,0,cam.nearClipPlane);
来计算光轴中心点在屏幕上的位置,可以发现算出来的屏幕位置也为屏幕中心,即(Screen.width/2,Screen.height/2,cam.nearClipPlane);
在NGUI中,2DUI的摄像机是正交摄像机,3D的才是透视摄像机。
同时正交摄像机中
屏幕的右上角对应的世界坐标为:
Vector3 worldPt = cam.ScreenToWorldPoint(newVector3(Screen.width,Screen.height,uiCam.nearClipPlane));
//worldPt = (cam.size*(Screen.width/Screen.height),cam.size,cam.nearClipPlane);
左下角的世界坐标为:
Vector3 worldPt1 = cam.ScreenToWorldPoint(newVector3(0,0,uiCam.nearClipPlane));
//worldPt = (-cam.size*(Screen.width/Screen.height),-cam.size,cam.nearClipPlane);
这里面假设的是相机填满整个屏幕,即相机的Rect属性的w和h均为1
2 实例
2.1 将UI移动屏幕指定像素位置
usingUnityEngine;
usingSystem.Collections; publicclassSetPos:MonoBehaviour { publicint targetX;
publicint targetY; public Camera uiCam;
private UIWidget ui; voidStart() { ui=GetComponent<UIWidget>();
SetScreenPosition(targetX, targetY);
}
voidSetScreenPosition(int x,int y)
{
Vector3 targetPos = uiCam.ScreenToWorldPoint(newVector3(x, y, transform.position.z));
Vector3 dir = targetPos - transform.position;
transform.Translate(dir);
}
voidSetScreenPosition1(int x,int y)
{
//使用线性映射计算目标位置
float w =Screen.width;
float h =Screen.height;
float posX = uiCam.orthographicSize* w / h;
float posY = uiCam.orthographicSize;
float targetX = x ** posX / w - posX;
float targetY = y ** posY / h - posY; Vector3 targetPos1 =newVector3(targetX, targetY,);
Vector3 dir = targetPos1 - transform.position;
transform.Translate(dir);
} }
【Unity3D NGUI】----UI尺寸和位置的调整的更多相关文章
- UI布局只关乎三件事情:尺寸、位置、组织
UI布局只关乎三件事情:尺寸.位置.组织. 组织分为两类: 单元组织: 集合组织: 混合组织.
- Unity3d ngui基础教程
Unity3d ngui基础教程 NGUI教程:步骤1-Scene 1.创建一个新的场景(New Scene).2.选择并删除场景里的MainCamera.3.在NGUI菜单下选择Create a N ...
- Unity3D NGUI自适应屏幕分辨率(2014/4/17更新)
原地址:http://blog.csdn.net/asd237241291/article/details/8126619 原创文章如需转载请注明:转载自 脱莫柔Unity3D学习之旅 本文链接地址: ...
- Unity3D游戏UI开发经验谈
原地址:http://news.9ria.com/2013/0629/27679.html 在Unity专场上,108km创始人梁伟国发表了<Unity3D游戏UI开发经验谈>主题演讲.他 ...
- web前端开发中常用的尺寸和位置
我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SV ...
- Unity3D NGUI学习(一)血条
这次来讲讲Unity3D NGUI这个插件的学习,这个插件是收费的,不过去网上可以下载得很多可用版本.用来做用户的交互UI,学习起来比较简单 第一步,导入NGUI包 http://pan.baidu. ...
- 【转】Unity3D NGUI事件 UIEvents
原创文章如需转载请注明:转载自 脱莫柔Unity3D学习之旅 QQ群:[119706192] 本文链接地址: Unity3D NGUI事件 UIEvents UIEvents-事件系统void OnH ...
- Windows窗口的尺寸和位置
介绍 窗口的大小和位置表示为一个矩形边界,该矩形的坐标是相对于屏幕或父窗口而言的.顶级窗口的坐标是相对于屏幕的左上角而言的,子窗口的坐标则是相对于父窗口的左上角而言.应用程序创建窗口时(CreateW ...
- iPhone/iPad/Android UI尺寸规范 UI尺寸规范,UI图标尺寸,UI界面尺寸,iPhone6尺寸,iPhone6 Plus尺寸,安卓尺寸,iOS尺寸
iPhone/iPad/Android UI尺寸规范 UI尺寸规范,UI图标尺寸,UI界面尺寸,iPhone6尺寸,iPhone6 Plus尺寸,安卓尺寸,iOS尺寸 iPhone界面尺寸 设备 分辨 ...
随机推荐
- [Linux] 002 预备知识
1. 开源软件 (1) 常见开源软件 Apache NGINXTM MySQL PHP Saamba mongoDB Python Ruby Sphinx -- (2) 开源软件的特点 绝大多数开源软 ...
- Emmet-前端开发神器
地址:https://segmentfault.com/a/1190000007812543 Emmet是一款编辑器插件,支持多种编辑器支持.在前端开发中,Emmet 使用缩写语法快速编写 HTML. ...
- 一波骚操作,我把 SQL 执行效率提高了 10,000,000 倍!
作者:风过无痕-唐 http://www.cnblogs.com/tangyanbo/p/4462734.html 场景 我用的数据库是mysql5.6,下面简单的介绍下场景 课程表: create ...
- python------生产者消费者模型 和 管道
一.为什么要使用生产者和消费者? 在线程世界里,生产者就是生产数据的线程,消费者就是消费数据的线程,在多线程开发当中,如果生产者处理速度很快,而消费者处理速度很慢,那么生产者就必须等待消费者处理完,才 ...
- 02 java内存模型
java内存模型 1.JVM内存区域 方法区:类信息.常量.static.JIT (信息共享) java堆:实例对象 GC (信息共享) OOM VM stack:JAVA方法在运行的内存模型 (OO ...
- bzoj1779 [Usaco2010 Hol]Cowwar 奶牛战争(网络流)
1779: [Usaco2010 Hol]Cowwar 奶牛战争 Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 302 Solved: 131[Sub ...
- Mysql命令收集【重要】
1.在linux上获取Mysql服务器状态,及版本: [root@host]# mysqladmin --version 结果信息: mysqladmin Ver 8.42 Distrib 5.7. ...
- javaScript--基础 选择结构
2.短路现象--扩展 当 true 遇到 || , true || 表达式不执行, 右侧的表达式不执行 当false 遇到 && , false && 表达式不 ...
- android&iOS设计分辨率
--- iPhone --- iPhone SE 1136 * 640 2.0875 iPhone 6 1334 * 750 1.778666666666667 iPhone X 2436 * 112 ...
- 2018-4-30-win2d-CanvasRenderTarget-vs-CanvasBitmap
title author date CreateTime categories win2d CanvasRenderTarget vs CanvasBitmap lindexi 2018-04-30 ...