[UGUI] Rect Transform

原创 2015年07月10日 12:03:26

两个概念:(Anchor和Pivot)

Anchor

锚点,四个小三角组成,作用是作为定位目标,它们的位置会跟着父级的变动而变动,其定位方式是按照父级的百分比。后面统一称呼为左上、右上、左下、右下四个锚点。

Pivot

轴心,用一个空心小圆圈表示,作为本身的缩放、旋转、定位的中心点/参考点,和三维物体的轴心概念一致。

两种定位方式:固定的和拉伸的

两种定位方式都是针对x和y某个轴向来说的,x和y轴向的定位方式互相独立,可以一致,也可以不一致。

固定的

    锚点在该方向上是重合的,例如,如果x方向上是固定的,那么左上和右上锚点一定是重合的,左下和右下锚点一定是重合的。Y方向上,则左上和左下必定重合,右上和右下必定重合。

    固定定位模式下该方向的定位方式是直接以轴心和锚点的距离来表示的。例如,如果X方向上是固定定位,那么Rect Transform组件中,X方向是用Pos X(表示轴心相对于锚点的X方向的坐标,以像素为单位,是固定值)和Width(物体的宽度,以像素为单位,是固定值)来描述的。需要注意的是,这些值都是固定的像素值。

拉伸的

锚点在该方向上是分离的。

拉伸模式下,该方向的定位方式是以相应的边界和锚点的距离来描述的。

例如,如果x方向上是拉伸模式,那么Rect Transform组件中,X方向上是用Left和Right两个值来描述的。分别表示该物体左侧离左侧锚点的偏移距离和物体右侧离右侧锚点的偏移距离,单位都是像素,都是固定值。Y方向上是用Top和Bottom来描述,意义可以类推。

总结一下,无论是固定模式还是拉伸模式,锚点和父级的定位方式是按百分比计算,而描述物体位置时,无论是固定还是拉伸模式,Left、Right、Top、Bottom以及Pos X、Pox Y都是用像素来描述,是固定的值。
看完上面对定位方式的描述,应该意识到,pivot在拉伸模式下对于定位是没有帮助的(因为是按照边缘来计算的)。另外pivot是可以手工修改位置的。确保上方轴心按钮是Pivot而不是Center,直接拖动pivot的小圈,可以改变pivot位置,pivot在Rect Transform中是用百分比来表示的,左下角是(0,0),右上角是(1,1)。除了手动拖动,也可以直接在Rect Transform的Pivot中直接输入数值。另外注意一点,Pivot是可以跑出物体的边界的。
锚点的调整,可以直接用鼠标分别拖动四个锚点,拖动的同时按住Shift键会同时改变元素本身的大小。也可以直接在Rect Transform中的Anchors中输入数值来调整。

常见的定位组合:

  1. 四个锚点定位在物体的四个角,这样可以保证该物体长宽和位置都始终按照现在相对于父级的百分比来缩放。
  2. 四个锚点定位在父级的四个角,这样可以保证该物体的四个边界(上下左右)依次和父级的四个边界保持固定的距离。
  3. 四个锚点中,左上和左下重合,右上和右下重合,都放在父级的顶部,这样可以保证横向上按比例和父级定位,纵向上和顶部保持固定的距离
    等等

预览功能

当选择某个UI元素时,在Scene窗口直接拖动其他物体的边界,会以预览方式呈现对布局的影响,释放鼠标时会变回原来的尺寸。注意如果拖动的是选择了的物体,会真正的改变物体的尺寸。

预设好的一些定位方式

点击Rect Transform左上角的示意图标,可以打开预设锚点界面,里面有一些预设好的常用定位和锚点组合方式。
上方有提示,按下Shift键可以在改变锚点的同时也改变Pivot,按下Alt键可以再改变锚点的同时也改变自身的位置

版权声明:请尊重原创内容,转载请注明来源及链接。

U3D 新UI系统UGUI 的recttransform一些参数的设置

unity出了一套比之前好用的UI系统,但是也新出了RectTransform,PosX,PosY....,刚开始可能不知道怎么用代码去更改,但是经过许多的实验之后就会明白一些: 1.改变Rec...
  • yangmingh
  • yangmingh
  • 2016年09月07日 09:58
  • 958

【UGUI进阶】RectTransform剖析

RectTransform本文转载自uGUI知识点剖析之RectTransform一、基本要点RectTransform继承于Transform,在 Transform 基础上,RectTransfo...
  • RICKShaozhiheng
  • RICKShaozhiheng
  • 2016年06月02日 18:07
  • 7327

【Unity3D_UGUI速成班】——05.Rect Transform

这一节将主要讲述所有UGUI物体的排布属性RectTransform,熟练运用这个组件,能够让你的UGUI Demo永远排布美观。...
  • xxxhhhyxy
  • xxxhhhyxy
  • 2017年04月03日 16:52
  • 463

(九)unity4.6学习Ugui中文文档-------参考-UGUI Rect Transform

大家好,我是孙广东。   转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unityma...
  • u010019717
  • u010019717
  • 2014年09月03日 07:46
  • 7107

ugui在运行时改变RectTransform的大小

在代码中动态改变RectTransform大小的方法如下所示: 1:直接对sizeDelta属性进行赋值,其中X和Y可以对应理解成width和height var rt = gameObject....
  • BeiFuDeNvWang
  • BeiFuDeNvWang
  • 2016年03月09日 20:11
  • 7710

Unity进阶技巧 - RectTransform详解

前言 最近要做UI,有时候需要在代码中调整改变UI控件的属性,比如位置、大小等,然而在NGUI里面,控制UI控件的位置等属性的是RectTransform这个组件,这个组件继承自Transform组...
  • yuanerjiang
  • yuanerjiang
  • 2017年08月20日 20:43
  • 219

Unity UGUI 的RectTransform参数的设置

http://wuxk2014.lofter.com/post/339d0e_5abfe8c nity出了一套比之前好用的UI系统,但是也新出了RectTransform,Pos...
  • poem_of_sunshine
  • poem_of_sunshine
  • 2016年12月29日 14:51
  • 5904

关于UGUI中RectTransform组件的获取问题

之前一直在抱怨UGUI的RectTransform需要格外获取,今天偶然想到既然RectTransform是继承自Transform,那么可不可以直接进行类型转换得到呢?? 经过测试发现,使用tran...
  • qq_28768929
  • qq_28768929
  • 2016年09月12日 14:49
  • 1728

UGUI 计算RectTransform的Bounds

NGUIMathf里有个calculateRelativeWidgeBounds(Transform content) 的函数 用来计算 content下(包括content)的bounds  UGU...
  • mutou_222
  • mutou_222
  • 2015年08月18日 14:19
  • 1586

UGUI技巧

UGUI技巧 Text中的可以单独指定某些文字的颜色,只需将想要变色的文本放在之间即可,如“吃橙色物品有机会获得红色宝石”,同样适用于NGUI。两张图片,如头像框,头像在...
  • zhaoguanghui2012
  • zhaoguanghui2012
  • 2016年09月13日 17:11
  • 1580
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:[UGUI] Rect Transform
举报原因:
原因补充:

(最多只允许输入30个字)