UGUI简述

  UGUI主要提供了两个能力

  1. UI元素的渲染与适配(其中UI元素的Mesh中的position信息就是通过RectTransform生成的,本文重点)
  2. 设备事件的响应与处理(EventSystem系统,及封装的Button、Toggle等常用组件)

RectTransform序列化的内容

RectTransform简析-LMLPHP
  也就是说RectTransform是通过这四个属性来确定RectTransform的四个顶点的(position)。

如何确定顶点信息

额外属性的含义

  1. anchorMin:左下角锚点距离父节点左下角的标准距离(父节点所确定四个顶点的矩形的左下角看作(0,0),右上角看作(1,1))。
  2. anchorMax:右上角距离父节点左下角的标准距离。
  3. pivot:中心点距离自身所确定的矩形的左下角的标准距离。
  4. sizeDelta:自身所确定的矩形长宽相对于anchorMin、anchorMax所确定的矩形的偏移量(偏移时会按照pivot的比例来偏移,举个例子:pivot是(0.3,pY),sizeDelta是(100, sY),那么自身的矩形左下角会相对于anchorMin负向偏移30,右上角会相对anchorMax正向偏移70,整体将矩形扩大了100。y轴一样)。
  5. anchoredPosition:自身矩形的中心点相对于anchorMin、anchorMax所确定的矩形中心点的位置(或者也可以理解为偏移量,下面会说)

如何通过这几个参数来确定自身的矩形

  通过一个例子来说明一个RectTransform的形状是如何通过上面的几个参数确定的。
  父节点信息
RectTransform简析-LMLPHP
  子节点信息
RectTransform简析-LMLPHP

1.确定anchorMin、anchorMax代表的矩形

  父节点的长宽为(1920,1080),子节点的anchorMin为(0.2,0.3),所以如果把父节点矩形的左下角看作原点,那么anchorMin所代标的点的坐标即为(1920 * 0.2,1080 * 0.3),也就是(384,324)。同理,得到anchorMax代表点的坐标(1152,972)。
  也就是一个左下角坐标为(384,324),长宽为(1152 - 384,972 - 324),即(768,648)的矩形。
  用RectTransform来表示的话就是下图这样,anchorMin、anchorMax、pivot都为(0,0),Pos为(384,324),长宽(768,648)。
RectTransform简析-LMLPHP

2.通过sizeDelta和pivot确定自身矩形的大小

  因为sizeDelta是(100,300),所以接下来对上一步确定的矩形的左下角平移(-100 * 0.4, -300 * 0.5),平移后为(344,174)。右上角的点平移(100 * 0.6, 300 * 0.5),平移后为(1212,1122)。
  用RectTransform来表示的话就是下图这样,anchorMin、anchorMax、pivot都为(0,0),Pos为(344,174),长宽(868,948)。
RectTransform简析-LMLPHP

3.通过anchoredPosition对自身进行平移

  把上一步确定的矩形平移子节点的anchoredPositino(60,-200)。
  用RectTransform来表示的话就是下图这样,anchorMin、anchorMax、pivot都为(0,0),Pos为(404,-26),长宽(868,948)。
  这个RectTransform所表示的矩形正好可以和子节点的重合,虽然参数不一样。
RectTransform简析-LMLPHP

注意

  严格来说并不是左下角或者右上角,而是指的anchorMin、anchorMax所确定的点。向左、向右指的是父节点空间内的负方向和正方向。但是因为绝大多数情况下anchorMin的xy坐标会小于anchorMax的xy坐标,这样才是一个几何意义明显的矩形。

RectTransform的Inspector面板

