浅谈UGUI中Canvas RectTransform的Scale

原创 已于 2022-09-04 23:56:39 修改 · 1.7k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ui #前端

于 2021-02-22 18:46:24 首次发布
本文详细解析了Unity中Canvas的RectTransform组件的Scale值如何受Canvas的RenderMode和CanvasScaler的UIScaleMode设置影响。在ScreenSpace-Overlay模式下，Scale不可直接修改，需通过CanvasScaler的ScaleFactor调整。而在WorldSpace模式下，Scale可直接修改。对于ScreenSpace-Camera模式，Scale由引擎自动计算且不可更改。此外，文章还介绍了正交相机设置与Canvas Scale的关系，并给出了推荐的Size设置规则。对于SpriteRenderer组件，作者建议遵循特定的Size设置原则。

前言

Canvas的Rect Transform组件的Scale值和Canvas组件的Render Mode,以及Canvas Scaler组件的UI Scale Mode设置有关。

当Render Mode为Screen Space - Overlay:

  • UI Scale Mode为Constant Pixel Size时
    默认情况下Canvas的Rect Transform组件的Scale值为1，且界面中修改Rect Transform的Scale的区域灰化，不可操作。
    若要修改Rect Transform的Scale，可以通过修改Canvas Scaler组件的Scale Factor来实现。

当Render Mode为World Space

UI Scale Mode只有World这一项，Scale值默认为1，但是可以修改。

当RenderMode为Screen Spcae - Camera

该模式下Scale值是由引擎内部自动计算得到的，且不能修改。

该模式依赖一个Camera，通常情况下在UI系统中我们会使用正交相机。下文详细探讨正交相机模式下的Scale值，透视相机后面有空再推导。

假设当前屏幕的高度为ScreenH，正交相机有个用户可以设置的参数Size，那么有公式如下：

