UGUI源码剖析（4）：世界的法则——Canvas, CanvasScaler与CanvasGroup的底层协作

最新推荐文章于 2025-08-09 11:36:59 发布

原创最新推荐文章于 2025-08-09 11:36:59 发布 · 729 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#unity #ui #游戏引擎 #架构 #游戏 #c# #.net

游戏UI开发专栏收录该内容

23 篇文章

订阅专栏

UGUI源码剖析（第四章）：世界的法则——Canvas, CanvasScaler与CanvasGroup的底层协作

在前几章中，我们已经解剖了构成UI元素的“原子”（RectTransform）和驱动其更新的“心脏”（CanvasUpdateRegistry）。现在，我们将把视角提升到更宏观的层面，去探究定义整个UI世界渲染规则、尺寸法则和交互法则的“三大基石”——Canvas、CanvasScaler 和 CanvasGroup。我们将结合Graphic.cs的源码，来揭示它们是如何从顶层影响每一个最基础的可视化元素的。

1. Canvas：UI世界的“根”与“渲染上下文”

Canvas组件是UGUI世界的绝对根节点。它不仅仅是一个容器，更是定义了一整套渲染规则和上下文环境的“世界”本身。

1.1 渲染模式与空间 (renderMode): Canvas通过renderMode这个枚举属性（ScreenSpaceOverlay, ScreenSpaceCamera, WorldSpace），从根本上决定了其内部所有UI元素的存在形态。这是所有后续渲染计算的最高层上下文。

ScreenSpaceOverlay: 直接渲染到屏幕顶层，独立于3D场景，不受后期效果影响。
ScreenSpaceCamera: 渲染到指定相机前的3D平面上，受相机参数影响，可与3D物体进行前后遮挡。
WorldSpace: 完全作为3D对象存在于场景中，遵循所有3D变换和渲染规则。

1.2 渲染事件的发布者 (willRenderCanvases): Canvas类拥有一个至关重要的静态事件：public static event WillRenderCanvases willRenderCanvases;。这个事件由Unity引擎在每一帧、即将渲染所有Canvas之前触发。我们第二章分析的CanvasUpdateRegistry，正是通过订阅这个事件，来启动其整个UI重建管线的。可以说，Canvas是UGUI更新循环的“发令枪”。ForceUpdateCanvases()这个静态方法，则提供了一种手动、立即触发这个事件循环的机制。

1.3 排序的权威 (overrideSorting, sortingOrder, sortingLayerID): UGUI的渲染顺序由Canvas的排序属性和UI元素在层级中的深度共同决定。一个嵌套的Canvas可以开启overrideSorting，从而创建一个独立的、不受父Canvas影响的排序上下文。这对于制作需要“永远在最上层”的UI（如加载界面、系统弹窗）至关重要。sortingOrder和sortingLayerID则与Unity的2D/3D渲染排序系统完全一致。

1.4 C++与C#的桥梁: Canvas.cs中大量的extern方法和[NativeClass], [NativeHeader]等特性，清晰地表明了它是一个与Unity引擎C++底层UI::CanvasManager等模块紧密耦合的“代理”类。它的许多属性（如pixelRect, renderOrder）的实际计算和存储，都在C++层完成，C#端只负责提供访问接口。

1.5 Canvas与Graphic的归属关系 每一个Graphic都需要知道自己属于哪个Canvas，以获取渲染上下文。Graphic.cs中的canvas属性及其CacheCanvas()方法，正是为了实现这种归属的查找与缓存。它通过向上遍历Transform层级树，来找到并缓存第一个激活的父Canvas。

 // Graphic.cs
 public Canvas canvas
 {
     get
     {
         if (m_Canvas == null)
             CacheCanvas();
         return m_Canvas;
     }
 }
 
 private void CacheCanvas()
 {
     // 从当前GameObject向上遍历，找到第一个激活的Canvas作为其归属
     var list = ListPool<Canvas>.Get();
     gameObject.GetComponentsInParent(false, list);
     if (list.Count > 0)
     {
         for (int i = 0; i < list.Count; ++i)
         {
             if (list[i].isActiveAndEnabled)
             {
                 m_Canvas = list[i];
                 break;
             }
         }
     }
     // ...
     ListPool<Canvas>.Release(list);
 }

解读：Graphic通过向上查找，将第一个遇到的、激活状态的Canvas作为自己的“根Canvas”。这个缓存在OnTransformParentChanged或OnCanvasHierarchyChanged等层级变化事件中，会被清空并重新计算。

2. CanvasScaler：多分辨率适配的“尺寸法则”

CanvasScaler组件是UGUI应对千变万化的设备屏幕的核心解决方案。它通过修改其所附加的Canvas组件的scaleFactor和referencePixelsPerUnit这两个底层属性，来实现UI的整体缩放。

