Unity(2022.3.41LTS) - UI详细介绍- Panel(面板)和RectTransform组件

news2024/12/24 3:06:36

目录

零. 简介

一、功能与作用

二、属性与设置

三、使用方法

四、优化和注意事项

五.面板总结

六. RectTransform

A、主要属性

B、布局控制

C、代码控制

D.实例

控制对象靠近底部

对象紧贴底部


零. 简介

在 Unity 中，Panel（面板）是一种常用的 UI 容器组件，用于组织和管理其他 UI 元素。

一、功能与作用

  1. 容器功能：Panel 主要作为一个容器，用于容纳其他 UI 元素，如按钮、文本、图像等。它可以帮助你组织和布局 UI，使界面更加清晰和易于管理。
  2. 背景和装饰：Panel 可以设置背景颜色、图像或材质，为其内部的 UI 元素提供一个背景或装饰效果。这可以增强 UI 的视觉吸引力，使其更加美观和专业。
  3. 裁剪和遮罩：通过设置 Panel 的裁剪模式，可以实现对其内部 UI 元素的裁剪效果。例如，可以使用矩形裁剪或圆形裁剪来显示特定形状的区域，或者使用遮罩效果来隐藏部分 UI 元素。
  4. 层级管理：Panel 可以帮助你管理 UI 元素的层级关系。通过将不同的 UI 元素放置在不同的 Panel 中，可以轻松地控制它们的显示顺序和遮挡关系。

二、属性与设置

  1. Rect Transform：Panel 具有 Rect Transform（矩形变换）组件，用于控制其大小、位置和旋转。你可以通过调整 Rect Transform 的属性来设置 Panel 的尺寸和在屏幕上的位置。
  2. Image：Panel 可以设置一个背景图像，可以是 Sprite（精灵图）或 Texture2D（纹理）。通过设置 Image 组件的属性，可以调整图像的颜色、透明度、平铺模式等。
  3. Canvas Group：Panel 通常会包含一个 Canvas Group（画布组）组件。Canvas Group 可以用于控制 Panel 及其内部 UI 元素的整体透明度、交互性和是否响应射线检测等属性。
  4. Graphic Raycaster：如果 Panel 需要接收交互事件，如鼠标点击或触摸，它需要包含一个 Graphic Raycaster（图形射线投射器）组件。Graphic Raycaster 负责检测 UI 元素是否被点击，并将事件传递给相应的处理程序。

三、使用方法

  1. 创建 Panel：在 Unity 中，可以通过 GameObject -> UI -> Panel 菜单创建一个新的 Panel。创建后，你可以在 Inspector 窗口中调整 Panel 的属性和设置。
  2. 添加 UI 元素：将其他 UI 元素（如按钮、文本、图像等）作为 Panel 的子对象添加到 Panel 中。你可以通过拖放 UI 元素到 Panel 上或者在 Hierarchy 视图中手动创建子对象的方式来添加 UI 元素。
  3. 布局和排列：使用 Unity 的 UI 布局系统（如 Horizontal Layout Group、Vertical Layout Group、Grid Layout Group 等）可以自动排列 Panel 内部的 UI 元素，使其具有良好的布局和对齐效果。
  4. 响应交互事件：如果 Panel 或其内部的 UI 元素需要响应交互事件，可以为它们添加相应的事件处理程序。例如，可以使用 Unity 的事件系统（Event System）来检测按钮的点击事件，并执行特定的函数。

四、优化和注意事项

  1. 性能优化：如果 Panel 内部包含大量的 UI 元素，可能会对性能产生一定的影响。为了提高性能，可以考虑使用合批技术（Batching）来减少绘制调用次数。同时，避免在每一帧都更新 Panel 的属性和内部 UI 元素，以减少不必要的计算。
  2. 层级管理：注意 Panel 之间的层级关系，避免出现遮挡或显示异常的情况。可以使用 Rect Transform 的 Z 轴位置或 UI 元素的 Order in Layer 属性来调整层级。
  3. 响应范围：确保 Panel 的响应范围正确设置，以便用户能够准确地与 Panel 及其内部的 UI 元素进行交互。可以通过调整 Rect Transform 的大小和 Graphic Raycaster 的设置来控制响应范围。
  4. 可扩展性：在设计 UI 时，考虑 Panel 的可扩展性和灵活性。如果可能，尽量使用动态布局和自适应大小的方式，以便在不同的屏幕尺寸和分辨率下都能正常显示。

