Unity UGUI 原理篇(二)：Canvas Scaler 缩放核心

最新推荐文章于 2025-04-13 10:26:25 发布
最新推荐文章于 2025-04-13 10:26:25 发布
阅读量9.9k 收藏 25
点赞数 2
文章标签： Unity3D UGUI
本文详细解析Unity UI系统中CanvasScaler组件的工作原理及其不同模式下的缩放机制，帮助开发者掌握如何适配不同屏幕尺寸。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

Size
Reference Resolution：预设萤幕大小

Screen Size：目前萤幕大小



Canvas Size：Canvas Rect Transform 宽高


Scale Factor

http://docs.unity3d.com/ScriptReference/Canvas-scaleFactor.html

用于缩放整个Canvas，而且调整Canvas Size与Screen Size一样



先来看一段官方程式码

CanvasScaler.csC#
protected void SetScaleFactor(float scaleFactor)
{
    if (scaleFactor == m_PrevScaleFactor)
        return;

    m_Canvas.scaleFactor = scaleFactor;
    m_PrevScaleFactor = scaleFactor;
}


程式码可以看出，Canvas Scaler 透过设定Canvas下的Scale Factor，缩放所有在此Canvas下的元素



当Scale Factor为1时，Screen Size (800*600)、Canvas Size(800*600)，图片大小1倍


当Scale Factor为2时，Screen Size (800*600)、Canvas Size(400*300)，图片大小2倍

 

在当Scale Factor为2时，Scale Factor 会调整整个Canvas 的大小，并让他的大小跟Screen Size一样，运算后Canvas Size放大2倍，刚好等于Screen Size，而底下的图片会放大2倍



UI Scale Mode
Constant Pixel Size

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


1. Scale Factor：透过此Factor缩放所有在此Canvas下的元素

2. Reference Pixels Per Unit：

先介绍图片档设定中的Pixels Per Unit，意思是在这张Sprite中，世界座标中的一单位由几个Pixel组成


这边使用的测试图片为原始大小100*100 的图档，这边统称测试图


举例来说，场景中有一个1*1 Cube ，与一个Sprite图片指定为测试图，两者的Transform Scale 都为 1

当 Pixels Per Unit=100，每单位由 100 Pixel组成，Sprite 是100*100 Pixels，那 Sprite 在世界座标中大小就会变成 100/100 * 100/100 = 1*1 Unit

(左：Cube ，右：Sprite)

当 Pixels Per Unit=10，每单位由 10 Pixel组成，Sprite 是100*100 Pixels，那 Sprite 在世界座标中大小就会变成 100/10 * 100/10 = 10*10 Unit

(左：Cube，右：Sprite)


结论：

■ Unity中一单位等于 100 Pixels

■ 由此可以推导出公式：

Sprite 在世界座标中大小 = 原图大小(Pixels) / Pixels Per Unit
让我们回到 Reference Pixels Per Unit，官方解释是，如果图片档有设定Pixels Per Unit，则会将Sprite 的 1 pixel 转换成 UI 中的 1 pixel

Image.csC#
public float pixelsPerUnit
{
    get
    {
        float spritePixelsPerUnit = 100;
        if (sprite)
            spritePixelsPerUnit = sprite.pixelsPerUnit;

        float referencePixelsPerUnit = 100;
        if (canvas)
            referencePixelsPerUnit = canvas.referencePixelsPerUnit;

        return spritePixelsPerUnit / referencePixelsPerUnit;
    }
}

上面官方程式码，可以看出 Image 透过 spritePixelsPerUnit / referencePixelsPerUnit 方式算出新的 pixelsPerUnit

Image.csC#
public override void SetNativeSize()
{
    if (overrideSprite != null)
    {
        float w = overrideSprite.rect.width / pixelsPerUnit;
        float h = overrideSprite.rect.height / pixelsPerUnit;
        rectTransform.anchorMax = rectTransform.anchorMin;
        rectTransform.sizeDelta = new Vector2(w, h);
        SetAllDirty();
    }
}

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

实作一下，建立一个Canvas参数如下

Canvas底下建立一个Image，Sprite设定为测试图，参数如下

这边做4种不同的测试：测试方式是修改 Reference Pixels Per Unit 与 Pixels Per Unit 后，点下 Image Compoent 的 Set Native Size来设定图片原始大小，藉此看到图片变化


■ 上表可以看出当数值改变时，图片预设大小也会改变

■ 由此可以推导出公式

UI大小 = 原图大小(Pixels)  /  (Pixels Per Unit / Reference Pixels Per Unit)

Scale With Screen Size：

透过设定的Reference Resolution(预设萤幕大小)来缩放

1. Reference Resolution：预设萤幕大小

2. Screen Match Mode：缩放模式


