• 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

    CanvasScaler canvasScaler = GetComponent();
    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.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.uiScaleMode = CanvasScaler.ScaleMode.ConstantPhysicalSize;
    canvasScaler.referencePixelsPerUnit = 100;
    

    操作步骤:

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

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

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

    操作步骤:

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

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

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

    操作步骤:

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

    注意事项:

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

    参考资料:

  • 相关阅读:
    NebulaGraph学习笔记-自定义池连接
    多数据中心多活技术架构
    Mock.js使用
    docker入门
    C语言函数指针简介
    WebGL 的 Hello World
    Faster R-CNN pytorch版
    【前端学习】—Vue生命周期(十七)
    高可用(keepalived)部署方案
    深度学习第四课——卷积神经网络(week 1)
  • 原文地址:https://www.cnblogs.com/alianblank/p/17567945.html