Unity Canvas、Canvas Scaler、Graphic Raycaster、EventSystem 组件详解

文章目录

  • 0. 参考文章
  • 1. Canvas
    • 1.1 Screen Space-Overlay —— 屏幕空间覆盖模式
    • 1.2 Screen Space-Camera —— 相机模式
    • 1.3 World Space —— 世界模式
  • 2. Canvas Scaler:控制UI画布的放大缩放的比例
    • 2.1 Constant Pixer Size —— 恒定像素
    • 2.2 Scale With Screen Size —— 根据屏幕缩放
      • 2.2.1 Match Width or Height —— 匹配宽度或高度
      • 2.2.2 Expand —— 扩张
      • 2.2.3 Shrink —— 收缩
      • 2.2.4 三种模式效果对比
    • 2.3 Constant Physical Size —— 恒定尺寸
  • 3. Graphic Raycaster:控制是否让UI响应射线点击
  • 4. EventSystem

0. 参考文章

https://blog.csdn.net/qq_33789001/article/details/117781577
https://blog.csdn.net/q764424567/article/details/119923544

1. Canvas

1.1 Screen Space-Overlay —— 屏幕空间覆盖模式

在这里插入图片描述

属性功能
Pixel Perfect使UI元素像素对应,效果就是边缘清晰不模糊
Sort Order多个Canvas时,数值越大越后渲染。值大的 画布,会挡住值小的
Target Display目标显示器,如果有多个屏幕的话可以选择
Addtional Shader Channels附加着色通道,决定Shader可以读取哪些相关数据,比如 法线、 切线 等数据。

1.2 Screen Space-Camera —— 相机模式

在这里插入图片描述

属性功能
Render Camera渲染的相机
Plane DistanceCanvas与相机之间的距离
Sorting Layer画布的深度,指定了相机的渲染顺序
Order In Layer值越大,该UI越显示在前面

1.3 World Space —— 世界模式

在这里插入图片描述

属性功能
Event Camera响应事件的相机
Sorting Layer画布的深度,指定了相机的渲染顺序
Order in Layer值越大,该UI越显示在前面

2. Canvas Scaler:控制UI画布的放大缩放的比例

参考文章:https://blog.csdn.net/qq_33789001/article/details/117781577

2.1 Constant Pixer Size —— 恒定像素

无论屏幕大小如何,UI 元素都保持相同的像素大小。
在这里插入图片描述

属性功能
Scale Factor缩放因子
Reference Pixels Per Uit单位面积像素数量

1920*1080 效果:
在这里插入图片描述
3000:100 效果:
在这里插入图片描述
可以看到无任何拉伸或者缩放,都是按设定的大小显示。

2.2 Scale With Screen Size —— 根据屏幕缩放

屏幕越大,UI 元素越大
在这里插入图片描述

属性功能
Referencee Resolution预设屏幕大小
Screen Match Mode缩放模式
Match宽高比

2.2.1 Match Width or Height —— 匹配宽度或高度

以宽度为参考、以高度为参考或介于两者之间的值来缩放画布区域

2.2.2 Expand —— 扩张

水平或垂直扩展画布区域,因此画布的大小永远不会小于参考

2.2.3 Shrink —— 收缩

水平或垂直裁剪画布区域,因此画布的大小永远不会大于参考

2.2.4 三种模式效果对比

1920 x 1080 分辨率下:
在这里插入图片描述
1.扩张
3000:100 效果:
在这里插入图片描述
这里可以看到,canvas的宽度进行了拓展(1920 --> 3240),高度保持不变(1080)同时整体收缩了0.9259倍,UI基本正常。
2.收缩
3000:100 效果:
在这里插入图片描述
这里可以看到,canvas的高度进行了收缩(1080 --> 640),宽度保持不变(1920)同时整体放大了1.5625倍。画面出现异常,左右两边居中的的绿色和橙色部分超出画面
3.匹配高度
3000:100 效果:
在这里插入图片描述
查看效果其实和扩张的效果是一致的
4.匹配宽度
在这里插入图片描述
查看效果其实和收缩的效果是一致的
5.匹配宽度高度
3000:1000 效果:
在这里插入图片描述
可以看到,canvas的宽度进行了收缩(1080 -->831),高度进行放大(1920 --> 2494)同时整体放大了1.2倍。画面出现异常,左右两边居中的的绿色和橙色部分已经遮挡其它元素。

