UE4锚点使用解析

之前对锚点一直不理解，在使用的时候发现完全搞不懂。这时候在网上查的时候发现也没有什么好的资料，所以仔细研究了一番，总结下来。除了虚幻4，其他的引擎在使用上应该也是相似的，这篇文档应该能解决你对锚点的疑惑。

一．锚点解析

为了说明锚点与画布大小没有关系，这里使用的是500*500的canvas。窗口的大小是1280*720。

锚点的参数：

左上角为（0,0）（0,0）。右下角为（1,1）（1,1）

情况一：锚点聚在一点，即最小值和最大值相等。

聚集在一点的锚点在水平拉伸窗口的时候并不影响控件的大小，而是尽可能的保持控件相对于画布锚点的位置。

当拉伸窗口的长宽比例达到1:1的时候，canvas画布里面的控件就会缩小，缩小到一定程度后就会停止。

                                                            图 1-1

情况二：锚点聚成一条线，即最小值和最大值的X或Y至少有一个相等。

                                                            图 1-2

请注意上面的图，这个时候我们按钮的位置参数已经由（PositionX，PositionY，SizeX，SizeY变成了PositionX，OffsetTop，SizeX，OffsetBottom）

                                                            图 1-3

前面说了，第一种情况只能让按钮在竖直方向上保持比例。但是我们想要其在水平方向上也保持比例怎么办？答案是拉长锚点，使控件在长度上与锚点的长度相同。如上图，这样就会使按钮横向占比20%。同时我们可以注意下Anchor描点的参数。

如果你想让他比20%还多出一个固定的距离（比如多400），那么你就可以看到

                                                            图 1-4

                                                            图 1-5

这个按钮的长度就是窗口长的20%加上400单位。

同理，下面的就是20%减去50单位长度

                                                            图 1-6

                                                            图 1-7

                                                            图 1-8

                                                            图 1-9

说到这里，锚点的原理本上明晰了。

当锚点是一个点的时候，我们画布上的控件就是要尽可能的与锚点保持住固定的距离。

当锚点是一条线的时候，就相当于在窗口上按比例画出一个线段。在这个锚点线段方向平行的控件左边距离锚点左端点的距离要保持widget蓝图上的offset实际距离，控件右边距离锚点右端点的距离要保持widget蓝图上的offset实际距离。（竖直方向同理）

那么当锚点是一个区域的时候呢？其实与直线是同理的。水平方向的控件左右边与锚点区域的左右边保持不变的距离（offset left/Right），而竖直方向的上下边分别与锚点区域的上下边保持不变的距离。（offset Top/Bottom）我们看一下情况3。

 

                                                            图 1-10

 

                                                             图 1-11

情况三：锚点分成一个区域，即最小值和最大值的X或Y都不相等。

最后,我们以这个四边都拉开的锚点来作具体分析。我们看到上面图中1-11右边的按钮已经没有大小的参数了，变成了四个offset。分别是各个边相对锚点各个边的偏移。我们锚点的4个分支点标记了其在整个窗口的比例位置。现在我们就可以说，这个button的上边距离窗口上边20%的位置偏移了300，button的下边距离窗口50%位置偏移了250，button的左边正好在窗口水平方向80%的位置，button右边正好在窗口的最右边。

对于文字来说，测试结果是只以文字的左上角为基准，右边与底边不需要与锚点线段的右端点保持距离。因为文字与按钮不同，是不可拉伸的。 

原文链接（转载请标明）：http://blog.csdn.net/u012999985/article/details/53447435

                                                            图 1-12