RectTransform继承自Transform,用于描述矩形的坐标(Position),尺寸(Size),锚点(anchor)和中心点(pivot)等信息,每个2D布局下的元素都会自动生成该组件。当我们在处理UI组件时,往往容易混淆localPosition与anchoredPosition(3D)的概念和用法,以下对上述两个概念做一些解析和说明。注:不管是localPosition还是anchoredPosition(3D),以下都只在2D布局下进行说明,即只体现x轴与y轴的坐标,z轴坐标忽略。

先描述两个概念:

RectTransform的localPosition与anchoredPosition(3D)的区别-LMLPHP

  1.中心点(Pivot):是矩形旋转的轴心点的位置,Pivot值可(0,0)到(1,1)进行调整,(0,0)表示矩形自身左下角位置,(1,1)右上角位置。中心点描述的是矩形自身内部的属性。

RectTransform的localPosition与anchoredPosition(3D)的区别-LMLPHP

  2.锚点(Anchors):在场景视图中表现为4个三角图形,4个锚分别对应矩形的4个顶点。矩形自身不变的情况下,当锚点定位确定后,每个锚与矩形顶点之间的相对位置是不变的(锚与顶点之间的连线可以想象成一根固定的木棍),这样即确定了对应矩形顶点与其父节点的相对位置关系。Anchors值Min和Max,分别表示左下锚点和右上锚点的位置。锚点描述的是矩形与父节点的关系属性。

开始我们的测试:

RectTransform的localPosition与anchoredPosition(3D)的区别-LMLPHP

先确定两个矩形。父亲:白底矩形,大小200x200。孩子:红底矩形,大小100x100。当前两个矩形中心点(Pivot)都是(0.5,0.5),锚点(Anchors)重合(0.5,0.5)。

此时的子矩形的localPosition与anchoredPosition值(以下简称为测试目标值)为localPosition:(0.0, 0.0, 0.0) anchoredPosition:(0.0, 0.0)  。

RectTransform的localPosition与anchoredPosition(3D)的区别-LMLPHP

测试1:父亲不变,孩子锚点(Anchors)设置为父亲矩形左上角。此时测试目标值为localPosition:(0.0, 0.0, 0.0) anchoredPosition:(100.0, -100.0)  。

RectTransform的localPosition与anchoredPosition(3D)的区别-LMLPHP

RectTransform的localPosition与anchoredPosition(3D)的区别-LMLPHP

测试2:父亲不变,孩子锚点(Anchors)设置为父亲矩形边右中心。此时测试目标值为localPosition:(0.0, 0.0, 0.0) anchoredPosition:(-100.0, 0.0)  。

RectTransform的localPosition与anchoredPosition(3D)的区别-LMLPHP

RectTransform的localPosition与anchoredPosition(3D)的区别-LMLPHP

测试3:父亲不变,孩子锚点(Anchors)设置为父亲矩形左下顶点和右下顶点。此时测试目标值为localPosition:(0.0, 0.0, 0.0) anchoredPosition:(0.0, 100.0)  。

RectTransform的localPosition与anchoredPosition(3D)的区别-LMLPHP

RectTransform的localPosition与anchoredPosition(3D)的区别-LMLPHP

测试小结1localPosition与自身锚点无关。anchoredPosition会随锚点的设置不同而改变。

测试4:父亲不变,孩子锚点不变(以最开始锚点在矩形中央为基准,后省略),孩子中心点设置为左下角位置(0,0)。测试目标值为localPosition:(-50.0, -50.0, 0.0) anchoredPosition:(-50.0, -50.0)  。注:图中孩子中心点已与孩子矩形左下顶点重合。

RectTransform的localPosition与anchoredPosition(3D)的区别-LMLPHP

RectTransform的localPosition与anchoredPosition(3D)的区别-LMLPHP

测试5:父亲不变,孩子中心点设置为矩形右边中心位置(1,0.5)。测试目标值为localPosition:(50.0, 0.0, 0.0) anchoredPosition:(50.0, 0.0)  。

