2、Rect Transform 完全掌握：锚点(Anchors)与中心点(Pivot)的数学原理与实战技巧

说实话，刚接触 Unity UI 的时候，我被 Rect Transform 折磨得不轻。

明明拖了一个按钮进去，换个分辨率就跑偏了。后来我才明白——锚点和中心点没搞懂，UI 自适应就是空谈。今天咱们就把这两个东西彻底讲透。

2.1 锚点（Anchors）到底是什么？

锚点，说白了就是UI 元素相对于父级矩形的“绑定点”。

你可以把它想象成一根绳子——绳子的一端拴在父级上，另一端拴在你的 UI 上。父级变了，绳子就会拉着 UI 跟着动。

举个例子：

• 锚点 (0,0,0,0)：锚在父级左下角。UI 元素永远贴着左下角。
• 锚点 (0.5,0.5,0.5,0.5)：锚在父级正中心。UI 元素永远居中。
• 锚点 (0,0,1,1)：锚点拉伸到整个父级。UI 元素会跟着父级一起缩放。

我在项目中遇到过一个问题：一个血条 UI，我希望它始终贴在屏幕左上角，但不管怎么调，换到 iPad 上就跑偏了。后来发现——锚点设成了 (0,0,0,0) 但没锁定位置偏移量。嗯，这里要注意：锚点只决定“相对位置”，不决定“绝对距离”。

2.2 中心点（Pivot）的数学意义

中心点就更有意思了。它控制的是 UI 元素的旋转和缩放基准点。

你想想看：一个图片，Pivot 在 (0.5, 0.5) 时，旋转是绕着中心转。Pivot 在 (0, 0) 时，旋转就绕着左下角转。这个区别在制作仪表盘指针、进度条动画时特别关键。

Pivot 值	旋转效果	常见用途
(0.5, 0.5)	绕中心旋转	按钮、图标、通用 UI
(0, 0.5)	绕左边缘旋转	指针、进度条
(0.5, 0)	绕下边缘旋转	弹出菜单、下拉动画
(0, 0)	绕左下角旋转	特殊仪表盘、时钟指针

2.3 锚点与中心点的联动关系

很多人以为锚点和中心点是独立的。其实它们共同决定了 UI 元素的最终位置。

公式很简单：

最终位置 = 锚点位置 + (中心点偏移 × UI 元素尺寸)

举个例子：

• 锚点 (0, 0, 0, 0) + Pivot (0.5, 0.5) + 元素宽 100、高 50
• 最终位置 = (0, 0) + (0.5 × 100, 0.5 × 50) = (50, 25)
• 也就是说，元素的中心点距离父级左下角 (50, 25) 像素

为什么会这样？因为 Unity 先根据锚点确定“参考点”，再根据 Pivot 和元素尺寸算出“实际渲染点”。

2.4 实战技巧：三种常用锚点配置

直接上干货。我总结了三种最常用的配置，你直接套用就行：

配置一：固定位置 + 固定大小

锚点: (0, 0, 0, 0)  // 锚在左下角
Pivot: (0.5, 0.5)    // 中心点居中
PosX: 100, PosY: 100 // 距离左下角偏移
Width: 200, Height: 50

适合：按钮、图标、固定位置的标签。分辨率变了也不缩放。

配置二：拉伸 + 自适应

锚点: (0, 0, 1, 1)  // 锚点拉伸到整个父级
Pivot: (0.5, 0.5)    // 中心点居中
Left: 20, Right: 20  // 距离父级左右各 20 像素
Top: 10, Bottom: 10  // 距离父级上下各 10 像素

适合：背景图、全屏遮罩、自适应面板。父级变它就变。

配置三：水平居中 + 底部对齐

锚点: (0.5, 0, 0.5, 0)  // 水平居中，底部对齐
Pivot: (0.5, 0)          // 中心点在下边缘
PosX: 0, PosY: 50        // 距离底部 50 像素
Width: 300, Height: 80

适合：底部导航栏、提示条、底部弹窗。

2.5 避坑指南：我踩过的三个雷

1. 锚点设了但没设偏移量：锚点 (0.5, 0.5, 0.5, 0.5) 时，PosX 和 PosY 必须手动调。我见过有人锚点设好了，但 PosX 还是 0，结果元素跑到屏幕外面去了。
2. Pivot 影响位置计算：Pivot 改了，PosX 和 PosY 的值会自动变。别慌，这是正常的。你只需要关注最终渲染位置对不对。
3. 嵌套 UI 的锚点传递：子元素的锚点是相对于父级的。父级锚点变了，子元素的位置会跟着变。我做过一个多层嵌套的 UI，调试时发现子元素跑偏了，结果发现是父级的锚点设错了。

好了，这一章的内容就到这里。下一章咱们聊聊Canvas Scaler 和屏幕适配策略——那个才是真正让 UI 在不同设备上“长一样”的关键。