先来看官方的算法

CanvasScaler.csC#
Vector2 screenSize = new Vector2(Screen.width, Screen.height);

float scaleFactor = 0;
switch (m_ScreenMatchMode)
{
    case ScreenMatchMode.MatchWidthOrHeight:
    {
        // We take the log of the relative width and height before taking the average.
        // Then we transform it back in the original space.
        // the reason to transform in and out of logarithmic space is to have better behavior.
        // If one axis has twice resolution and the other has half, it should even out if widthOrHeight value is at 0.5.
        // In normal space the average would be (0.5 + 2) / 2 = 1.25
        // In logarithmic space the average is (-1 + 1) / 2 = 0
        float logWidth = Mathf.Log(screenSize.x / m_ReferenceResolution.x, kLogBase);
        float logHeight = Mathf.Log(screenSize.y / m_ReferenceResolution.y, kLogBase);
        float logWeightedAverage = Mathf.Lerp(logWidth, logHeight, m_MatchWidthOrHeight);
        scaleFactor = Mathf.Pow(kLogBase, logWeightedAverage);
        break;
    }
    case ScreenMatchMode.Expand:
    {
        scaleFactor = Mathf.Min(screenSize.x / m_ReferenceResolution.x, screenSize.y / m_ReferenceResolution.y);
        break;
    }
    case ScreenMatchMode.Shrink:
    {
        scaleFactor = Mathf.Max(screenSize.x / m_ReferenceResolution.x, screenSize.y / m_ReferenceResolution.y);
        break;
    }
}


a. Expand(扩大)：将Canvas Size进行宽或高扩大，让他高于Reference Resolution，计算如下

scaleFactor = Mathf.Min(screenSize.x / m_ReferenceResolution.x, screenSize.y / m_ReferenceResolution.y);
意思是分别算出长宽 ，”Screen Size” 佔了 “Reference Resolution” 的比例，在求小的

举例来说，Reference Resolution为1280*720，Screen Size为800*600

ScaleFactor Width： 800/1280=0.625

ScaleFactor Height：600/720=0.83333


套用ScaleFactor公式：Canvas Size = Screen Size / Scale Factor

Canvas Width：800 / 0.625 = 1280

Canvas Height：600 / 0.625 = 960

Canvas Size 为 1280*960，高度从720变成了960，最大程度的放大(显示所有元素)

b. Shrink(收缩)：将Canvas Size进行宽或高收缩，让他低于Reference Resolution，计算如下

scaleFactor = Mathf.Max(screenSize.x / m_ReferenceResolution.x, screenSize.y / m_ReferenceResolution.y);
意思是分别算出长宽 ，”Screen Size” 佔了 “Reference Resolution” 的比例，在求大的

举例来说，Reference Resolution为1280*720，Screen Size为800*600

ScaleFactor Width： 800/1280=0.625

ScaleFactor Height：600/720=0.83333


套用ScaleFactor公式：Canvas Size = Screen Size / Scale Factor

Canvas Width：800 / 0.83333 = 960

Canvas Height：600 / 0.83333 = 720

Canvas Size 为 960*720，宽度从1280变成了960，最大程度的缩小

c. Match Width or Height：根据Width或Height进行混合缩放，计算如下
float logWidth = Mathf.Log(screenSize.x / m_ReferenceResolution.x, kLogBase);
float logHeight = Mathf.Log(screenSize.y / m_ReferenceResolution.y, kLogBase);
float logWeightedAverage = Mathf.Lerp(logWidth, logHeight, m_MatchWidthOrHeight);
scaleFactor = Mathf.Pow(kLogBase, logWeightedAverage);

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

假设Reference Resolution为400*300，Screen Size为200*600 大小关系是

Reference Resolution Width 是 Screen Size Width的2倍

Reference Resolution Height 是 Screen Size 的0.5倍

看起来会像下图

当March为0.5时，ScaleFactor应该要是 1 (拉平)

ScaleFactor Width： 200/400=0.5

ScaleFactor Height：600/300=2

一般混合：

ScaleFactor = March * ScaleFactor Width + March * ScaleFactorHeight

ScaleFactor = 0.5 * 0.5 + 0.5 * 2 = 1.25

对数混合：

logWidth：log2(0.5) = -1

logHeight：log2(2) = 1

logWeightedAverage：0

ScaleFactor：20 = 1

scaleFactor一般混合为1.25，对数混合为1，结果很明显，使用对数混合能更完美的修正大小


Constant Physical Size

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

1. Physical Unit：使用的单位种类


2. Fallback Screen DPI：备用Dpi，当找不到设备Dpi时，使用此值

3. Default Sprite DPI：预设的图片Dpi