五.面板总结

Panel 在 Unity 的 UI 系统中起着重要的作用，它可以作为一个容器来组织和管理其他 UI 元素，提供背景和装饰效果，实现裁剪和遮罩，以及管理 UI 元素的层级关系。通过合理地使用 Panel，可以创建出美观、易用且性能良好的用户界面。

六. RectTransform

在 Unity 中，RectTransform 是用于控制 UI 元素位置、大小和旋转的组件。以下是对 RectTransform 组件的详细介绍：

A、主要属性

  1. Anchor Presets（锚点预设）：

    • RectTransform 通过设置锚点（Anchors）来确定 UI 元素在父容器中的相对位置。锚点由四个点组成，分别对应 UI 元素的四个角与父容器的相对位置。
    • Anchor Presets 提供了一些常见的锚点预设，如左上角对齐、中心对齐、拉伸等，可以快速设置锚点位置。
    • 通过调整锚点，可以使 UI 元素在不同屏幕尺寸下自适应布局。

  2. Position（位置）：

    • 表示 UI 元素在父容器中的位置。可以以像素为单位设置绝对位置，也可以通过设置相对于锚点的偏移量来确定相对位置。
    • 如果锚点设置为拉伸模式，Position 的值会根据锚点的拉伸比例进行计算。

  3. Size Delta（大小差值）：

    • 用于设置 UI 元素的宽度和高度相对于锚点的差值。例如，如果 Size Delta 的 X 值为 100，Y 值为 50，且锚点设置为中心对齐，那么 UI 元素的宽度将比父容器宽度小 100 像素，高度将比父容器高度小 50 像素。
    • 如果锚点设置为拉伸模式，Size Delta 的值会根据锚点的拉伸比例进行调整。

  4. Pivot（轴心点）：

    • 决定了 UI 元素的旋转和缩放中心。取值范围为 0 到 1，表示在 UI 元素的局部坐标系中的位置。例如，(0.5, 0.5) 表示 UI 元素的中心。
    • 调整轴心点可以实现不同的旋转和缩放效果。

B、布局控制

  1. 自动布局：

    • RectTransform 可以与 Unity 的自动布局系统（如 Horizontal Layout Group、Vertical Layout Group、Grid Layout Group 等）结合使用，实现自动排列和调整 UI 元素的位置和大小。
    • 通过设置这些布局组件的属性，可以轻松创建响应式布局，适应不同的屏幕尺寸和分辨率。

  2. 锚点和拉伸：

    • 根据锚点的设置，UI 元素可以在父容器中进行拉伸或保持固定大小。例如，如果锚点设置为四个角都与父容器对齐，那么 UI 元素将随着父容器的大小变化而拉伸。
    • 可以通过调整 Size Delta 和锚点的组合来实现不同的布局效果。

C、代码控制

  1. 通过脚本可以动态地修改 RectTransform 的属性，以实现 UI 元素的动态布局和动画效果。例如，可以使用以下代码在运行时更改 UI 元素的位置和大小：
using UnityEngine;
using UnityEngine.UI;

public class RectTransformController : MonoBehaviour
{
    public RectTransform myRectTransform;

    void Start()
    {
        // 设置位置
        myRectTransform.anchoredPosition = new Vector2(100, 50);

        // 设置大小
        myRectTransform.sizeDelta = new Vector2(200, 100);
    }
}
  1. 可以获取 RectTransform 的属性值，并根据这些值进行计算和调整。例如，可以根据屏幕尺寸动态调整 UI 元素的大小和位置，以实现响应式布局。

D.实例

控制对象靠近底部

这样的话不管怎么改编屏幕的大小,依然在底部

对象紧贴底部

修改轴心为0

位置Y为0

而且因为轴心为0缩放的时候,还可以朝向一遍,而不是两边,可以用来做比如树状图.

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2109538.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

《ICT技术成熟度曲线(2024)：API全生命周期管理》

《ICT技术成熟度曲线(2024)：API全生命周期管理》

