Anchor:锚点
应用在父子上,子物体的位置是根据父物体的变化而变化的,而子物体和父物体联系的桥梁就是Anchor。
Pivot :自身轴点
Pivot中心点,就是该UI元素旋转缩放的中心点,左下角为(0,0)右上角为(1,1)
AnchoredPosition3D:
public Vector3 anchoredPosition3D { get; set; }
作用是:改变RectTransform的PosX,Y,Z(是以设置的 anchors 为中心的,默认如果不设置 anchors 中心点是在屏幕中间)
绝对布局(有锚点时)
所有锚框同在一个点时
PosX,PosY,PosZ 分别表示UI自身的中心点所距离锚点的X、Y和Z轴的距离
Width,Height 分别表示UI自身的宽度和高度数值
——>无论父物体怎么变化,子物体宽度和高度是恒定不变的。如下图所示设置UI位置的X和Y值
rectTransform.anchoredPosition = new Vector3(200, 400);
rectTransform.anchoredPosition3D = new Vector3(200, 400);
相对布局(有锚框时)
当四个锚框分散开
Left,Top,Right,Bottom分别表示UI自身相对于自身锚框的距离,Left为UI自身距离左侧锚框的距离,其他同理(Top距离上侧,right距离右侧,bottom距离下侧)
( 相当于设置的offsetMin和offsetMax的值 )
——>无论父物体怎么变化,子物体相对于父对象所占的比例不变,也就说子物体会跟随父对象变化。如下图所示
AnchorMin、AnchorMax:
AnchorMin:表示锚点的X和Y的最小值
rectTransform.anchorMin = new Vector2(0.3f, 0.3f); 范围(0-1)
AnchorMax:表示锚点的X和Y的最大值rectTransform.anchorMax = new Vector2(0.7f, 0.7f); 范围(0-1)
表示的是该点所在位置占父物体大小的比例,无论父物体怎么变大缩小,子物体所占的比例不变。 (相当于有锚框)
效果如下图所示
offsetMin、offsetMax:
1、offsetMin:表示UI距离左边和底边的距离
可以这样记:如果向锚点范围里移动就是正值,相反向锚点范围外移动就是负值
rectTransform.offsetMin = new Vector2(40f, 40f);
2、offsetMax: 表示UI距离右边和上边的距离
使用代码改变时与在Inspector手动修改相反
可以这样记:如果向锚点范围里移动就是负值,相反向锚点范围外移动就是正值(与上相反)
rectTransform.offsetMax = new Vector2(-40f, -40f);
sizeDelta
sizeDelta = offfsetMax - offsetMin;
rectTransform.sizeDelta = new Vector2(400,300);
1、有锚框时,表示UI四边相对于父对象四边的距离。
2、没锚框时,表示UI的Width和Height。
RectTransform
private RectTransform rectTransform;
transform.position : UI的屏幕坐标
transform.LocalPosition : UI相对于父级位置的坐标
rectTransform.position : UI的屏幕坐标
rectTransform.rect.width : UI的总长度
rectTransform.rect.height : UI的总宽度
rectTransform.piovt.x/y : UI中心点的x或y
限制子UI_A 在父级UI_B 里的活动的范围
UI_A在UI_B中移动,并且不能超出UI_B的范围,我们需要求出UI_A可以移动到的边界值(最大最小值),包括X的边界值和Y的边界值。根据图中所示,UI_A可以移动到的最大边界位置,图中粉色范围就是UI_A可以任意移动的位置,而绿色边界就是边界值。可根据以下方法求出边界值然后进行移动限制
最小x坐标 = B当前x坐标 - B轴心距离B左边界的距离 + A轴心距离A左边界的距离
minx = B.rectTransform.position.x
- B.rectTransform.pivot.x * B.rectTransform.rect.width * canvas.scaleFactor
+ A.rectTransform.pivot.x * A.rectTransform.rect.width * canvas.scaleFactor
最大x坐标 = B当前x坐标 + B轴心距离B右边界的距离 - A轴心距离A右边界的距离
minx = B.rectTransform.position.x
+ (1-B.rectTransform.pivot.x) * B.rectTransform.rect.width * canvas.scaleFactor
- (1-A.rectTransform.pivot.x) * A.rectTransform.rect.width * canvas.scaleFactor
最小y坐标 = B当前y坐标 - B轴心距离B下边界的距离 + A轴心距离A下边界的距离
最大y坐标 = B当前y坐标 + B轴心距离B上边界的距离 - A轴心距离A上边界的距离