Unity 锚点 Anchors

锚点介绍

锚点是Rect Transform组件中的属性，用于描述当前物体相对于父物体的对齐方式。

选中一个UI元素，就会显示其父物体的矩形框以及相对于父物体的锚点。

锚点只能位于父物体的矩形框之内。

锚点表现为四个相对出现的小三角形， 它们时而分开，时而合并。

可以是一个点、一条线，或者是矩形。

锚点的基本操作

拖动其中一个角，可以改变它的大小

先按住 Command 或 Alt ，再拖动一个角，可以同时对四个角进行整体移动  

先按住Shift，再拖动一个角，可以在改变锚点的同时改变UI的位置

锚点的预设方案

在Rect Transform中提供了9+7种锚点的预设方案

选择对应的方案，会按照其图示在父框中设定锚点的位置

按下Shit，可以按照图示，同时在子框中设置轴心的位置

按住Alt，会将当前物体在相应方向与父物体的边界对齐

注意任何布局都是相对于父窗口矩形的

①对于四个锚点在同一点的，有9种预设方案

比如锚点居中：

将锚点的位置设置为其父窗口的几何中心（不是父窗口的中心点Pivot） 

其他预设方案亦同：锚点居右、锚点居左、锚点居上、锚点居下、锚点居右上...

②对于四个锚点不在同一点的，有7种拉伸类型（stretch）的预设方案：

仅调整锚点的预设，不按Shift或Alt，只会改变子物体相对于父物体的锚点位置，不会修改UI和轴点的位置。

UI挂件相对于锚点的定位方式

对于锚点构成的矩形框：

①当四个锚点均在同一点时，用轴点（Pivot）到锚点的水平距离和垂直距离来定位

面板中属性为Pos X 、Pos Y、Width、Height

②当四个锚点不在同一点时：

A.如果是文字，以四个点的几何中心作为原点来定位

面版中属性为Pos X 、Pos Y

B.如果是图片，以到锚点矩形框的四周距离来定位

面板中属性为Left /Pos X、PosY/ Top 、Right、Bottom

锚点的定位方式（2）

如果在某一方向上，锚点两两重合，那么就用轴点到锚框中心的距离、以及在该方向的长度来定位。改变父物体时，在该方向上不会影响子物体，因为它的长度已经定了。

如果在某一方向上，锚点不重合，就用到对应边界的距离来定位。改变父物体时，会在当前方向改变子物体，因为它是用到边界的距离来定位的。

例如：

在X方向上，锚点不重合，就用该物体的边界到父物体的对应边界的距离来定位。

在Y方向上，锚点重合，就用该物体轴点到锚框中心的距离、以及在该方向的长度来定位。

 

在9种预设模式中，当前物体是用轴点到锚框中心的距离来定位的。

PosX、PosY是轴点相对于锚点的位置。更改轴点的时候，PosX、PosY也是会变的。

 在四周拉伸模式下，四个值是当前物体的边界到父物体对应边界的距离。在父物体被改变时，子物体的大小会随之变化。

在上下拉伸模式下，POSX是轴点在水平方向上相对于锚框中心的距离。Top、Bottom是上下对应边界的距离。Width是当前物体要保持的宽度。在父物体被改变时，子物体的上下边界会随父物体改变，但到锚点的距离以及自身的宽度不会变。

在左右拉伸模式下，POSX是轴点在竖直方向上相对于锚框中心的距离。Left、Right是左右对应边界的距离。Height是当前物体要保持的高度。在父物体被改变时，子物体的左右边界会随父物体改变，但到锚点的距离以及自身的高度不会变。

 

如果四个点位于父物体的框的四个顶点，那么这种布局方式是四向拉伸。

如果两个点位于父物体的框的顶点时，它们的连线方向就会变成拉伸。而其余方向为Custom。

当锚点在某方向上，既不完全撑满父框，又不两两重合时，就是Custom。

在Custom下，是用到对应边界的距离来定位的。

锚点的自定义

如果想自定义锚点，不必对锚点预设进行任何修改

只需要修改锚点的参数即可

如果需要将四个锚点合并为一个锚点，按照比例挂在屏幕中的某个位置，只需要在最大、最小处的X、Y中分别填写相同的值即可 

 

该值的原点（0，0）是父物体矩形的左下角

（1，1）则对应父物体矩形的右上角

此时，对于X轴来说，锚点位于父物体（画布）的中部

对于Y轴来说，锚点位于画布下部的25%处

如果想让UI无论合适都位于锚点所在的位置

只需要将Rect Transform上的相对锚点位置清空为0即可

UI-图片的拉伸

对于一个UI类型的图像：

如果锚点集中于一点，图像将以该点为原点进行定位。

如果锚点并非集中于一点，则UI将会按照距离锚点的预设距离进行拉伸。

如果是文字，即便锚点分散于四周，也不会进行任何拉伸，而是仍然按照锚点矩形框的几何中心进行定位。

此外，官方文档讲述的也很详细，可以从头到尾把UI部分仔细看看：

https://docs.unity3d.com/cn/current/Manual/UISystem.html