ToB企服应用市场:ToB评测及商务社交产业平台

标题: Unity UGUI的CanvasScaler（画布缩放器）组件的介绍及使用 [打印本页]

---

作者: 鼠扑    时间: 2023-7-20 13:55
标题: Unity UGUI的CanvasScaler（画布缩放器）组件的介绍及使用
Unity UGUI的CanvasScaler（画布缩放器）组件的介绍及使用

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

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

复制代码

操作步骤：

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

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

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

复制代码

操作步骤：

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

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

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

复制代码

操作步骤：

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

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

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

复制代码

操作步骤：

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

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

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

复制代码

操作步骤：

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

注意事项：

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

参考资料：

• Unity官方文档 - CanvasScaler
  

            本文作者：                            Blank                            
        本文链接：        
        版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
        声援博主：如果您觉得文章对您有帮助，可以点击文章右下角            【                推荐】                    一下。您的鼓励是博主的最大动力！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4