Unity UGUI系列四 Pivot Anchor

参考

Unity进阶技巧 - RectTransform详解

Unity——RectTransform详解

屏幕适配实用技巧

揭秘！anchoredPosition的几何意义！

localPosition与anchoredPosition转化之瞎猫找死耗子

首先为了让大家更好的理解内容，我在Unity中创建了两个UI控件，一个Plane控件，作为父对象，一个Image控件，最为子对象，如下图：

Pivot我们可以暂且称它为中心轴（这个翻译不太准确，但为了便于理解，先这么叫着），它是一个X,Y值范围是0到1的点，这个点的会在Anchor（锚点）计算位置的时候会使用到，下面用一张图来解释Pivot点的位置

旋转、大小和缩放修改发生在主轴Pivot点周围，因此Pivot的位置会影响旋转、调整大小或缩放的结果。

关于Anchor锚点可能接触过UI的朋友都了解一些，但是Unity中Anchor应该称它为锚框更为合理，因为它是由两个锚点(Min，Max)组成的一个矩形，当然也可以组成一个点（两个点重合）

当然上图是两个锚点重合的情况，所以看上去是一个点，下面我们利用两个锚点不重合的情况来说明一下：

在了解了Pivot和Anchor分别是什么后，我们就来看看Unity是如何使用这个两个东西来控制UI的布局

我们先来看看两个锚点重合时的情况，这种情况是我们最常用也是最容易理解的方式

总结下第1种情况的特点就是：子物体的大小不会随着父物体的大小变化而变化，但是位置会根据Pivot点到Anchor点的距离一致的原则发生对应的变化

当两个锚点（AnchorMin和AnchorMax）不重合时，两点就会确定一个矩形，这个矩形就是我们的锚框，如下图中的绿框就是我们的锚框区域

同理，如上图所示，Unity以锚框的右上角为原点(0,0)，然后红框的Right和Top两个数确定红框的右上角的在坐标系中的位置，原地和红框的右上角的点确定一段距离（即上图的绿色箭头），不管黑框如何边框，这段距离都保持不变

在黑框大小和位置变化的时候，Unity会保证红框的左下角到锚框的左下角距离不变，同时红框的右上角到锚框的右上角距离不变，来确定红框的相对位置和大小，看下图来感受一下变化：

注意上图中红框左下角到黑框左下角的距离，以及红框右上角到黑框右上角的距离，他们都是不变的

快速设置Anchor，加快捷键能同时设置pivot或position

unity中的ui元素是有严格的父子关系的，子物体的位置是根据父物体的变化而变化的，而子物体和父物体联系的桥梁就是Anchor。之所以anchorMax和anchorMin的值是小数，是因为其表征的是该点所在位置占父物体大小的比例。

所谓的绝对布局，就是出现锚点的情况，此时的recttransform面板中的属性变成PosX,PosY,PosZ,Width,Height，这五个属性，首先说说Width和Height，在绝对布局的情况下无论分辨率是多少，父物体多大，该UI元素的大小是恒定的，如下图所示

所谓相对布局，就是出现锚框的情况。在这种情况下UI元素的四个角，距离四个对应的锚点的距离是不变的，在这种情况下RectTransform的属性又变为了Left,Top,Right,Bottom,PosZ，其中的PosZ表征的是该元素到父物体在Z轴上的偏移，利用这个值可以调整UI元素的显示顺序，不过我用的不多，这里不作太多讨论。剩下的四个值应该很好理解了，就是UI元素的每一条边距离父物体的每一条边的距离。

anchoredPosition根据名字的含义，我们大概可以猜出他是根据anchor锚点得出来个一个位置属性，他本身是一个点，如果在AnchorMin和AnchorMax是重合的情况下，anchoredPosition就是表示锚点到Pivot的位置，如下图所示：

但是如果AnchorMin和AnchorMax不重合的时候，anchoredPosition就比较复杂了，在这种情况下，Unity会根据Pivot、AnchorMin和AnchorMax计算出一个锚点，然后在通过Pivot和锚点来得出anchoredPosition的位置

offsetMin和offsetMax这两个属性比较好理解，其中offsetMin表示物体（本文中的红框）左下角相对AnchorMin的偏移，offsetMax表示物体右上角相对AnchorMax的偏移

