美文网首页
UGUI RectTransform详解

UGUI RectTransform详解

作者: silekey | 来源:发表于2021-11-23 18:25 被阅读0次

    为什么会卡住

    • 没有找到思考路径
    • 没有找到关键问题
    1. anchordPosition 与 LocalPosition之间如何转换?
    2. anchordPosition对于UGUI是什么?
    3. localPosition 对于UGUI是什么?
    4. andhordPosition于localPosition 是什么关系?

    以下面几个支点来思考

    1. RectTransform 解决的是什么问题
    2. 有哪些概念,元素
    3. 每个元素逻辑意义是什么
    4. 每个元素如何计算获得
    5. 验证

    RectTransform 解决的是什么问题

    主要解决了两个问题

    1. RectTransform 设计了一套UI 空间, 通过该空间可以方便组织UI, 该逻辑包含anchord, pivot 等概念
    2. 在具体实现中,通过将RectTransform 转换为transform ,复用并实现UI 具体显示的功能。我们知道transform 只包含点的概念,但可以旋转,有父子节点转换等功能,通过将参数转换为具体的localPosition, 实现了这些功能。其效果类似于不同的空间变换。

    为什么理解起来困难?
    因为UGUI 对用户的操作部分为了易用性,又隐藏了一些很重要的细节, 下面是包含部分的

    包含哪些部分

    具体功能 描述 定位 读写
    Anchor 描点 直接使用 读写
    Pivot 轴心 直接使用 读写
    anchoredPosition Pivot 的位置 隐藏在代码中 读写
    sizeDelta 对高宽进行调整 隐藏在代码中 读写
    rect 当前节点所表示的区域 隐藏在代码中
    Anchor Reference Point 描点参考位置 缺失的重要概念
    PosX, PosY UI位置 只是方便用户操作读
    Left, Right, Top, Buttom 与描点对比的修正 只是方便用户操作
    Width 只是方便用户操作
    Height高 只是方便用户操作

    其实整个RectTransform 的概念数据是靠上面的几个读写功能实现的,下面对每个部分进行详细解释。 上面读写的数据都是RectTransform 存储的核心数据, 其他数据都是在这基础之上可计算获得。 可以看到整个RectTransform 的核心是围绕Anchor与Pivot展开,Anchor与Pivot都是将UI 的 RECT 归一化为 [0-1] , 方便做UI 的编辑

    Anchord

    锚点 AnchordMin于AnchorMax其值是可以表示为一个RECT组成的区域。 UI都是以 RECT 来组织的,Anchord 描述了在父节点中将UI 看成[0,0,1,1] 组成的矩形区域,在其之上进行锚定,锚定的结果也是一个RECT (PS. RECT 内容可以看成[minx,minY, Width, Height])

    Pivot

    轴心, 其值是一个点,表示该图像的起始位置(0,0)点和旋转轴 也是以 [0, 1] 组成

    Anchor Reference Point

    描点参考位置, 来源在Unity 的文档中。
    实际是Anchor 锚定的矩形区域的中心点, 这个没有在代码里直接标识出来,实际在文档里是有这个概念。
    当Anchord 中的Anchord Min 与 Anchord Max 一致的时候, Anchor Reference Point 指向的就是Anchord Min那个点。 当Anchord Min 与 Anchord Max 两个点组成了一个矩形区域,Anchor Reference Point 指的就是这个矩形区域的中心点

    sizeDelta

    对由Anchor 框出的矩形进行偏移, width 与height 就是依据该值来进行调整

    anchoredPosition

    说的是Pivot的像素位置, 一个相对于 anchor reference point 所在的位置
    原文:
    The position of the pivot of this RectTransform relative to the anchor reference point.

    localPosition

    localPosition就是pivot在transform中的位置
    再根据上面anchoredPosition的解释可以知道
    Pivot 的在UI父节点中的位置, 是 Anchor Reference Point + anchoredPosition
    所以 anchoredPosition于localPosition 都是描述Pivot的位置,只是参考点不同。

    获得公式
    localPosition = Anchor Reference Point + anchoredPosition
    = (Anchor - Parent Pivot) * (parent Width, parent Height) + anchoredPosition

    其中关键是
    Anchor Reference Point 的计算 = (Anchor - Parent Pivot) * (parent Width, parent Height)
    是为什么?

    分析:
    Parent Pivot 是父节点在矩形区域中的起点, 矩形是以(0,0, 1,1)定义的矩形区域
    Anchor 的描述的也是父矩形区域的位置
    他们都是同一个坐标系统:父节点所描绘的一个矩形区域.

    那么Anchor 相对于Parent Pivot 的偏移量就是 Anchor – Parent Pivot
    得到的就是 Anchor Reference Point 以父节点得描述的UI 空间。
    然后乘以 父节点的 宽高, 就得到实际像素位置。
    知道了这一切,localPosition的计算就很容易了

    Rect

    描述的是RECT区域在当前UI坐标系下的区域。

    只和本UI的Width, Height , Pivot 相关.

    总结公式

    localPosition = (Anchor - Parent Pivot) * (parent Width, parent Height) + anchorPosition

    rect = (– PivotX *Width, PivotY *Height, Width, Height)
    (minx, miny, width, height)

    Rect in parent = rect + localPosition

    验证

    计算localPosition

    Parent
    Pivot = (0.5 , 0) , sizeDelta = (200, 100)

    Local
    Anchord = 0.5, 1
    Pivot = 0, 0
    AnchordedPosition = 0,0

    localPosition = ((0.5, 1) – (0.5,0))* (200, 100) + 0,0
    = (0,1) * (200, 100) + 0,0
    = (0, 100) + 0,0
    实际是 x=0, y=100,z=0

    总结

    anchordPosition对于UGUI是什么?
    localPosition 对于UGUI是什么?
    andhordPosition 的关系是什么?

    localPosition = Anchor Reference Point + anchordPosition
    anchordPosition 是相对于参考点 Anchor Reference Point 的偏移
    localPosition 是相对于父节点 0,0点的偏移.

    localPosition与anchoredPosition 都是描述pivot的位置信息。
    只是使用的坐标系不同,localPosition使用的父节点坐标系,anchoredPosition是用的是UI设计参考的坐标。

    localPosition于anchoredPosition互相转换的伪代码如下

           Vector3 AnchordToLocalPosition(Vector2 pos)
            {
                if (_parentRectTransform != null)
                {
                    // 计算参考点相对于 父节点的位置
                    var anchorPos = (anchorReferencePoint - _parentRectTransform.pivot);
                    
                    // 转换为像素
                    anchorPos *= _parentRectTransform.size;
                       
                    
                    return anchorPos + pos;
                }
    
                return Vector3.zero;
            }
    
            // 通过transform 相对坐标计算anchordPosition 位置
            Vector2 LocalPositionToAnchord(Vector3 pos)
            {
                if (_anchoredPosition != null)
                {
                    var anchorPos = (anchorReferencePoint - _parentRectTransform.pivot);
                    anchorPos *= _parentRectTransform.size;
    
                    return ((Vector2)pos - anchorPos);
                }
    
                return Vector2.zero;
            }
    

    相关文章

      网友评论

          本文标题:UGUI RectTransform详解

          本文链接:https://www.haomeiwen.com/subject/gynwtrtx.html