UGUI锚点的理解(Anchors)

在UGUI每个组件中，都会有如下图所示的可移动图形，四个小三角形顶点重合并两两相对的点，我们称之为锚点(Anchors)

本文中所提节点默认为根节点

作用

• 锚点实现了组件的屏幕自适应
• 锚点也可以使组件固定在某个区域内

在理解锚点之前，我们先试着了解一下，什么是Anchors也就是什么是我们所谓的锚。

锚一般指船锚，是锚泊设备的主要部件。铁制的停船器具，用铁链连在船上，把锚抛在水底，可以使船停稳。

由此我们不难理解
现实的锚实现了与船舶的连接，将其固定在某一区域
而类比UGUI中的锚点，会发现二者极其相似，
UGUI中的四个锚点，分别与物体的四个顶点对应(或理解为连接)——
实现了与我们物体四个顶点的连接，使得物体与锚的距离永远保存不变
如图1

同样的我们还有一种类型的锚点，也实现了这样的功能
（类型的不同点会在后面提到）
如图2
图中所谓的控制点，就是设置组件大小的顶点

其中，无论是图一的锚点，还是图2的锚点，在屏幕像素比改变或者窗体拉升过后，都不会影响到锚点与对应顶点的距离

如何验证该效果
下图为图1拉升后的效果图3

屏幕自适应

前面阐述了锚点与各个顶点之间的关系，但锚点实现自适应，实际上是锚点与父物体之间的关系以及锚点与顶点之间的关系共同决定的

锚点与顶点的关系我们理解为距离始终保持不变(x方向的偏移量与y方向的偏移量保持恒定)，而锚点与父节点之间的关系，则是百分比保持不变
理解锚点与父节点关系时，先不管锚点该组件本身的位置与大小，先只看锚点与父节点
如图4

其中

• 1表示锚点与父节点的上边界始终保持27%的距离
• 2表示锚点与父节点的左边界始终保持20%的距离
• 3表示锚点与父节点的下边界始终保持39%的距离
• 最后一个表示锚点与父节点的左边界始终保持13%的距离
  也就是无论父节点如何放大缩小，我们的锚点始终相对于父节点在一个百分比距离的点上
  此时如果父节点的像素大小发生变化，导致锚点之内的区域像素大小发生变化，但锚点与顶点像素偏移量又不变，就导致我们的组件像素大小也会跟随着发生变化，就实现了屏幕自适应

大部分人应该都用过UGUI本身的左右上下自适应，UGUI中，将锚点拉至了四个顶点，也就是与上下左右都保持0%距离的关系

而固定的锚点，此时也很好理解
如图5

锚点与屏幕上下左右分别始终保持图上各个百分比的距离，但由于锚点都重合在一个点，屏幕的拉升不会影响锚点与锚点之间像素距离的变化，也就不会影响到我们组件的像素大小的变化

可是一旦改变了竖直或水平方向上任意锚点的位置，导致锚点与锚点之间有了间隙，就可能发生组件随屏幕大小变化而变化
如图6

这样的锚点则会可能发生竖直方向上组件的拉升，原因就是由于竖直方向上锚点与锚点之间存在距离，有距离就会随着屏幕拉伸导致像素点个数的变化，偏移量不变，组件在竖直方向的像素大小则发生改变

如有理解错误，欢迎指出，即时修正

• 点赞
• 收藏
• 分享
• 文章举报