来源：Gartner。 近期Gartner发布的《Hype Cycle for ICT in China, 2024》中，将全生命周期API管理收录其中。 •收益评级：高 •市场渗透率：目标受众的 5% 至 20% •成熟度：新兴阶段  &am…
阅读更多...
ssm微信小程序的英语学习激励系统论文源码调试讲解

ssm微信小程序的英语学习激励系统论文源码调试讲解

2 关键技术介绍 2.1 SSM框架 开发信息管理系统的主流框架是SSM（Spring Spring MVC MyBatis），SSM框架web层使用Spring MVC框架，使传输前后端数据变得简单；对于业务层使用Spring作为轻量级控制反转和面向切面的容器框…
阅读更多...
基于B/S的城市公交线路管理及查询系统

基于B/S的城市公交线路管理及查询系统

2 系统需求分析 需求分析是对所要做的系统进行分析，通过使用文字和图表的综合形式，以相对来说容易让人理解的方式去描绘需求的数据、功能、行为，更可以直接评审其正确性、完整性和一致性[2]。通过查询相关的资料，对所做的系统进行…
阅读更多...
黑种草：花语中的爱与思念

黑种草：花语中的爱与思念

一、黑种草的神秘面纱 （一）产地 黑种草原产于欧洲南部，随着被引种栽培，现在在中国长江流域及华北、新疆、云南、西藏等地也有栽培。它性喜冷凉气候，忌高温高湿，对生长环境有一定要求。在适宜的环境中&…
阅读更多...
好看的个人导航页面html源码

好看的个人导航页面html源码

源码介绍 好看的个人导航页面html源码，适合做博客介绍页或者公司介绍页。喜欢的朋友可以下载使用，源码HTML源码，记事本简单修改文字即可，上传到服务器 效果预览 源码获取 好看的个人导航页面html源码
阅读更多...
TypeError: ‘ChatCompletion‘ object is not subscriptable 解决方案

TypeError: ‘ChatCompletion‘ object is not subscriptable 解决方案

大家好，我是爱编程的喵喵。双985硕士毕业，现担任全栈工程师一职，热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…
阅读更多...
S3C2440开发板：时钟，PWM定时器控制蜂鸣器发声

S3C2440开发板：时钟，PWM定时器控制蜂鸣器发声

时钟 时钟和电源管理模块由三部分组成：时钟控制，USB 控制和电源控制。 S3C2440A 中的时钟控制逻辑可以产生必须的时钟信号，包括 CPU 的 FCLK，AHB 总线外设的 HCLK 以及 APB 总线外设的 PCLK。S3C2440A 包含两个锁相环&#xff08…
阅读更多...
QT新建项目并运行操作步骤

QT新建项目并运行操作步骤

1、打开qt creator 2、选择new project后选择qt widgets application，点choose 3、输入工程名称和存储路径 4、点击下一步 5、选择Qwidget 6、点击下一步，完成项目新建 7、点击运行，程序即可运行结果，显示一个界面
阅读更多...
U盘加密软件哪个好用？盘点2024最受欢迎的10款U盘加密软件（数据安全）

U盘加密软件哪个好用？盘点2024最受欢迎的10款U盘加密软件（数据安全）

随着信息安全越来越受到重视，U盘作为便捷的数据存储工具，在携带和传输重要文件时，往往面临数据泄露和丢失的风险。为此，选择一款好用且安全的U盘加密软件变得尤为重要。 为了帮助大家在2024年更好地保护敏感数据，以下…
阅读更多...
Vue如何将网页转换成图片或PDF并上传

Vue如何将网页转换成图片或PDF并上传

一.使用html2canvas获取页面元素并绘制成图片 htmlcanvas中文文档 npm install --save html2canvas<template><div><button click"uploadImg">上传</button><div ref"yourDom"><!-- ...图片中页面内容 --><img s…
阅读更多...
【Linux】自定义协议与序列化和反序列化

【Linux】自定义协议与序列化和反序列化

一、自定义协议 1.1 自定义报文格式 在前面的博客中&#xff0c;我们可以知道在TCP协议中&#xff0c;面向的是字节流&#xff1b;而UDP协议中面向的是数据报。因此&#xff0c;在手写简单的TCP和UDP服务器中&#xff0c;所使用的是接收函数和发送函数不同。因此&#xff0c;在…
阅读更多...
docker images

