[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键可以再改变锚点的同时也改变自身的位置

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

相关文章推荐

UGUI学习笔记2——Rect Transform

Rect Transform

Unity3D UGUI中Rect Transform的特性

Rect TransformRect Transform 是 2D 与 3D 图形元素空间位置组件,继承自transform(当手动移除后就会还原成transform)。主要用来设置UI界面中元素的大...

UGUI学习(二):Scroll Rect 滚动区域

Description(API) content content其实就是你要滚动的区域。注意一点:这个区域(ScrollPanel)最好是挂载Scroll Rect脚本物体(BG)...

unity 3D之ugui Scroll Rect拖拽消息冲突问题

转自: http://www.cnblogs.com/zhuhongjongy/p/5441069.html ugui的诞生很大程度的改变了NGUI一手遮天的现状。但是Ugui也由于...

GDI+丰富RECT

  • 2007年12月05日 17:14
  • 3KB
  • 下载

【OpenCV】cv::Rect矩形类用法

cv::Rect矩形类用法

ProtobufTool_Rect

  • 2017年04月24日 10:21
  • 4.24MB
  • 下载

Rect类的使用

  • 2015年03月18日 11:41
  • 1.97MB
  • 下载

OpenCv学习笔记(三)---OpenCv中基本数据类型--Point,Size,Rect,Scalar,Vec3b类类型的详细解释及其OpenCv中源代码的详细分析

/********************************************************************************************* 程序功能:...
  • maweifei
  • maweifei
  • 2016年04月23日 17:23
  • 18196
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:[UGUI] Rect Transform
举报原因:
原因补充:

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