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

2023-12-07 11:45

本文主要是介绍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力模块激活

这篇关于Unity Canvas、Canvas Scaler、Graphic Raycaster、EventSystem 组件详解的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/465751

相关文章

Linux换行符的使用方法详解

《Linux换行符的使用方法详解》本文介绍了Linux中常用的换行符LF及其在文件中的表示,展示了如何使用sed命令替换换行符,并列举了与换行符处理相关的Linux命令,通过代码讲解的非常详细,需要的... 目录简介检测文件中的换行符使用 cat -A 查看换行符使用 od -c 检查字符换行符格式转换将

详解C#如何提取PDF文档中的图片

《详解C#如何提取PDF文档中的图片》提取图片可以将这些图像资源进行单独保存,方便后续在不同的项目中使用,下面我们就来看看如何使用C#通过代码从PDF文档中提取图片吧... 当 PDF 文件中包含有价值的图片,如艺术画作、设计素材、报告图表等,提取图片可以将这些图像资源进行单独保存,方便后续在不同的项目中使

Android中Dialog的使用详解

《Android中Dialog的使用详解》Dialog(对话框)是Android中常用的UI组件,用于临时显示重要信息或获取用户输入,本文给大家介绍Android中Dialog的使用,感兴趣的朋友一起... 目录android中Dialog的使用详解1. 基本Dialog类型1.1 AlertDialog(

C#数据结构之字符串(string)详解

《C#数据结构之字符串(string)详解》:本文主要介绍C#数据结构之字符串(string),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录转义字符序列字符串的创建字符串的声明null字符串与空字符串重复单字符字符串的构造字符串的属性和常用方法属性常用方法总结摘

Java中StopWatch的使用示例详解

《Java中StopWatch的使用示例详解》stopWatch是org.springframework.util包下的一个工具类,使用它可直观的输出代码执行耗时,以及执行时间百分比,这篇文章主要介绍... 目录stopWatch 是org.springframework.util 包下的一个工具类,使用它

Java进行文件格式校验的方案详解

《Java进行文件格式校验的方案详解》这篇文章主要为大家详细介绍了Java中进行文件格式校验的相关方案,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、背景异常现象原因排查用户的无心之过二、解决方案Magandroidic Number判断主流检测库对比Tika的使用区分zip

Java实现时间与字符串互相转换详解

《Java实现时间与字符串互相转换详解》这篇文章主要为大家详细介绍了Java中实现时间与字符串互相转换的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、日期格式化为字符串(一)使用预定义格式(二)自定义格式二、字符串解析为日期(一)解析ISO格式字符串(二)解析自定义

springboot security快速使用示例详解

《springbootsecurity快速使用示例详解》:本文主要介绍springbootsecurity快速使用示例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝... 目录创www.chinasem.cn建spring boot项目生成脚手架配置依赖接口示例代码项目结构启用s

Python中随机休眠技术原理与应用详解

《Python中随机休眠技术原理与应用详解》在编程中,让程序暂停执行特定时间是常见需求,当需要引入不确定性时,随机休眠就成为关键技巧,下面我们就来看看Python中随机休眠技术的具体实现与应用吧... 目录引言一、实现原理与基础方法1.1 核心函数解析1.2 基础实现模板1.3 整数版实现二、典型应用场景2

一文详解SpringBoot响应压缩功能的配置与优化

《一文详解SpringBoot响应压缩功能的配置与优化》SpringBoot的响应压缩功能基于智能协商机制,需同时满足很多条件,本文主要为大家详细介绍了SpringBoot响应压缩功能的配置与优化,需... 目录一、核心工作机制1.1 自动协商触发条件1.2 压缩处理流程二、配置方案详解2.1 基础YAML