sizeDelta就是offsetMax - offsetMin的值，即物体左下角到右上角的变量，如下图所示：

IOS:

IOS：使用shell命令打包并上传Itunes

Unity3d：

Unity3d：Canvas适配屏幕分辨率与锚点(Anchors与Pivot)

Unity3d：在屏幕边缘显示其他玩家方位

Unity3d：命令行打包Android

Unity3d：命令行编译IOS

Unity3d：使用Jenkins自动编译打包IOS（只能打包Development）

Unity3d：使用Jenkins自动编译打包IOS（打包Ad-hoc,上传itunes）

所有的UI都有一个Root Canvas，该Canvas的RectTransform不可修改。

所有 Canvas坐标系 方向都是 右侧为X轴正方向 ， 上方为Y轴正方向 。

该Canvas还带有一个 Canvas Scaler 组件，可以通过该组件适配不同的屏幕分辨率。

Canvas Scaler 中有一个 UI Scale Mode 属性，用于确定画布中的UI元素如何缩放。

以下假如屏幕分辨率为1500 * 3000。

使Canvas宽高保持与屏幕分辨率一致。屏幕分辨率有多大，Canvas宽高就有多大（ Scale Factor 缩放因子为1时）。

所以， Canvas宽高 = 屏幕分辨率 / 缩放因子 。

使Canvas的宽高比与屏幕分辨率的宽高比保持一致。

缩放时需要基于下面的 Reference Resolution（参考分辨率） 进行缩放。

因为此时屏幕分辨率的宽高比为：1500 / 3000 = 0.5，所以在该模式下，无论怎么调整参数，Canvas宽高比也一直为0.5，不会变。

所以， Canvas宽高比 = 屏幕分辨率宽高比 。

缩放时用的参考分辨率。

下面假设参考分辨率是1080 * 1920。

如果屏幕分辨率与参考分辨率的宽高比不一致，则根据选择的模式对Canvas宽高进行缩放。

如果屏幕分辨率与参考分辨率的宽高比一致，该选项怎么调都不管用。

基于下面 Match 对Canvas宽高进行缩放。

缩放后，Canvas的宽高一定不低于参考分辨率的宽高。

缩放后，Canvas的宽高一定不高于参考分辨率的宽高。与 Expand 类似。

锚点说难不难，只是不好描述，但可以用例子来说明。

假如Canvas拥有一个Image节点。

对于 Image所在的坐标系 ， 坐标系方向与Canvas坐标系方向相同 。

下面看下Image节点的 锚点在Canvas的不同位置 的情况：

单锚点 ，从Unity上看，就是4个小三角形聚在一个点。

单锚点在Canvas的位置(假设为点p) 都满足以下逻辑：

可以总结出以下公式（p为单锚点在Canvas的位置，pivot为单锚点的Pivot属性）：

Image所在坐标系 原点在Canvas中的坐标 = (p.x + Image.Width * (0.5 - pivot.x), p.y + Image.Height * (0.5 - pivot.y)) 。

双锚点 ，从Unity上看，就是2个小三角形聚在一个点。

左上角有2个小三角形，左下角有2个小三角形

此时，Image拥有 PosX，Top，Width，Bottom 这四个位置参数。

而且， 锚点的Pivot的Y不起作用 。

Image的Height = (Canvas.Height - Top - Bottom) / 2 。

如果设置Image的Top，Bottom都为0的话，则Image的高会与Canvas的高一致。

Image所在坐标系原点在Canvas中的坐标 = (Image.Width * (0.5 - Pivot.x) + PosX , Image.Height / 2 + Top) 。

底部边框的中心有2个小三角形，顶部边框的中心有2个小三角形

此时，Image拥有 PosX，Top，Width，Bottom 这四个位置参数。

而且， 锚点的Pivot的Y不起作用 。

Image的Height = (Canvas.Height - Top - Bottom) / 2 。

如果设置Image的Top，Bottom都为0的话，则Image的高会与Canvas的高一致。

Image所在坐标系原点在Canvas中的坐标 = (Image.Width * (0.5 - Pivot.x) + Canvas.Width / 2 + PosX , Image.Height / 2 + Top) 。