RectTransform的localPosition与anchoredPosition(3D)的区别-LMLPHP

RectTransform的localPosition与anchoredPosition(3D)的区别-LMLPHP

测试小结2localPosition与自身中心点应该有关系。anchoredPosition也会随中心点改变而变化。

 

测试6:父亲中心点设置为左下角位置(0,0),孩子不变。测试目标值为localPosition:(100.0, 100.0, 0.0) anchoredPosition:(0.0, 0.0)  。

RectTransform的localPosition与anchoredPosition(3D)的区别-LMLPHP

RectTransform的localPosition与anchoredPosition(3D)的区别-LMLPHP

测试7:父亲中心点设置为矩形上边中心位置(0.5,1),孩子不变。测试目标值为localPosition:(0.0, -100.0, 0.0) anchoredPosition:(0.0, 0.0)  。

RectTransform的localPosition与anchoredPosition(3D)的区别-LMLPHP

RectTransform的localPosition与anchoredPosition(3D)的区别-LMLPHP

测试小结3localPosition与父矩形中心点也有关系。而anchoredPosition不随父节点中心点变化而变化。综合小结1和2,localPosition与自身的中心点(Pivot)和父节点矩形的中心点(Pivot)有关,通过上述值可以尝试得出,localPosition为自身中心点(Pivot)到父节点矩形中心点(Pivot)的相对位置。可以验证一下:

测试8:父亲中心点设置为矩形右边中心位置(1,0.5),孩子中心点设置为矩形左上位置(0,1)。测试目标值为localPosition:(-150.0, 50.0, 0.0) anchoredPosition:(-50.0, 50.0)  。完成测试小结3中的验证。

RectTransform的localPosition与anchoredPosition(3D)的区别-LMLPHPRectTransform的localPosition与anchoredPosition(3D)的区别-LMLPHPRectTransform的localPosition与anchoredPosition(3D)的区别-LMLPHP

结论1:localPosition为自身矩形中心点(Pivot)与其父节点矩形中心点(Pivot)的相对位置坐标,与自身锚点(Anchors)无关。

 

猜想:由测试小结1,2,3得出了anchoredPosition与自身中心点(Pivot)及锚点(Anchors)有关,而与父节点无关。那么anchoredPosition描述的会不会是中心点(Pivot)与锚点(Anchors)之间的位置关系?测试1和测试2的结果确实可以看出anchoredPosition为中心点到锚点的相对位置坐标,但上述测试锚点为重合情况。如测试3的中锚点不重合情况,又该如何理解呢?4个锚点可以构成一个矩形,那anchoredPosition会不会是矩形中心点与与锚点中心点之间的相对坐标?测试1,2,3符合anchoredPosition与中心点与左下锚点的猜想。我们继续测试验证:

测试9:父亲不变,孩子中心点不变,4个锚点分别为父矩形4个顶点。测试目标值为localPosition:(0.0, 0.0, 0.0) anchoredPosition:(0.0, 0.0) 。

RectTransform的localPosition与anchoredPosition(3D)的区别-LMLPHP

RectTransform的localPosition与anchoredPosition(3D)的区别-LMLPHP

测试10:父亲不变,孩子中心点不变,4个锚点调整为下图所示。测试目标值为localPosition:(0.0, 0.0, 0.0) anchoredPosition:(75.0, -75.0)  。

RectTransform的localPosition与anchoredPosition(3D)的区别-LMLPHP

RectTransform的localPosition与anchoredPosition(3D)的区别-LMLPHP

测试小结4:上述验证测试也符合anchoredPosition为矩形中心点与与锚点中心点之间的相对坐标猜想。

 

结论2:anchoredPosition为矩形中心点与与锚点中心点之间的相对坐标。

 

总结:localPosition为自身矩形中心点(Pivot)与其父节点矩形中心点(Pivot)的相对位置坐标,与自身锚点(Anchors)无关。anchoredPosition为矩形中心点(Pivot)与与锚点中心点之间的相对坐标,与父节点无关。

05-21 18:50