2.3 Constant Physical Size —— 恒定尺寸

UI 元素无论屏幕大小和分辨率如何都保持相同的物理大小。
在这里插入图片描述

属性功能
Physical Unit使用单位
Fallback Screen DPI备用屏幕的DPI
Default Sprite DPI默认图片的DPI
Reference Pixels Per Uit单位面积像素数量

1920*1080 效果:
在这里插入图片描述
3000:100 效果:
在这里插入图片描述

3. Graphic Raycaster:控制是否让UI响应射线点击

在这里插入图片描述

属性功能
Ignore Reversed Graphic忽略反转的UI,UI反转后点击无效
Blocking Objects阻挡点击物体,当UI前有物体时,点击前面的物体射线会被阻挡
Blocking Mask阻挡层级,当UI前有设置的层级时,点击前面的物体射线会被阻挡

4. EventSystem

Canvas一同创建的还有一个EventSystem,这是一个基于Input的事件系统,可以对键盘、触摸、鼠标、自定义输入进行处理
在这里插入图片描述
Event System(Script)

属性功能
First Selected首选对象
Send Navigation Events发送导航事件
Drag Threshold拖动阈值

Event System负责处理输入、射线投射以及发送事件。
一个场景中只能有一个Event System组件。


Standalone Input Module(Script)

属性功能
Horizontal Axis横轴
Vertical Axis纵轴
Submit Button提交按钮
Canvel Button取消按钮
Input ActionsPer Second
Repeat Delay重复延迟
Force Module Active力模块激活

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

牛客算法题【HJ96 表示数字】golang实现