右上角有2个小三角形，右下角有2个小三角形

此时，Image拥有 PosX，Top，Width，Bottom 这四个位置参数。

而且， 锚点的Pivot的Y不起作用 。

Image的Height = (Canvas.Height - Top - Bottom) / 2 。

如果设置Image的Top，Bottom都为0的话，则Image的高会与Canvas的高一致。

Image所在坐标系原点在Canvas中的坐标 = (Image.Width * (0.5 - Pivot.x) + Canvas.Width + PosX , Image.Height / 2 + Top) 。

左上角有2个小三角形，右上角有2个小三角形

此时，Image拥有 Left，PosY，Right，Height 这四个位置参数。

而且， 锚点的Pivot的X不起作用 。

Image的Width = (Canvas.Width - Left - Right) / 2 。

如果设置Image的Left，Right都为0的话，则Image的宽会与Canvas的宽一致。

Image所在坐标系原点在Canvas中的坐标 = (Image.Width / 2 + Left , Image.Height * (0.5 - Pivot.x) + PosY) 。

左侧边框的中心有2个小三角形，右侧边框的中心有2个小三角形

此时，Image拥有 Left，PosY，Right，Height 这四个位置参数。

而且， 锚点的Pivot的X不起作用 。

Image的Width = (Canvas.Width - Left - Right) / 2 。

如果设置Image的Left，Right都为0的话，则Image的宽会与Canvas的宽一致。

Image所在坐标系原点在Canvas中的坐标 = (Image.Width / 2 + Left , Image.Height * (0.5 - Pivot.x) + Canvas.Height / 2 + PosY) 。

左下角有2个小三角形，右下角有2个小三角形

此时，Image拥有 Left，PosY，Right，Height 这四个位置参数。

而且， 锚点的Pivot的X不起作用 。

Image的Width = (Canvas.Width - Left - Right) / 2 。

如果设置Image的Left，Right都为0的话，则Image的宽会与Canvas的宽一致。

Image所在坐标系原点在Canvas中的坐标 = (Image.Width / 2 + Left , Image.Height * (0.5 - Pivot.x) + Canvas.Height + PosY) 。

四锚点 ，从Unity上看，就是4个小三角形全都是分散的（ 左下角、左下角、右上角、右下角 ）。

此时，Image拥有 Left，Top，Right，Bottom 这四个位置参数。

而且， 锚点的Pivot不起作用 。

Image的Width = (Canvas.Width - Left - Right) / 2 。

Image的Height = (Canvas.Height - Top - Bottom) / 2 。

如果设置Image的Left，Top，Right，Bottom都为0的话，则Image的宽高会与Canvas的宽高一致。

Image所在坐标系原点在Canvas中的坐标 = (Image.Width / 2 + Left , Image.Height / 2 + Top) 。

屏幕坐标系与Canvas坐标系都是 左下角为原点，向右为X轴正方向，向上为Y轴正方向 。

在屏幕坐标系上有个点P(x, y)，我们先把屏幕分辨率的宽高缩放到与Canvas的宽高一致，此时P点的坐标也会随着缩放。

因为屏幕坐标系与Canvas坐标系都是左下角为原点，所以缩放完成后的P的位置（记作P2），就是P点在Canvas坐标系上的位置。

P2 = (P.x * Canvas.Width / Screen.Width, P.y * Canvas.Height / Screen.Height)

现在有一个Image UI，我们先把该Image的锚点设置为左下角（ Anchors.Min(0, 0)，Anchors.Max(0, 0) ），然后把P2的位置赋值给Image的anchoredPosition，此时该Image刚好就在P点的位置。

在Canvas坐标系上有一个Image UI，我们先把该Image的锚点设置为左下角（ Anchors.Min(0, 0)，Anchors.Max(0, 0) ），然后把Canvas的宽高缩放到与屏幕分辨率的宽高一致，此时Image的anchoredPosition（记作P）也会随着缩放。

因为屏幕坐标系与Canvas坐标系都是左下角为原点，所以缩放完成后的Image的anchoredPosition（记作P2），就是Image在屏幕坐标系上的位置。

P2 = (P.x * Screen.Width / Canvas.Width, P.y * Screen.Height / Canvas.Height)

---