Unity UGUI的CanvasScaler（画布缩放器）组件的介绍及使用

亦凉 2024-03-17 23:59 79阅读 0赞

### 1. 什么是CanvasScaler组件？ ###

CanvasScaler是Unity中UGUI系统中的一个组件，用于控制画布的缩放和适配。通过CanvasScaler组件，可以实现UI界面在不同分辨率下的自适应显示。

### 2. CanvasScaler的工作原理是什么？ ###

CanvasScaler组件通过调整画布的缩放比例，使UI元素在不同分辨率下保持一致的显示效果。它根据设定的参考分辨率和屏幕分辨率的比例，计算出缩放比例，并将其应用到画布上。

### 3. CanvasScaler的常用属性有哪些？ ###

*  **UI Scale Mode**：设置画布的缩放模式，有Constant Pixel Size（像素大小不变）、Scale With Screen Size（根据屏幕大小缩放）和Constant Physical Size（物理大小不变）三种模式可选。
 *  **Reference Resolution**：设置参考分辨率，用于计算缩放比例。
 *  **Screen Match Mode**：设置屏幕匹配模式，有Match Width Or Height（宽度或高度匹配）和Expand（扩展）两种模式可选。
 *  **Match**：设置屏幕匹配模式为Match Width Or Height时，指定宽度或高度的匹配比例。
 *  **Physical Unit**：设置物理单位，用于计算Constant Physical Size模式下的缩放比例。

### 4. CanvasScaler的常用函数有哪些？ ###

*  **SetScaleFactor(float scaleFactor)**：设置画布的缩放比例。
 *  **SetReferencePixelsPerUnit(float referencePixelsPerUnit)**：设置参考像素单位。
 *  **SetReferenceResolution(Vector2 referenceResolution)**：设置参考分辨率。
 *  **SetScreenMatchMode(ScreenMatchMode screenMatchMode, float matchWidthOrHeight)**：设置屏幕匹配模式和匹配比例。

### 5. CanvasScaler的使用示例代码： ###

#### 示例1：设置画布的缩放模式为Scale With Screen Size ####

CanvasScaler canvasScaler = GetComponent<CanvasScaler>();
    canvasScaler.uiScaleMode = CanvasScaler.ScaleMode.ScaleWithScreenSize;
    canvasScaler.referenceResolution = new Vector2(1920, 1080);
    canvasScaler.screenMatchMode = CanvasScaler.ScreenMatchMode.MatchWidthOrHeight;
    canvasScaler.matchWidthOrHeight = 0.5f;

**操作步骤：**

1.  获取CanvasScaler组件。
2.  将uiScaleMode属性设置为Scale With Screen Size。
3.  设置referenceResolution属性为参考分辨率，例如1920x1080。
4.  将screenMatchMode属性设置为Match Width Or Height。
5.  设置matchWidthOrHeight属性为匹配比例，例如0.5表示宽度和高度的匹配比例为1:2。

#### 示例2：设置画布的缩放模式为Constant Pixel Size ####

CanvasScaler canvasScaler = GetComponent<CanvasScaler>();
    canvasScaler.uiScaleMode = CanvasScaler.ScaleMode.ConstantPixelSize;
    canvasScaler.scaleFactor = 2f;

**操作步骤：**

1.  获取CanvasScaler组件。
2.  将uiScaleMode属性设置为Constant Pixel Size。
3.  设置scaleFactor属性为缩放比例，例如2表示画布放大两倍。

#### 示例3：设置画布的缩放模式为Constant Physical Size ####

CanvasScaler canvasScaler = GetComponent<CanvasScaler>();
    canvasScaler.uiScaleMode = CanvasScaler.ScaleMode.ConstantPhysicalSize;
    canvasScaler.referencePixelsPerUnit = 100;

**操作步骤：**

1.  获取CanvasScaler组件。
2.  将uiScaleMode属性设置为Constant Physical Size。
3.  设置referencePixelsPerUnit属性为参考像素单位，例如100表示每个单位对应100个像素。

#### 示例4：动态设置画布的缩放比例 ####

CanvasScaler canvasScaler = GetComponent<CanvasScaler>();
    canvasScaler.SetScaleFactor(1.5f);

**操作步骤：**

1.  获取CanvasScaler组件。
2.  调用SetScaleFactor函数，设置画布的缩放比例为1.5。

#### 示例5：动态设置画布的参考分辨率 ####

CanvasScaler canvasScaler = GetComponent<CanvasScaler>();
    canvasScaler.SetReferenceResolution(new Vector2(1280, 720));

**操作步骤：**

1.  获取CanvasScaler组件。
2.  调用SetReferenceResolution函数，设置画布的参考分辨率为1280x720。

### 注意事项： ###

*  在使用CanvasScaler组件时，需要将Canvas的Render Mode设置为Screen Space - Camera或Screen Space - Overlay，否则CanvasScaler将无效。
 *  在设置参考分辨率时，应根据目标平台的分辨率进行调整，以保证UI在不同设备上的显示效果一致。