RectTransform简析-LMLPHP

  1. 就是anchorsMin、anchorsMax、pivot,上面已经说过了,这理解不说了。
  2. 是就是Transform的localRotaion和localScale属性,也没啥好说的。
  3. 这四个数值是对sizeDelta和anchoredPosition的封装。让开发者可以更直观的进行位置和大小的调整。
    具体来说就是左侧的两个值代表了sizeDelta和anchoredPosition的x值,右侧的两个值代表了y值。
    下面就来说一下左边两个值的具体含义,当anchorsMin和anchorsMax的x值相等时,也就是这两个锚点的x坐标重合。这个时候这两个值会变成PosX和Width,其实就是anchoredPosition.x和sizeDelta.x的几何意义。
    anchoreMin和anchoreMax的x值不等时,也就是这两个锚点的x坐标分离时。会变成left,right。分别代表子节点左侧、右侧相对于anchoredMin、Max确定的矩形向内的偏移量,十分直观。其实还是对anchoredPosition.x和sizeDelta.x的封装。
    右边的两个值就对应anchoredPosition.y和sizeDelta.y。
  4. 就是localPosition的z值。在Inspetor中,把localPostion.xy隐藏了,只暴露了z值出来,因为localPositino的xy值一般不会主动去修改,是通过RectorTranform中这几个额外的属性动态算出来的。
  5. 一些预设的常用值,纵向代表y,横向代表x。
    RectTransform简析-LMLPHP
  6. 这两个按钮是蓝图模式和原始模式,蓝图模式就是在Scene中的那个小框是把RectTranform包起来,还是展示通过这几个额外属性确定的矩形(不考虑旋转和缩放)
    RectTransform简析-LMLPHP
    RectTransform简析-LMLPHP
    原始模式就是在调整anchors和pivot的时候是否需要动态调整sizeDelta和anchoredPosition来保持该节点的矩形区域不变。选中时代表不动态调整。

localPosition与anchoredPosition的关系

  localPosition就是tranform所确定的坐标系原点在父tranform所确定的坐标系下的位置。在RectTransform中,自身所确定的坐标系原点位置在RectTransform确定的矩形的中心。
  所以在RectTranform下,localPosition也可以理解为自身矩形与父节点确定的矩形中心的相对位置(偏移量)。

localPosition与anchoredPosition的转换

  先建立以父节点左下角为原点的坐标系o。
  定义:
  childPivotPos代表子节点中心点在o中的坐标。
  parentPivotPos代表父节点中心点在o中的坐标。
  anchorsPivotPos代表子节点anchors确定的矩形的中心点在o中的坐标。
  则有:
  localPosition.xy
  = childPivotPos - parentPivotPos
  = (childPivotPos - anchorsPivotPos) + (anchorsPivotPos - parentPivotPos)
  = anchoredPosition + (anchorsPivotPos - parentPivotPos)
  = anchoredPosition + anchorsPivotPos相对于父节点中心的偏移量
  接下来就可以实际上进行计算了。
  定义:
  pSize代表父节点的长宽(除了根Canvas外,其他所有的RectTransform所确定的矩形都是依赖于父节点的。所以我们跳过父节点矩形的计算,直接用rect属性获取父节点长宽)。
  pPivot代表父节点的pivot。
  cAnchorsMin、cAnchorsMax、cPivot代表子节点的anchorsMin、anchorsMax、pivot。
  则有:
  parentPivotPos = Vector2.Scale(pSize, pPivot)
  anchorsPivotPos = Vector2.Scale(pSize, cAnchorsMin) + Vector.Scale(pSize, (cAnchorsMax - cAnchorsMin) * cPivot)
  anchorsPivotPos - parentPivotPos = Vector2.Scale(pSize,cAnchorsMin + (cAnchorsMax - cAnchorsMin) * cPivot - pPivot)
  简单测一下,随便调调父节点和子节点的属性。

public class PositionTest : MonoBehaviour
{
    public Vector3 localPosition;
    public Vector2 anchoredPosition;
    public Vector3 delta;
    public Vector3 calculation;

    // Update is called once per frame
    void Update()
    {
        var parentRectTrans = (transform.parent as RectTransform);
        var rectTrans = transform as RectTransform;
        localPosition = rectTrans.localPosition;
        anchoredPosition = rectTrans.anchoredPosition;
        //差值
        delta = (Vector2)localPosition - anchoredPosition;
        //通过公式计算的插值
        calculation = Vector2.Scale(
            parentRectTrans.rect.size,
            rectTrans.anchorMin + (rectTrans.anchorMax - rectTrans.anchorMin) * rectTrans.pivot - parentRectTrans.pivot
        );
    }
}

RectTransform简析-LMLPHP

09-27 08:20