UGUI笔记——Canvas,CanvasScaler,GraphicRaycaster

Posted 2023-04-21

参考技术A 我们在Unity创建一个Canvas游戏对象,会默认添加Canvas,CanvasScaler,GraphicRaycaster这三个组件，下面会详细介绍一下各个组件的作用。

Canvas 组件是UI布局和渲染的抽象空间，所有的UI都必须在此元素之下(子物件)，简单来说 Canvas 就是渲染 UI 的组件。
UI渲染的方式（Render Mode），有以下三种

GraphicRaycaster会观察 Canvas下所有图形，并检测是否被击中，射线检测其实就是指定位置与方向后，投射一条隐形线并判断是否有碰撞体在线上，用于判断是否点选到UI上。

举例：如果画面上有一个 Button 与 Cube 位置故意重叠，现在点击重叠之处会发现 Button 还是会被触发。

Blocked Objects 设定为 Three D，再次点选重叠区域，会发现 Cube 会阻碍射线检测，此时按钮不会有反应

Canvas Scaler是Unity UI系统中，控制UI元素大小和像素密度的组件，Canvas Scaler的缩放比例影响Canvas下的元素，包含字体大小和图像边界。

可以看出，Canvas Scaler 通过设置Canvas下的Scale Factor，缩放所有在此Canvas下的元素

Canvas Size 始终等于 Screen Size，通过Scale Factor直接缩放所有UI元素

介绍Reference Pixels Per Unit之前需要先介绍图片设置中的Pixels Per Unit(表示一张Sprite，在世界坐标中一单位由几个Pixel组成）

这里使用的测试图片为原始尺寸100*100 的图片

由此可以推导出公式： Sprite 在世界坐标中大小 = 原图大小(Pixels) / Pixels Per Unit

让我们回到 Reference Pixels Per Unit，官方解释是，如果图片有设置Pixels Per Unit，则会将Sprite 的 1 pixel 转换成 UI 中的 1 pixel，下面将以Image源码说明：

可以看出 Image 通过过 spritePixelsPerUnit / referencePixelsPerUnit 方式算出新的 pixelsPerUnit

在设定 Image 图片大小时，是把 Sprite宽高 / pixelsPerUnit

由此可以推导出公式： UI大小 = 原图大小(Pixels) / (Pixels Per Unit / Reference Pixels Per Unit)
或者 UI大小 = Sprite 在世界坐标中大小 * Reference Pixels Per Unit

通过设定的Reference Resolution(预设屏幕大小)来缩放

分别对ScaleFactor Width、Height取对数后，再进行平均混合，那为什麽不直接使用Match对Width、Height进行混合呢???让我们来比较一下

完整源码算法：

通过硬体设备的Dpi(Dots Per Inch 每英吋点数)，进行缩放

Unity笔记关于UGUI的根节点Canvas

创建UGUI物体时，会自动创建Canvas物体作为所有UGUI的根节点。该物体身上有个Canvas脚本，Render Mode渲染模式选项：

• Screen Space - Overlay：即使场景中没有任一可用Camera，所有UI依然能正常运行、显示。而且任何非UI元素的游戏物体都不能遮挡在UI元素之上（无论非UI物体怎么调位置）。
• Screen Space - Camera：可传入某个Camera，指定该Canvas物体下的所有UI元素由哪个Camera来渲染。可指定UI到Camera的距离，调整该距离，其他非UI元素可以在UI元素的前面或后面。
• World Space：该Canvas物体作为场景中的一个平面画布，可任意调整位置、旋转等。

Canvas物体身上的Canvas Scaler脚本：

• UI Scale Mode
  • Constant Pixel Size：按像素固定。不论屏幕大小如何变化，UI元素大小不变。
  • Scale With Screen Size：常用，按屏幕大小自动缩放，需要填写UI是在哪个分辨率下设计的。
• Scale Factor：该Canvas物体下所有UI元素的缩放倍数。显示尺寸 = 监视面板尺寸 * 倍数。
• Reference Pixels Per Unit：1米有多少个像素，默认100个。