题目 HJ96 表示数字 golang实现 package mainimport ("fmt""unicode" )func main() {s : ""var s_o stringvar char_pre, r runefor {n, _ : fmt.Scan(&s)if n 0 {break} else {for _, r range s {if unicode.IsDigit(r) {if !unicode.…

renpy-renpy对话内容汉化

文章目录 前言思路实现1,提取对话内容2,汉化对话内容文件3,修改gui文件,使得renpy游戏支持中文显示 前言 最近下载了一些renpy视觉小说内容,发现对话都为英文,因此我在想能否提取出这些对话然后汉化后再封装回原文件,将其汉化 当然汉化过程是机器翻译,汉化其他语言同理,大概5分…

一文了解工业互联网是什么,和传统互联网的区别有哪些

几个问题 工业互联网和传统互联网有什么区别 1 业务方面,传统的互联网企业更多是toC的业务,直接面对的是一个个的个体,而工业互联网离消费者更远一点,往往是toB或者toG的; 个人认为这也是最根本的区别,由…

Linux expect命令详解

在Linux系统中,expect 是一款非常有用的工具,它允许用户自动化与需要用户输入进行交互的程序。本文将深入探讨expect命令的基本语法、使用方法以及一些最佳实践。 什么是Expect命令? expect 是一个用于自动化交互式进程的工具。它的主要功能…

每日一题(LeetCode)----哈希表--三数之和

每日一题(LeetCode)----哈希表–三数之和 1.题目(15. 三数之和) 给你一个整数数组 nums ,判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k ,同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所…

自定义类型-结构体,联合体和枚举-C语言

引言 能看到结构体,说明C语言想必学习的时间也不少了,在之前肯定也学习过基本数据类型,包括整型int,浮点型float等等。可是在日常生活中,想要描述一个事物并没有那么简单。比如,你要描述一本书&#xff0c…

力扣236. 二叉树的最近公共祖先

递归 思路: 递归子问题: 确认节点 p、q 是否在节点 root 子树中: lson isChild(root->left, p, q);rson isChild(root->right, p, q);在 root 子树中的条件是: 在左子树中、或者在右子树中、或者 p/q 就是当前节点&#…

运维 | 关于IP网络相关的概念和原理

关注:CodingTechWork IP地址 IP介绍 概述 IP是TCP/IP协议族的核心,IP地址是电脑在网络中的唯一标识,全球唯一(G公网IP)。IP地址(Internet Protocol Address)是互联网协议地址,也…

【计算机网络】15、NAT、NAPT 网络地址转换、打洞

文章目录 一、概念二、分类(主要是传统 NAT)2.1 基本 NAT2.2 NAPT 三、访问NAT下的内网设备的方式3.1 多拨3.2 端口转发、DMZ3.3 UPnP IGD、NAT-PMP3.4 服务器中转:frp 内网穿透3.4.1 NAT 打洞3.4.2 NAT 类型与打洞成功率3.4.2.1 完全圆锥形 …

【并发编程】volatile实现原理解析

📫作者简介:小明Java问道之路,2022年度博客之星全国TOP3,专注于后端、中间件、计算机底层、架构设计演进与稳定性建设优化,文章内容兼具广度、深度、大厂技术方案,对待技术喜欢推理加验证,就职于…

SELinux refpolicy详解(4)

接前一篇文章:SELinux refpolicy详解(3) 三、refpolicy内容详解 1. README 文件路径:refpolicy源码根目录/README。 文件内容如下: 1) Reference Policy make targets:General Make targets:install-src Install …

职位招聘管理与推荐系统Python+Django网页界面+协同过滤推荐算法

一、介绍 职位招聘管理与推荐系统。本系统使用Python作为主要开发语言,以WEB网页平台的方式进行呈现。前端使用HTML、CSS、Ajax、BootStrap等技术,后端使用Django框架处理用户请求。 系统创新点:相对于传统的管理系统,本系统使用…

《YOLOv8原创自研》专栏介绍 CSDN独家改进创新实战专栏目录

YOLOv8原创自研 https://blog.csdn.net/m0_63774211/category_12511737.html?spm1001.2014.3001.5482 💡💡💡全网独家首发创新(原创),适合paper !!! 💡&a…

如何用Java实现扑克牌(附源码)

目录 一.扑克牌的数据结构 二.买牌(扑克牌的初始化) 三.洗牌 四.发牌 五.完整代码 Card.java CardList.java 六.测试 输出结果 一.扑克牌的数据结构 首先,扑克牌是一幅一幅的,除去大小王以外一共有52张,我们可以考虑用数组来存储…

解决 Python 中 TypeError: An Integer Is Required 错误

在 Python 代码中发生的另一个最常见的错误是 TypeError。 这是 Python 中的一个例外。 当您在操作中使用不适当的数据类型的对象时,您将收到此错误。 本文将展示我们如何在 Python 中得到 TypeError。 此外,我们将通过使用必要的示例和解释来讨论该主…

【Linux】命令行参数

文章目录 前言一、C语言main函数的参数二、环境变量总结 前言 我们在Linux命令行输入命令的时候,一般都会跟上一些参数选项,比如l命令,ls -a -l。以前我总是觉得这是理所当然的,没深究其本质究竟是什么,今天才终于知道…

春秋云镜ED01-CMS v20180505 存在任意文件上传漏洞

靶场介绍 春秋云镜ED01-CMS v20180505 存在任意文件上传漏洞 漏洞分析: 文件类型未校验可以任意上传执行文件,获取服务器权限 登录注册界面 Hi-Lo-Yohttp://eci-2ze2qm1cbaon2lylin0q.cloudeci1.ichunqiu.com/registration.php 注册了几个发现注册不…

【QT】Windows环境下,cmake引入QML

这里使用的QT库为5.7版本。 1、添加环境变量 QT库根目录环境变量 QTDIR QT库平台插件环境变量 QT_PLUGIN_PATH QML支持环境变量 QML2_IMPORT_PATH (该环境变量仅在需要使用QML时添加) QT库动态库环境变量,bin目录下包含了QT程序运行所需的dl…

跨链原子交换

原子交换的想法于 2013 年首次在 BitcoinTalk 论坛上提出,它可以实现两个区块链之间的代币交换。 这些交换是原子的,因为双方要么收到对方的硬币,要么都保留自己的硬币。 一方不可能欺骗另一方。 它不依赖任何可信赖的第三方,消除…

Hdoop学习笔记(HDP)-Part.10 创建集群

目录 Part.01 关于HDP Part.02 核心组件原理 Part.03 资源规划 Part.04 基础环境配置 Part.05 Yum源配置 Part.06 安装OracleJDK Part.07 安装MySQL Part.08 部署Ambari集群 Part.09 安装OpenLDAP Part.10 创建集群 Part.11 安装Kerberos Part.12 安装HDFS Part.13 安装Ranger …