float currentDpi = Screen.dpi;
float dpi = (currentDpi == 0 ? m_FallbackScreenDPI : currentDpi);
float targetDPI = 1;
switch (m_PhysicalUnit)
{
    case Unit.Centimeters: targetDPI = 2.54f; break;
    case Unit.Millimeters: targetDPI = 25.4f; break;
    case Unit.Inches:      targetDPI =     1; break;
    case Unit.Points:      targetDPI =    72; break;
    case Unit.Picas:       targetDPI =     6; break;
}

SetScaleFactor(dpi / targetDPI);
SetReferencePixelsPerUnit(m_ReferencePixelsPerUnit * targetDPI / m_DefaultSpriteDPI);

结论：

■ ScaleFactor 为 “目前硬体dpi” 佔了 “目标单位” 的比例

■ ReferencePixelsPerUnit 要与目前的Dpi在运算求出新的值，再传入Canvas中求出大小，公式如下：

新的 Reference Pixels Per Unit = Reference Pixels Per Unit * Physical Unit / Default Sprite DPI

UI大小 = 原图大小(Pixels)  /  (Pixels Per Unit / 新的 Reference Pixels Per Unit)

参考资料
■ Unity – Manual: Canvas

http://docs.unity3d.com/Manual/class-Canvas.html