2.1 触发时机: 在OnEnable()中，CanvasScaler会将自己的核心更新方法Handle()注册到Canvas.preWillRenderCanvases事件上。这意味着它的所有计算，都在UI布局和重建开始之前完成，确保了所有UI元素在进行布局计算时，其参考的Canvas尺寸已经是适配后的正确尺寸。

2.2 核心职责：计算并设置Canvas.scaleFactor CanvasScaler的Handle()方法，会根据用户选择的ScaleMode，计算出一个最终的缩放因子，并调用SetScaleFactor()将其应用到Canvas上。

ScaleMode.ConstantPixelSize: scaleFactor直接等于用户设定的m_ScaleFactor值。
ScaleMode.ConstantPhysicalSize: scaleFactor根据屏幕的DPI（每英寸点数）和用户选择的物理单位（厘米、英寸等）进行计算，以保证UI元素在不同设备上拥有相近的物理大小。
ScaleMode.ScaleWithScreenSize: 这是最复杂也最常用的模式。它会根据当前屏幕分辨率与用户设定的m_ReferenceResolution（参考分辨率）之间的差异来计算scaleFactor。其ScreenMatchMode属性决定了计算是以宽度、高度，还是一个加权平均值为基准。当设置为MatchWidthOrHeight时，其m_MatchWidthOrHeight滑杆（0代表纯宽度匹配，1代表纯高度匹配）的计算，甚至是在对数空间（logarithmic space）中进行的，以确保在宽高比差异巨大时，缩放行为更加符合直觉。

2.3 referencePixelsPerUnit的作用: 这个值定义了在UI空间中，“一个单位”对应多少个Sprite像素。CanvasScaler会根据缩放模式，动态地调整Canvas的这个属性，以确保当UI被缩放时，图片资源依然能以正确的像素密度进行渲染。

2.4 CanvasScaler对Graphic的间接影响：像素完美 CanvasScaler计算出的scaleFactor，最终会影响到Graphic的顶点生成精度。

 // Graphic.cs
 public Rect GetPixelAdjustedRect()
 {
     if (!canvas || canvas.renderMode == RenderMode.WorldSpace || canvas.scaleFactor == 0.0f || !canvas.pixelPerfect)
         return rectTransform.rect;
     else
         return RectTransformUtility.PixelAdjustRect(rectTransform, canvas);
 }

解读：Graphic在生成网格时调用的GetPixelAdjustedRect方法，会检查canvas.scaleFactor。只有当scaleFactor有效且pixelPerfect开启时，才会对RectTransform的矩形进行像素对齐。CanvasScaler正是通过控制scaleFactor，间接地控制了所有Graphic的像素对齐行为，从而影响其最终的渲染清晰度。

3. CanvasGroup：批量控制的“交互法则”

CanvasGroup是一个极其强大的“控制器”组件，它允许开发者对一个UI层级下的所有子元素，进行批量的透明度、可交互性和射线检测控制。

3.1 属性的传递与影响:

alpha (透明度)：CanvasGroup的alpha值，会在C++渲染底层与其所有子Graphic的color.a值相乘，共同决定最终的顶点透明度。
interactable & blocksRaycasts: 这两个布尔值，则通过ICanvasRaycastFilter接口，在射线检测阶段扮演“仲裁者”的角色。

3.2 作为射线过滤器 (ICanvasRaycastFilter): Graphic的Raycast方法，是一个自下而上的遍历循环，它会检查自身以及所有父级节点上的ICanvasRaycastFilter组件。

 // Graphic.cs -> Raycast() 简化逻辑
 while (t != null)
 {
     // ...
     var filter = components[i] as ICanvasRaycastFilter;
     if (filter == null) continue;
 
     // IsRaycastLocationValid for CanvasGroup returns its 'blocksRaycasts' value.
     if (!filter.IsRaycastLocationValid(sp, eventCamera))
     {
         return false; // 射线被阻挡
     }
     // ...
     t = t.parent;
 }

解读：只要射线检测链条上的任何一个CanvasGroup的blocksRaycasts为false，整个射线检测就会立即失败。这赋予了CanvasGroup控制一整个UI分支能否被交互的“生杀大权”。

总结：

Canvas, CanvasScaler和CanvasGroup共同构成了UGUI世界的“顶层设计”和“物理法则”，它们通过一套自上而下的规则系统，来精确控制世界中每一个最基础的Graphic元素的最终行为。

Canvas 是渲染的起点和上下文。它通过发布willRenderCanvases事件，驱动Graphic的Rebuild；它的pixelPerfect和scaleFactor属性，则直接影响Graphic的顶点生成精度。
CanvasScaler 是尺寸的适配器。它通过在preWillRenderCanvvases阶段计算并设置Canvas的scaleFactor，为所有Graphic的GetPixelAdjustedRect提供了正确的度量衡。
CanvasGroup 是状态的控制器。它通过实现ICanvasRaycastFilter接口，在Graphic.Raycast的向上遍历过程中，扮演了交互的“仲裁者”；同时，它的alpha值在底层与子Graphic的颜色叠加，控制着最终的视觉透明度。