docker images

docker 装好docker之后&#xff0c;先掌握一下docker启动与停止 docker启动关闭状态 systemctl 命令是系统服务管理器指令&#xff0c;它是 service 和 chkconfig 两个命令组合。 查看 docker 的启动状态 systemctl status docker关闭 docker systemctl stop docker启动 …
阅读更多...
基于空间结构光场照明的三维单像素成像

基于空间结构光场照明的三维单像素成像

单像素成像是一种新兴的计算成像技术。该技术使用不具备空间分辨能力的单像素探测器来获取目标物体或场景的空间信息。单像素探测器具有高的时间分辨率、光探测效率和探测带宽&#xff0c;因此单像素光学成像技术在散射、弱光等复杂环境下相较于传统面阵成像技术展现了很大优势…
阅读更多...
A题 农村公交与异构无人机协同配送优化

A题 农村公交与异构无人机协同配送优化

1.1问题背景 农村地区的独特地理和社会结构带来了配送上的特殊挑战。复杂的地形&#xff0c;如山地和河流等自然障碍&#xff0c;使得道路建设困难重重&#xff0c;导致道路网络稀疏&#xff0c;而分散的配送点进一步增加了物流的复杂性。这些因素叠加&#xff0c;使得传统配送…
阅读更多...
linux top命令介绍以及使用

linux top命令介绍以及使用

文章目录 介绍 top 命令1. top 的基本功能2. 如何启动 top3. top 的输出解释系统概况任务和 CPU 使用情况内存和交换空间进程信息 4. 常用操作 总结查看逻辑CPU的个数查看系统运行时间 介绍 top 命令 top 是一个在类 Unix 系统中广泛使用的命令行工具&#xff0c;用于实时显示…
阅读更多...
建模导论的最后一个视频笔记

建模导论的最后一个视频笔记

建模的目的&#xff1a;解决贴合题意的问题&#xff0c;用合适的方法解决问题前提&#xff1a;理解题意&#xff0c;知道题目在说什么&#xff0c;前提的前提&#xff1a;了解题目的背景&#xff0c;知道题目这类问题的常见概念&#xff0c;了解这方面的知识如果是数据题&#…
阅读更多...
常见的网络安全服务大全（汇总详解）

常见的网络安全服务大全（汇总详解）

吉祥知识星球http://mp.weixin.qq.com/s?__bizMzkwNjY1Mzc0Nw&mid2247485367&idx1&sn837891059c360ad60db7e9ac980a3321&chksmc0e47eebf793f7fdb8fcd7eed8ce29160cf79ba303b59858ba3a6660c6dac536774afb2a6330&scene21#wechat_redirect 《网安面试指南》…
阅读更多...
若楠带你初识OpenCV（4） -- 图像边缘检测

若楠带你初识OpenCV（4） -- 图像边缘检测

文章目录 OpenCV图像边缘检测sobel 算子1. x方向上的边缘2. 保存负值3. 取绝对值4. y方向上的边缘5. 加权运算不要双方向同时卷积读取猪猪侠查看效果 Scharr 算子Laplacian 算子 canny边缘检测优点理论步骤四部分1. 图像降噪2. 梯度计算3. 非极大值抑制4. 双阈值边界跟踪 示例应…
阅读更多...
【QT | 开发环境搭建】windows系统(Win10)安装 QT 5.12.12 开发环境

【QT | 开发环境搭建】windows系统(Win10)安装 QT 5.12.12 开发环境

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; ⏰发布时间⏰&#xff1a; 本文未经允许…
阅读更多...
WebStorm用Debug模式调试Vue项目

WebStorm用Debug模式调试Vue项目

问题说明 开发前端代码时&#xff0c;一直很苦恼调试前端代码的麻烦。 简单的内容可以通过console.log()在控制台打印变量值&#xff0c;来验证预期结果。 涉及到稍复杂的逻辑&#xff0c;就需要在代码中侵入增加debugger&#xff0c;或者在浏览器中找到js文件&#xff0c;再手…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023