原文作者： k79k06k02k
原文链接： http://k79k06k02k.com/blog/24/unity/unity-ugui-%E5%8E%9F%E7%90%86%E7%AF%87%E4%BA%8C%EF%BC%9Acanvas-scaler-%E7%B8%AE%E6%94%BE%E6%A0%B8%E5%BF%83
[UGUI]深入理解Canvas Scaler
安宁技术博客
07-09 8546
Canvas Scaler：这是一个理解起来相当繁琐复杂的一个组件，但又是一个至关重要的组件，不彻底了解它，可以说对UGUI的布局和所谓的“自适应”就没有一个完整的认识。Canvas Scale指的是UI Canvas整体的缩放比例，这个值在Canvas 的Render Mode为 Screen Space – Overlay 的情况下默认为1
Unity UGUI 原理篇(二)：Canvas Scaler 縮放核心
N的专栏
11-16 316
Unity UGUI 原理篇(二)：Canvas Scaler 縮放核心 https://blog.csdn.net/gz_huangzl/article/details/52484611   Canvas Scaler Canvas Scaler是Unity UI系統中，控制UI元素的總體大小和像素密度的Compoent，Canvas Scale...
Unity屏幕适配——立项时设置
NRatel的博客
03-14 1257
其中：1334 是设计高2 是Camera（相机）的Size属性用于定义相机视图的垂直大小。这个值实际上是相机视图的一半高度。100 UI坐标系相对世界坐标系的缩放倍数。
【Unity学习笔记】Canvas Scaler组件
一白梦人的博客
06-03 8305
声明：此篇文章是个人学习笔记，并非教程，所以内容可能不够严谨。可作参考，但不保证绝对正确。如果你发现我的文章有什么错误，非常欢迎指正，谢谢哦 UI自适应 在学习Canvas Scaler组件之前，先来了解一下UI自适应，UI自适应就是让我们可以不对每种分辨率的屏幕上都设计一种UI布局，而只需要在开发的时候设计一种UI布局，就可以让UI在不同分辨率的屏幕上都能尽量正常的显示，这将会节省巨大的工作量。 而这一次要学习的Canvas Scaler组件就是用来快速的实现UI自适应功能的组件。 Canvas Scal
Unity UGUI 之 Canvas Scaler
咩咩的博客
07-18 2286
嘻嘻
Unity中的CanvasScaler组件讲解
Xiao_Chen____的博客
06-05 1106
Unity中的CanvasScaler组件是UGUI系统中的一个关键组件，主要用于控制画布的缩放和适配，以确保UI在不同屏幕分辨率下的显示效果一致。
UGUI-- Canvas Scaler 分辨率自适应组件
Go_Accepted的博客
04-17 1673
1、CanvasScaler是什么 用于分辨率自适应的画布缩放控制器，主要负责在不同分辨率下UI控件大小自适应，并不负责位置，位置由之后的RectTransform组件负责，提供了3种分辨率自适应的模式 2、基本概念： （1）屏幕分辨率：Game窗口种的Stats统计数据窗口看到的当前“屏幕”分辨率（Screen）会参与分辨率自适应的计算 （2）画布大小和缩放系数：选中Canvas对象后在RectTransform组件种看到的宽高和缩放（Width，Height，Scale） 宽高 * 缩..
Unity UGUI渲染机制剖析：避免性能瓶颈的终极指南
![Unity UGUI渲染机制剖析：避免性能瓶颈的终极...本文首先介绍UGUI渲染机制的基础知识和原理，然后深入探讨了性能优化的实战技巧，包括层级管理和图集应用等策略。文章接着介绍了高级渲染技术，如动画特效的优化和Shad
Unity UGUI 官方示例 Demo
05-16
6. **CanvasScaler**：这个组件用于处理UI的缩放，确保UI在不同分辨率和设备上都能正确显示。它可以设置为不同的缩放模式，如Constant Pixel Size、Scale With Screen Size等。 7. **Input Field**：Unity UGUI提供...
Unity UGUI入门
不断努力向上攀登的路，比站在顶峰更加让人热血沸腾！
04-19 1537
没有限制的，自动排序。
Unity3d UI自适应CanvasScaler测试工程
06-10
Unity3d UI自适应CanvasScaler测试工程， 建议先看说明：
UGUI（二）- Canvas Scaler
THE NO.5的博客
01-10 690
本章节只讲 Canvas Scaler 组件，关于 UI 的屏幕适配在学完 UGUI 基础组件之后会单独写一章节，文章略长   什么是 Canvas Scaler Canvas Scaler 这个组件用来做整体 UI 屏幕适配的。为什么是整体适配？因为适配时还会用到 RectTransform 中的 Anchor 属性。Canvas Scaler 同样挂在 Canvas Gameobject ...
【unity游戏开发入门到精通——UGUI】CanvasScaler画布缩放器组件
最新发布
向宇
04-13 841
恒定像素模式，它不会让UI控件进行分辨率大小自适应，会让UI控件始终保持设置的尺寸大小显示。一般在进行游戏开发极少使用这种模式，除非通过代码计算来设置缩放系数。缩放模式下的所有匹配模式都会基于参考分辨率进行自适应计算，可以填写常用的分辨率大小1920x1080。游戏开发一般都使用缩放模式。使用建议存在横竖屏切换，选择Expand(拓展匹配，有黑边)和Shrink(收缩匹配，有裁剪)不存在横竖屏切换（定死的横屏或者竖屏游戏），使用(宽高匹配)模式。横屏游戏Match=1，竖屏游戏Match=0。
Unity UGUI的CanvasScaler（画布缩放器）组件的介绍及使用
alianblank的博客
07-20 733
CanvasScaler是Unity中UGUI系统中的一个组件，用于控制画布的缩放和适配。通过CanvasScaler组件，可以实现UI界面在不同分辨率下的自适应显示。
Unity组件大全之 Layout 组件 |（22）Canvas Scaler 画布缩放器：自适应UI的秘诀
Unity打怪升级
09-16 1743
在Unity中，UI元素需要适应不同的屏幕尺寸和分辨率，以确保在各种设备上都能提供良好的用户体验。Canvas Scaler组件正是为此目的而设计，它能够帮助开发者轻松实现UI的自适应缩放。本文将详细介绍Canvas Scaler组件的工作原理、属性以及如何使用它来创建响应式UI。
Unity Canvas Scaler 组件的使用
hello_1995的博客
01-03 3539
Canvas Scaler 这个组件用来做整体 UI 屏幕适配的。为什么是整体适配？因为适配时还会用到 RectTransform 中的 Anchor 属性。Canvas Scaler 的缩放模式与 Canvas 的渲染模式相关：当 Canvans 渲染模式为 Screen Space - Overlay 和 Screen Space - Camera 时，缩放模式有三种；当 Canvans 渲染模式为 World Space 时，缩放模式只有一种。...
Unity3d UI自适应之Canvas Scaler详细说明和测试项目源码
qq_33789001的博客
06-10 5023
前言 UI在项目中必不可少，需求不一定都是16:9，各种比例分辨率的屏幕层出不穷，这样如何实现UI自适应这显得及其重要，这里我们就来讲解一下自适应中及其关键的Canvas Scaler。 说明 如下是官网给出的说明： 这里有三种缩放模式： 1.恒定像素模式（Constant Pixel Size） 无论屏幕大小如何，UI 元素都保持相同的像素大小。 2.根据屏幕缩放（Scale With Screen Size） 即：屏幕越大，UI 元素越大。 3.恒定物理尺寸（Constant Physical Siz
Canvas Scaler
记录
07-21 425
作用：分辨率自适应，计算ui控件的缩放系数 不同分辨率下Ui控件大小自适应，不负责位置 Game窗口的Stats(统计数据 )查看屏幕分辨率 Canvas的Rect Transform组件 宽高(Width,Height)乘以缩放（X，Y）=屏幕分辨率 Reference Resolution 参与分辨率自适应的计算 适配方式： Constant Pixel Size 不论屏幕大小 UI始终保持相同像素大小 Scale With Screen Size 根据屏幕尺寸进行缩放UI Constant Physi
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值