Unity Canvas、Canvas Scaler、Graphic Raycaster、EventSystem 组件详解

0. 参考文章

https://blog.csdn.net/qq_33789001/article/details/117781577
https://blog.csdn.net/q764424567/article/details/119923544

1. Canvas

1.1 Screen Space-Overlay —— 屏幕空间覆盖模式

1.2 Screen Space-Camera —— 相机模式

1.3 World Space —— 世界模式

2. Canvas Scaler：控制UI画布的放大缩放的比例

参考文章：https://blog.csdn.net/qq_33789001/article/details/117781577

2.1 Constant Pixer Size —— 恒定像素

无论屏幕大小如何，UI 元素都保持相同的像素大小。

1920*1080 效果：

3000:100 效果：

可以看到无任何拉伸或者缩放，都是按设定的大小显示。

2.2 Scale With Screen Size —— 根据屏幕缩放

屏幕越大，UI 元素越大

2.2.1 Match Width or Height —— 匹配宽度或高度

以宽度为参考、以高度为参考或介于两者之间的值来缩放画布区域

2.2.2 Expand —— 扩张

水平或垂直扩展画布区域，因此画布的大小永远不会小于参考

2.2.3 Shrink —— 收缩

水平或垂直裁剪画布区域，因此画布的大小永远不会大于参考

2.2.4 三种模式效果对比

1920 x 1080 分辨率下：

1.扩张
3000:100 效果：

这里可以看到，canvas的宽度进行了拓展（1920 --> 3240）,高度保持不变（1080）同时整体收缩了0.9259倍，UI基本正常。
2.收缩
3000:100 效果：

这里可以看到，canvas的高度进行了收缩（1080 --> 640）,宽度保持不变（1920）同时整体放大了1.5625倍。画面出现异常，左右两边居中的的绿色和橙色部分超出画面
3.匹配高度
3000:100 效果：

查看效果其实和扩张的效果是一致的
4.匹配宽度

查看效果其实和收缩的效果是一致的
5.匹配宽度高度
3000:1000 效果：

可以看到，canvas的宽度进行了收缩（1080 -->831）,高度进行放大（1920 --> 2494）同时整体放大了1.2倍。画面出现异常，左右两边居中的的绿色和橙色部分已经遮挡其它元素。

2.3 Constant Physical Size —— 恒定尺寸

UI 元素无论屏幕大小和分辨率如何都保持相同的物理大小。

1920*1080 效果：

3000:100 效果：

3. Graphic Raycaster：控制是否让UI响应射线点击

4. EventSystem

Canvas一同创建的还有一个EventSystem，这是一个基于Input的事件系统，可以对键盘、触摸、鼠标、自定义输入进行处理

Event System(Script)

Event System负责处理输入、射线投射以及发送事件。
一个场景中只能有一个Event System组件。

Standalone Input Module(Script)