Unity开发-深入理解RectTransform

工作以后自己的时间被狠狠的压缩，回家以后有时候也不太想思考技术性问题，思考了也不一定写总结，所以呢，博客更新起来比较慢，不过最近钻研了很多问题，准备好好总结一下，陆续会把相关的内容发出来分享。。。言归正传，这篇主要说说RectTransform这个在处理UI位置，形变绕不过的组件。

---

新手在制作UI界面的时候经常会有这样疑惑？

为什么ui设置了相对位置以后ins面板上的参数一直变化？ 四个虚线标记有什么用？ 蓝色的点又是什么？ 锚点的作用是什么？ 轴点的作用是什么？
怎么用代码控制ui的位置呢？ position是什么位置 localposition又是什么位置？ rotation的作用是什么？
scale有什么用呢？

---

好了，带着上面的问题，我将借助“快乐风男”的ui详细的介绍RectTransform组件各个参数的意义，并在实例中测试，海陆空全方位更立体更丰满的理解RectTransform。本文从下面几个部分展开。

• RRT面板介绍
  常用参数介绍
  锚点
  轴点
  rotation
  scale
  RRT面板介绍

---

RectTransform面板

第一栏处理当前对象与父亲的相对关系，Unity提供了基本上平面上的各个方向供大家选择，第一栏右边的信息，如当前图中的Left等，是在说明当前UI边界与锚点的位置关系。
第二栏Anchors是锚点，用来约束当前对象的边界信息，min，max表示了按照比例，锚点在父对象中的位置。
第三栏，轴点pivot，用来描述当前对象在处理位置信息时真正的中心，以这个点的坐标做计算。
第四栏，Rotation, 控制当前对象的旋转
第五栏 ,Scale, 根据已经设置好的参数，进行等比例缩放

常用参数讲解

position：当前对象的轴坐标在UI界面中的位置
localposition：当前对象的轴坐标相对父亲轴坐标的位置
scale：当前对象的缩放比例
localscale：当前对象在父对象缩放的基础上再进行缩放的比例
rotation：绕x,y,z坐标轴旋转的角度
localrotation：在父对象旋转的基础上再进行旋转

锚点anchor

这个小雪花就是锚点，有时候会聚在一起，有时候又会分离

仔细观看这个相对位置图就会发现，每一个上面的小点就是锚点集中在一起的位置，当我们选择stretch时，锚点就会分散开。

这个属性框里一会儿posx，Top，一会儿left，right是怎么回事呢？
首先需要明确一个问题，这些都是用来描述当前UI边界与锚点的相对位置关系的，只不过根据选择的模式不同，这些会做相应的变化，这些对应的描述的变化都是描述当前位置关系最合适的参数。

anchor聚集

anchor分散

当锚点聚集在一起时，位置参数由轴点和anchor确定，当锚点分散时，有UI边界和anchor确定。
如上图 anchor聚集，我设置PosX为100，UI快乐风男右移100，图中标记的距离是轴点蓝色圆圈与锚点小雪花的距离。
如上图 anchor分散，设置left，标记的距离是UI左侧边界与右边Anchor的距离。

轴点pivot

轴点就是UI中心的蓝色的圆圈，当我把轴点设置为0.5,0.5时，轴点就会处在UI的中心，pivot的范围为（0-1,0-1），与UI的长宽成比例。
当我们处理position，localpositon，rotation时，都是根据pivot进行计算的。

如上图，左侧为当前UI风男的位置信息，右侧为父对象的信息，可以看到，position和localposition的信息是不一样的，父对象的轴点也在中心，可以看到轴点在承担了计算的基准。

旋转rotation

这个参数控制UI的旋转，但是需要注意的是，这个参数是由四元数控制的，上面的xyz值是经过转换显示出来的欧拉角
有俩个旋转参数，rotation表示按照canvas的坐标记进行旋转，localrotation是在父对象旋转的基础上在进行旋转，所以，B在A中，A旋转30度，B进行设置Rotation是不会变的，但是设置localroation会再进行旋转30度。
旋转的基准是轴坐标。

轴坐标在中心，旋转180

轴坐标在左下角，旋转180

规模比例scale

将UI在X,Y,Z方向上进行缩放

---

转载请注明出处。
本文测试代码地址：https://github.com/buctbamboo/RectTransformTest
欢迎关注知乎Unity专栏：https://zhuanlan.zhihu.com/buctzyn