[UE4知识点合集-01] UE4 CanvasPanel 和 Overlay 的区别以及使用详解UMG HUD Widget
CanvasPanel
/
The canvas panel is a designer friendly panel that allows widgets to be laid out at arbitrary locations, anchored and z-ordered with other children of the canvas. The canvas is a great widget for manual layout, but bad when you want to procedurally just generate widgets and place them in a container (unless you want absolute layout).
允许指定部件的位置，锚点，以及覆盖层级
允许放置多个孩子组件
适合于手动设置布局，不适用于程序化生成一个Widget并将其放置于一个容器中（除非想要绝对布局）。
CanvasPanel底下的部件会有Slot(Canvas Panel Slot) ，CanvasPanel和子部件的关系用这个Slot的属性来设置：
-
Anchors: CanvasPanel的锚点，可以分别设置x，y在区间[0,1] 的任意值，表示屏幕的百分比位置。
-
PositionX
PositionY : 部件锚点(一般是左上角)相对于屏幕锚点的位置偏移
-
SizeX
SizeY: 部件的大小
-
Alignment: 对齐方式(相当于部件的锚点)，可以分别设置x，y在区间[0,1] 的任意值，表示部件的百分比位置。
-
SizeToContent: 当AutoSize为true时，使用部件的实际大小而无视SizeX,Y。（可看作部件大小的语法糖）
-
ZOrder: 设置层级，数字越大的放在上面
//确定部件位置：1.CanvasPanel锚点 + 2.两个锚点间的位置偏移 + 4.部件锚点
//确定部件大小：3. 5.
//确定部件层级：6.
Overlay
Allows widgets to be stacked on top of each other, uses simple flow layout for content on each layer.
允许组件一个堆在另一个上，
每层使用简单流式布局
Overlay底下的部件会有Slot(Overlay Slot) ，Overlay和子部件的关系用这个Slot的属性来设置：
-
Padding
Left
Top
Right
Bottom: 内边距（Overlay的各边到子部件各边的距离）
-
Horizontal Alignment
Horizontal Alignment Left
Horizontal Alignment Center
Horizontal Alignment Right
Horizontal Alignment Fill
Vertical Alignment
Vertical Alignment Top
Vertical Alignment Center
Vertical Alignment Bottom
Vertical Alignment Fill: 对齐方式，与Padding的值是叠加的。先计算对齐方式，再加上内边距。（Fill会使用Overlay的Size代替部件的实际Size）
//确定部件位置：1.内边距 + 2.对齐方式
//确定部件大小：无
//确定部件层级：无
使用范例
这里我用我自己做过的一个UI来作范例：有血条Widget，和时间Widget
一般来说Overlay的确定位置方式比CanvasPanel要简单，所以基础的Widget我是以Overlay为根组件创建的：
这是SizeBox_Percent，有一个子部件：设置对齐为水平靠右，竖直居中，然后加了一定的右内边距
这是HorizentalBox，有三个子部件：设置对齐为水平居中，竖直居中
要注意这里的位置设置是相对于我们这里自动生成的Overlay的边框来的（图中最外层的虚线），这个Overlay的大小可以使用虚线右下角的拖放进行临时设置，它并不会保存这个设置。
到这里血条部件算是创建好了。我们就可以在另一个Widget蓝图中使用它。
我们新建一个Widget Blueprint，在User Created 栏找到这个血条部件，将其拖到根部件CanvasPanel下：
可以看到这个血条部件的大小并不是我们在编辑此血条蓝图时的大小，而是默认的100*30。所以看到的效果变形了，为了验证这一点，我们来到血条蓝图改变Overlay的大小：
这样看来，是不是理解为什么做好的部件拖到另一个地方会变形了？它没有变形，只是你需要在新的地方给它设置大小而已。
我们这里是在CanvasPanel部件下创建部件的，所以这个部件会被加上Canvas Panel Slot，我们在这里设置血条部件的位置，大小以及层级：
我们选中Size To Content快速设置血条组件的大小，可以看到这时的血条看起来跟编辑时的一样了。
为了使血条部件始终居中显示在屏幕顶端，我们设置CanvasPanel的锚点在靠上居中，设置血条的锚点也在靠上居中(不懂的看上面的CanvasPanel介绍部分)。然后设置两锚点的位置偏移为0（PositionX, PositionY = 0, 0)。
完成。