ScreenH*Scale*
最低0.47元/天 解锁文章
ugui在运行时改变RectTransform的大小
La ribs 的博客
03-09 2万+
在代码中动态改变RectTransform大小的方法如下所示： 1：直接对sizeDelta属性进行赋值，其中X和Y可以对应理解成width和height var rt = gameObject.GetComponent(); rt.sizeDelta = new Vector2(100, 30); 2：使用SetSizeWithCurrentAnchors函数来进行设定，其中Horizon
一、Unity4.6UI-------Canvas
热门推荐
不知道干嘛的
01-25 2万+
其实我自己也没理解。。。随便写写。 ==================================================================================== Rect Transform Rect Transform在2D的UI中，对应于3D的Transform。用于显示调整2DUI中的缩放比例、位置、尺寸、角度等。
RectTransform 的 scale对计算鼠标的影响
weixin_43149049的博客
02-01 773
最近项目有需求要在游戏里面弄出取色版 然后参考了某位大神的博客直接导入插件 https://blog.youkuaiyun.com/qq_29579137/article/details/72834457 然后在UGUI下面发现取色位置和鼠标位置不太对 private Vector3 mousPosition( ) { return (Input.mousePosition - m_t...
Unity3D–RectTransfrom 记录笔记
weixin_30684743的博客
03-07 370
一、基本要点 部分来源:http://www.2fz1.com/post/unity-ugui-recttransform/ RectTransform继承于Trasnfrom , 在Trasnform基础上,RectTransform增加了轴心(pivot),锚点(anchors),和尺寸变化量(sizeDelta). 其中anchors和pivot都是坐标原点在左下角的0-1向量空间,0-1代...
UGUI练习 - 分页滚动、随着滚动调整Scale动效
Ha啤酒来大杯的博客
09-13 268
项目地址
UGUI中RectTransform的使用
weixin_39247181的博客
04-03 2219
Canvas子节点中的GameObject的Transform组件会被被RectTransform（下文简称rectT）组件所代替。可以看到，除了position，rotation，scale“三巨头”之外，还有anchors，pivot以及左上角的框框。 他们代表队是对齐方式。 首先是默认的对齐方式：我们可以看到，左上角的图标上写着middle，center。 anchors和pivot都是0.5。这个情况最贴近中学所学的平面直角坐标系： 1.已父节点的中心点为原点 2.坐标为x，y 3.宽高为widt
UGUI学习-RectTransform组件
qq_41958491的博客
11-29 717
RectTransform基础概念 Anchors 锚点：当前UI对于它的中心点的对其方式 Pos X和Pos Y就是中心点相对于锚点的位置 Width和Height就是UI的宽和高 Pivot 中心点 点击可以切换自定义中心点或将中心点居中 当把锚点的四瓣拉开，并且分别设定为一定的位置时 Pos X会变成Left，表示此时左锚点与这个UI左边的距离（左锚点在其左边为正） Width会变成Right，表示此时右锚点与这个UI右边的距离（右锚点在其右边为正） P.
【UGUI】一、RectTransform
天行健，君子以自强不息
04-29 195
RectTransform、脚本访问RectTransform、锚点、中心点
UGUI RectTransform的SizeDelta属性
Morris-w的专栏
02-18 556
根据已知内容，
U3D UGUI学习2 - RectTransform
攀大小熊猫的专栏
09-17 954
总的来说整合了NGUI很多零散功能，比如NGUI2.X处理拉伸要额外套脚本，NGUI3.X开始引入新的锚点。再加上依赖BoxCollider使得整个HUD显示非常乱 而UGUI很清晰明了，你也能看清楚拉伸怎么设置。 但也有一些误导性的设计以及不人性化的设计。   1.Anchor RectTransform相交于NGUI，其实稍显复杂。在NGUI 3.x里你要处理拉伸
动态设置RectTransform的大小：Rect.size与sizeDelta
u014589770的博客
07-30 1182
直接参考吧： https://blog.youkuaiyun.com/abcab124/article/details/106273376 https://blog.youkuaiyun.com/qq_33994566/article/details/90634081 https://blog.youkuaiyun.com/zcaixzy5211314/article/details/86839636 https://blog.youkuaiyun.com/qq346111322/article/details/80204138 https://blog
在UI界面中，用Canvas还是用RectTransform做根节点更好？哪种方法效率更高？
f781976192的博客
03-30 390
Canvas划分是个很大的话题。简单来说，因为一个Canvas下的所有UI元素都是合在一个Mesh中的，过大的Mesh在更新时开销很大，所以一般建议每个较复杂的UI界面，都自成一个Canvas(可以是子Canvas)，在UI界面很复杂时，甚至要划分更多的子Canvas。同时还要注意动态元素和静态元素的分离，因为动态元素会导致Canvas的mesh的更新。最后，Canvas又不能细分的太多，因为会导...
Unity如何修改UGUI下组件的长度和宽度
alayeshi的专栏
09-08 2万+
Unity如何修改UGUI下组件的长度和宽度，之前一直没用过，现在才知道的（用的5.3.2版本）。 只有一句话：this.gameObject.GetComponent().sizeDelta = new Vector2(200F,100F); 具体例子： 在ugui里建立一个image图片： 默认大小为100*100我们要动态改为200*100 只用下面代码： using
UGUI之RectTransform知识点 图解
陌的专栏
05-23 3332
最近因为要做各种UI控件，于是与UGUI杠上了。首当其冲的就是RectTransform，最坑爹的是，这货竟然不是UGUI框架的，代码竟然封装在unityengine里面，所以，不得不吐槽下unity的开源动机，根本就是留一手，估计只是因为自己的研发力量不足，所以开放一部分出来而已。        RectTransform继承于Transform，配合Canvas专门交给UGUI使用，具体这边
关于UGUI Canvas RectTransfrom Scale的求法
ookBeng的博客
11-15 324
scale = (UI摄像机Size/像素比例)/(当前分辨率高/像素比例/2) UI摄像机Size=当前UI分辨率高/2.
Unity-UGUI相关
weixin_30566111的博客
05-16 209
转：http://k79k06k02k.com/blog/334/unity/unity-ugui-%E5%8E%9F%E7%90%86%E7%AF%87%E4%B8%89%EF%BC%9Arecttransform 目標： ■ 理解RectTransform Component ■Anchor (錨點) ■Pivot (支點) ■ Blue Print Mode 與Raw ...
Unity RectTransform组件详解
ordinary_pillar的博客
10-22 4789
Unity RectTransform组件详解 文章目录Unity RectTransform组件详解1.正式学习之前的思考—ui元素的定位及适配问题定位适配2.Unity RectTransform面板详解2.1 总览2.2 Pivot2.3 Anchors3 Unity RectTransform脚本详解3.1 成员变量3.2 公有方法 1.正式学习之前的思考—ui元素的定位及适配问题 定位 ...
RectTransform
elineSea的博客
09-20 713
RectTransform的大小改变时有一个回调函数：OnRectTransformDimensionsChange。当ContentSizeFitter来自动调整RectTransform的大小时并不能立马生效，而是需要到下一帧才能得到正确的大小，此时该回调便有用武之地了。然而该回调的触发确有点奇怪会被触发多次且有时触发的次数还不同，另一解决办法是在获取RectTransform的size时调用...
Unity RectTransform Scale Handler - 如何在Runtime运行时拖动缩放窗口尺寸
当代野生程序猿
03-03 2001
如何在Runtime运行时拖动缩放UI窗口的尺寸
UGUI中canvas的源码
最新发布
06-19
<think>我们正在分析UnityUGUICanvas的源码实现。根据用户提供的引用，特别是引用[2]提到“UGUI源码分析”，但引用内容中并未给出具体源码分析细节。因此，我们需要结合Unity官方提供的UGUI源码仓库进行说明。UnityUGUI的源码托管在GitHub上：https://github.com/Unity-Technologies/uGUI.git由于用户要求分析Canvas的源码实现，我们应关注Canvas组件相关的代码。在UGUI源码中，Canvas相关的核心代码位于：-`UnityEngine.UI/UI/Core/Canvas.cs`-另外，Canvas的渲染和更新机制可能还涉及`CanvasRenderer`、`CanvasUpdate`等。###核心功能分析1.**Canvas组件**：负责管理UI元素的渲染。它决定UI元素是渲染在屏幕空间还是世界空间，并处理渲染顺序（通过SortingLayer和OrderinLayer）。2.**Canvas的渲染流程**：-当Canvas组件的`renderMode`设置为`ScreenSpaceOverlay`时，UI元素直接在屏幕上渲染，不需要摄像机。-当设置为`ScreenSpaceCamera`或`WorldSpace`时，需要指定一个摄像机，UI元素将在这个摄像机所定义的视口中渲染。3.**Canvas的更新**：-UGUI使用脏标记系统（DirtyFlags）来标记需要更新的UI元素。当UI元素发生变化（如位置、大小、颜色等）时，会标记为脏，然后在下一帧进行重新构建（Rebuild）。-Canvas组件本身会注册到CanvasUpdateRegistry中，在渲染前执行重建（Rebuild）和布局（Layout）更新。###源码关键点在`Canvas.cs`中，我们可以找到以下关键部分：```csharpnamespaceUnityEngine.UI{[DisallowMultipleComponent][RequireComponent(typeof(CanvasRenderer))][AddComponentMenu("UI/Canvas",10)][ExecuteAlways]publicclassCanvas:Behaviour{//...省略部分代码...//渲染模式[SerializeField]privateRenderModem_RenderMode=RenderMode.ScreenSpaceOverlay;publicRenderModerenderMode{get{returnm_RenderMode;}set{m_RenderMode=value;}}//当渲染模式为ScreenSpaceCamera或WorldSpace时使用的摄像机[SerializeField]privateCameram_WorldCamera;publicCameraworldCamera{get{returnm_WorldCamera;}set{m_WorldCamera=value;}}//...其他属性和方法...//标记Canvas为脏，需要更新publicvirtualvoidRebuild(CanvasUpdateexecuting){if(executing==CanvasUpdate.Prelayout){//执行预布局更新}//...其他更新阶段...}//...其他代码...}}```###Canvas的更新机制Canvas的更新由`CanvasUpdateRegistry`管理。这个类维护了两个列表：需要布局重建的组件列表和需要图形重建的组件列表。在每一帧的预渲染阶段（通过`Canvas.willRenderCanvases`事件），这些重建操作会被执行。###性能优化相关-**避免频繁的Canvas重建**：因为重建操作（尤其是布局重建）可能很昂贵，所以应尽量减少UI元素的变动，尤其是涉及布局变化的操作。-**使用多个Canvas**：将频繁更新的UI元素和静态UI元素分开放在不同的Canvas上，可以减少重建的范围。因为每个Canvas独立重建，这样静态部分就不会被频繁重建影响。###引用说明根据引用[1][2][3][4][5]，它们提供了关于Canvas组件的基础知识、优化方法和使用示例，但未深入源码。因此，我们的源码分析主要基于官方源码仓库。###相关问题§§相关问题§§1.Canvas的渲染模式有哪些？它们分别适用于什么场景？2.如何优化Canvas的重建性能？3.Canvas的脏标记系统是如何工作的？4.在UGUI中，CanvasUpdateRegistry的作用是什么？5.为什么需要将UI元素分层到多个Canvas上？</think>### Unity UGUI Canvas 源码分析 #### 1. **Canvas 核心功能** Canvas 是 UGUI 的渲染容器，负责管理 UI 元素的绘制顺序和渲染模式。关键源码位于： - `Canvas.cs`（核心逻辑） - `CanvasRenderer.cs`（渲染实现） - `CanvasUpdateRegistry.cs`（更新调度） 在 `Canvas.cs` 中，核心属性包括： ```csharp public class Canvas : Behaviour { public RenderMode renderMode; // 渲染模式（ScreenSpaceOverlay/ScreenSpaceCamera/WorldSpace） public Camera worldCamera; // 关联的摄像机 public float planeDistance; // UI平面与摄像机的距离 // ... } ``` [^2] #### 2. **渲染流程** - **脏标记系统**：当 UI 元素属性（位置、颜色等）变化时，标记 `Graphic` 为脏，触发重建。 - **渲染队列**：通过 `CanvasRenderer` 将顶点数据提交到 Unity 渲染管线。 - **层级排序**：由 `SortingLayer` 和 `Order in Layer` 控制绘制顺序。 关键代码片段（简化）： ```csharp // CanvasRenderer.cs protected void SetVertices(List<UIVertex> vertices) { // 将顶点数据传递给底层渲染系统 InternalSetVertices(vertices); } ``` #### 3. **性能优化机制** - **静态批处理**：未变化的 UI 元素合并批次（通过 `CanvasRenderer.cull` 检测）。 - **动态重建**：仅重绘脏区域（由 `CanvasUpdateRegistry` 管理）： ```csharp // CanvasUpdateRegistry.cs private void PerformUpdate() { // 遍历所有脏元素并重建 foreach (var element in m_LayoutRebuildQueue) { element.Rebuild(CanvasUpdate.Layout); } } ``` [^1][^2] #### 4. **与 Canvas Scaler 协同** `CanvasScaler.cs` 处理分辨率适配： - 根据 `Screen.width/height` 动态缩放 UI。 - 支持三种模式：`Constant Pixel Size`、`Scale with Screen Size`、`Constant Physical Size`。 #### 5. **关键设计思想** 1. **事件驱动更新**：基于 `UnityEngine.EventSystems` 的事件系统触发 UI 刷新。 2. **组件解耦**：`Canvas` 仅管理容器状态，具体渲染由 `Graphic` 派生类（如 `Image`）实现。 3. **异步重建**：通过 `Canvas.willRenderCanvases` 事件在渲染前统一处理更新。 > 提示：完整源码可查看 [Unity UGUI GitHub 仓库](https://github.com/Unity-Technologies/uGUI.git)[^1]。 --- ### 相关问题
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

iningwei

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值