为什么会卡住
- 没有找到思考路径
- 没有找到关键问题
- anchordPosition 与 LocalPosition之间如何转换?
- anchordPosition对于UGUI是什么?
- localPosition 对于UGUI是什么?
- andhordPosition于localPosition 是什么关系?
以下面几个支点来思考
- RectTransform 解决的是什么问题
- 有哪些概念,元素
- 每个元素逻辑意义是什么
- 每个元素如何计算获得
- 验证
RectTransform 解决的是什么问题
主要解决了两个问题
- RectTransform 设计了一套UI 空间, 通过该空间可以方便组织UI, 该逻辑包含anchord, pivot 等概念
- 在具体实现中,通过将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;
}