UnityUGUI
UGUI
Canvas对象上依附的:
Canvas:画布组件，用于渲染UI控件
Canvas Scaler:画布分辨率自适应组件，主要用于分辨率自适应
Graphic Raycaster:射线事件交互组件，主要用于控制射线响应相关
EventSystem对象上依附的:
EventSystem和Standalone Input Module玩家输入事件响应系统和独立输入模块组件，主要用于监听玩家操作作
6六大基础组件
Canvas组件
屏幕空间覆盖模式，UI始终在前
覆盖模式: UI始终显示在最前面
摄像机模式:3D物体可以显示在UI之前
3D模式:用于制作3DUI，在VR和AR中常用，游戏中的3D UI效果才使用
其他参数
Pixel Perfect: 是否开启无锯齿精确染 (性能换效果
SortOrder: 排序层编号 (用于控制多个Canvas时的渲染先后顺序
TargetDisplay:目标设备(在哪个显示设备上显示
Additional Shader Channels: 其他着色器通道，决定着色器可以读取哪些数据
UI平面的交互感觉
不关联摄像机就无法处理事件
CanvasScaler
用于画布缩放控制器，用于分辨率自适应的组件，主要负责在不同分辨率下UI控件大小的自适应，不负责位置，位置由RectTransform组件负责，提供了三种分辨率自适应模式
屏幕分辨率会参与自使用的计算
重要公式:宽x高x缩放系数 = 分辨率
Reference Resolution:在缩放模式的宽高模式中出现的参数，参与分辨率自适应的计算
总结:
屏幕分辨率————当前设备的分辨率编辑器下Game窗口中可以查看到参考分辨率在其中一种适配模式中出现的关键参数，参与分辨率自适应的计算
画布宽高和缩放系数一一分辨率自适应会改变的参数，通过屏幕分辨率和参考分辨率计算而来
分辨率大小自适应一一通过一定的算法以屏幕分辨率和参考分辨率参与计算得出缩放系数该结果会影响所有UI控件的缩放大小
三种方式UI缩放的模式
Constant Pixel Size (恒定像素模式):无论屏幕大小如何，UI始终保持相同像素大小
Scale With Screen Size (缩放模式) :根据屏幕尺寸进行缩放，随着屏幕尺寸放大缩小
Constant Physical Size (恒定物理模式):无论屏幕大小和分辨率如何，UI元素始终保持相同物理大小
恒定像素模式
无论屏幕大小如何，UI始终保持相同像素大小，很少使用这种方式
Scale Factor:缩放系数，按此系数缩放画布中的所有UI匀速
Reference Pixels Per Unti:单位参考像素，多少像素对应Untiy中的一个单位，默认一个单位为100像素，
UI的原始尺寸 = 图片大小（像素）/(Piexls Per Unit/Referenc Pixels Per Unit)
缩放模式
Reference Resolution: 参考分辨率 (美术同学出图的标准分辨率，缩放模式下的所有匹配模式都会基于参考分辨率进行自适应计算
Screen Match Mode: 屏幕配模式，当前屏幕分辨率宽高比不适应参考分辨率时，用于分辨率大小自适应的匹配模式
不同算法的匹配模式:
Expand:水平或垂直拓展画布区域，会根据宽高比的变化来放大缩小画布，可能有黑边
匹配公式: 将Canvas Size进行宽或高扩大，让他高于参考分辨率
计算公式: 缩放系数 = Mathf.Min(屏幕宽/参考分辨率宽,屏幕高/参考分辨率高);
画布尺寸 = 屏幕储存/缩放系数
变现的最终效果:最大程度的缩小UI元素，显示UI的所有位置，会有黑边
Shrink:水平或垂直裁剪画布区域，会根据宽高比的变化来放太缩小画布，可能会裁剪
匹配公式: 将Canvas Size进行宽或高扩大，让他低于参考分辨率
计算公式: 缩放系数 = Mathf.Max(屏幕宽/参考分辨率宽,屏幕高/参考分辨率高);
画布尺寸 = 屏幕储存/缩放系数
变现的最终效果:最大程度的放大UI元素，显示UI的所有位置，会有UI的裁剪
Match Width Or Height: 以宽高或者二者的平均值作为参考来缩放画布区域
//在取平均值之前，我们先取相对宽度和高度的对数
float logWidth = Mathf.Log(屏幕宽/参考分辨率宽2);
float logHeight = Mathf.Log(屏幕高 /参考分辨率高,2);
//在对数空间中变换是为了获得更好的性能以及更准确的结果
float logWeightedAverage = MathfLerp(logWidth, logHeight, m MatchWidthOrHeight)
scaleFactor = Mathf.Pow(2, logWeighteAverage);
表现效果 主要用于只有横屏模式或者竖屏模式的游
竖屏游戏: Match = 0将画布宽度设置为参考分辨率的宽度并保持比例不变，屏幕越高可能会有黑边
横屏游戏: Match = 1将画布高度设置为参考分辨率的高度并保持比例不变，屏幕越长可能会有黑边
恒定物理模式
无论屏幕大小和分辨率如何，UI元素始终保持相同物理大小，比如一张图片在2k和4k的区别
DPI:图像每英寸长度内的像素点数
Physical Unit：物理单位，使用的物理单位种类
Fallback Screen DPI:备用DPI，当找不到设备DPI时，使用此值
Default Sprite DPI:默认图片DPI
3D模式
Dynamic Pixels Per Unit: U中动态创建的位图 (例如文本)中，单位像素数 (类似密度)，可以让文字变得清除
Reference Pixels Per Unit: 单位参考像素，多少像素对应Unity中的一个单位 (默认一个单位为100像素)
Graphic RayCaster
Graphic Raycaster意思是图形射线投射器它是用于检测UI输入事件的射线发射器，它主要负责通过射线检测玩家和UI元素的交互判断是否点击到了UI元素
参数:
lgnore Reversed Graphics: 是否忽略反转图形
Blocking Objects:射线被哪些类型的碰撞器阻挡 (在覆盖渲染模式下无效)
Blocking Mask:射线被哪些层级的碰撞器阻挡(在覆盖染模式下无效)
Event System
事件系统，用于管理玩家的输入事件并分发给各UI空间，事件逻辑处理模块，所有的UI事件都通过EventSystem组件中轮训检测并做相应的执行，类似一个中专站和其他模块一起共同协作
First Selected:首先选择的游戏对象，可以设置游戏一开始的默认选择
Send Navigation Events: 是否允许导航事件 (移动/按下/取消)
Drag Threshold:拖拽操作的闯值(移动多少像素算拖拽
Standalone Input Module
独立输入模块 它主要针对处理鼠标/键盘/控制器/触屏(新版Unity)的输入输入的事件通过EventSystem进行分发它依赖于EventSystem组件，他们两缺一不可，其实是控制UI选择按键
RectTransform
RectTransform意思是矩形变换它继承于Transform是专门用于处理UI元素位置大小相关的组件
Pivot：轴心(中心)点，取值范围0~1
Anchors(相对父矩形锚点)： 控制图像基于那个点位置进行偏移
Min是矩形锚点范围X和Y的最小值 Max是矩形锚点范围X和Y的最大值 取值范围都是0~1
Pos(X,Y,Z)：轴心点(中心点)相对锚点的位置
Width/Height：矩形的宽高
Left/Top/Right/Bottom：矩形边缘相对于锚点的位置；当锚点分离时会出现这些内容
Rotation：围绕轴心点旋转的角度
Scale：缩放大小 ：
锚点是一个点是，会基于这个点进行偏移，也就是组件xy都是基于锚点偏移。
锚点是一个范围时，会基于范围进行计算。组件的四个边和四个父对象边的偏移
Blueprint Mode（蓝图模式），启用后，编辑旋转和缩放不会影响矩形，只会影响显示内容：
Raw Edit Mode（原始编辑模式），启用后，改变轴心和锚点值不会改变矩形位置
三大基础控件
Imgae
参数:
Source lmage:图片来源片类型必须是”精灵“类型)
Color: 图像的颜色
Material: 图像的材质 (一般不修改，会使用UI的默认材质)
Raycast Target: 是否作为射线检测的目标 (如果不勾选将不会响应射线检测)
Maskable: 是否能被遮罩 (之后结合遮罩相关知识点进行讲解)
Imgae Type:
Filled-填充模式
sliced-切片模式，9宫格拉伸，只拉伸中央十字区域只拉伸切片内也就是中央的区域！很有用！
Tiled-平铺模式，重复平铺中央部分
simple-普通模式，均匀缩放整个图片
lmage Type: 图片类型,当物体拉伸时，
Use Sprite Mesh: 使用精灵网格，勾选的话Unity会帮我们生成图片网格
Preserve Aspect: 确保图像保持其现有尺寸
Set Native Size: 设置为图片资源的原始大小
Text
文本的参数很多，基于
RawImgae
RawImage是原始图像组件，是UGUI用于显示任何纹理图片的关键组件
和Imgae的去呗是 一般RawImgae用于显示大图(背景图，不需要打入图集的图片，网络下载图等)
组合控件
Button
Button由两个组件构成，一个是父对象可以作为按钮的背景图，另外一个是button的子对象，按钮的文本选项
Interactable: 是否接受输入
ColorTint:用颜色表示不同状态的变化
TargetGraphic:控制的目标图形Normal Color:正常状态颜色Highlighted Color: 鼠标进入时显示高亮颜色
Pressed Color: 按下颜色
Selected Color: 选中的颜色
Disabled Color:禁用时的颜色
Color Multiplier: 颜色倍增器，过渡颜色乘以该值
FadeDuration:豪减持续时间，从一个状态进入另一个状态时需要的 时间
过渡(按钮切换)方式:
颜色
精灵图切花
图片动画
监听按钮事件的方式:
拖脚本
Toggle
是一种开关组件，用于处理多选框相关交互的关键组件,用于选择，想要做多选时，可以放到一个物体下，让父物体加上Group Toggle 就可以实现在几个选项中进行单选
InputFidelis
InputField是输入字段组件，是UGUI中用于处理玩家文本输入相关交互的关键组件，默认创建的InputField由3个对象组成//父对象-InputField组件依附对象 以及 同时在其上挂载了一个Image作为背景图，子对象一文本显示组件 (必备)、默认显示文本组件 (必备)
TextCompoent: 用于关联显示输入内容的文本组件
Text: 输入框的起始默认值
Character Limit: 可以输入字符长度的最大值
Content Type: 输入的字符类型限制
Line Type: 行类型，定义文本格式
Placeholder:关联用于显示初始内容文本控件
Caret Blink Rate:光标烁速率
Caret Width:光标宽
Custom Caret Color: 自定义光标颜色
Selection Color: 批量选中的背景颜色
Hide Mobile Input: 隐藏移动设备屏幕上键盘，仅适用于
IOSRead Only: 只读，不能改
Character Limit: 可以输入字符长度的最大值
InputField input = this.GetComponent<InputField>();//组件
Input.text = "123"//更改字符串内容
//通过事件的方式
input.OnvalueChaged.AddListener((str)=>
{
//字符改变时
})
//触发事件
public void changeInput(string str)
{
//字符改变时
}
public void EndInput(string str)
{
//结束输入时
}
Slider-滑动条
slider是滑动条组件是UGUI中用于处理滑动条相关交互的关键组件，默认创建的slider由4组对象组成，父对象-slider组件依附的对象儿/子对象~背号图进度图，没动块三组对象
参数:
FillRect: 用于填充的进度条图形
Handle Rect: 用于滑动的滑动块图形
Direction: 滑动条值增加的方向
Min Value 和 Max Value: 最小值和最大值，滑动滚动条时值从最小到最大之间变化 (左右、上下极值)
Whole Numbers: 是否约束为整数值变化
Value:当前滑动条代表的数值
OnValueChanged: 滑动条值改变时执行的函数列表
Slider s = this.GetComponnet<Slider>();
print(s.value)
ScrollBar
scrollbar是滚动条组件,是UGUI中用于处理滚动条相关交互的关键组件,默认创建的scrollbar由2组对象组成//父对象-scrollbar组件依附的对象,子对象一滚动块对,一般情况下我们不会单独使用滚动条//都是合scrollview滚动视图来使用
重要参数:
up To Bottom: 从上到
Value: 滚动条初始位置值 (0~1)
Value: 滚动块在条中的比例大小 (0~1)
Number of steps: 允许可以滚动多少次 (不同滚动位置的数量OnValueChanged: 滚动条值改变时执行的函数列表
ScrollBar sb. = this.GetComponet<ScrollBar>();
sb.OnvlaueChanged.AddEventListener((value)=>{
//事件
})
ScrollView滚动视图
参数:
Content: 控制滚动视图显示内容的父对象，它的尺寸有多大滚动视图就能拖多远,所有内容都在这里
Horizontal: 启用水平滚动
Vertical: 启用垂直滚动
Movement Type: 滚动视图元素的运动类型。主要控制拖动时的反馈效果
Unrestricted(一般不使用) :不受限制，随便拖动回弹效果，当滚出边缘后，会弹回边界
Elastic (常用) :Elasticity: 回弹系数，控制回弹效果。值越大回弹越慢
Clamped: 夹紧效果，始终限制在范围内，没有回弹效果
Inertia: 移动惯性，如果开启，松开鼠标后会有一定的移动惯性
Deceleration Rate: 减速率 (0~1)0没有惯性，1不会停止
Scroll sensitivity: 滚轮 (鼠标中间)和触摸板 (笔记本)的滚动事件敏感性
Viewport: 关联滚动视图内容视口对象
Horizontal Scrollbar: 关联水平滚动条
ScrollRect sr = this.getcomponent<ScrollRec t>();
sr.content.sizeDelta = new Vecotr(200,200);
sr.normalizedPostion = new Vector2（0,0.5）
//动态布局
void Start()
{
for(int i =0;i<30;i++)
{
GameObject item = Instantiate(Resources.Load<GameObject>("BagItem"));
item.transform.SetParent(svItems.content, false);
item.transform.localPosition = new Vector3(10, -10, 0)+new Vector3(i%4*x,-i/4*y,0);
}
svItems.content.sizeDelta = new Vector2(0, Mathf.CeilToInt(30 / 4f) * 100);
}
DropDown下拉列表
是UGUT中用于处理下拉列表相关交互的关键组件，默认创建的DropDown由4组对象组成
父对象
DropDown组件依附的对象
Image组件 作为背景图
子对象
Labe1是当前选项描述
Arrow右侧小箭头
Template下拉列表选单
参数相关:
Transition: 响应用户输入的过渡效果
Navigation: 导航模式，可以设置UI元素如何在播放模式中控制器导航
Interactable: 是否接受输入
Template: 关联下拉列表对象
Caption Text: 关联显示当前选择内容的文本组件
Caption lmage: 关联显示当前选择内容的图片组件
ltem Text: 关联下拉列表选项用的文本控件
ltem Image: 关联下拉列表选项用的图片控件Value: 当前所选选项的索引值
Alpha Fada Speed: 下拉列表窗口淡入淡出的速度
Options: 存在的选项列表
Dropdown dd = this.GetConponent<DropDown>();
dd.value
dd.options[dd.vlaue].text//得到当前的选项的文字
dd.OnValueChanged.AddListener((index)=>{});
图集制作
性能优化方面，减少Draw Call的数量
在工程设置面板中打开功能 Edit-->Project Setting-->Editor
Sprite Packer(精灵包装器，可以通过unity自带图集工具生成图集)
Disabled: 默认设置，不会打包图集
Enabled For Builds (Legacy Sprite Packer): Unity仅在构建时打包图集，在编辑模式下不会打包图集
Always Enabled (Legacy Sprite Packer) : Unity在构建时打包图集，在编辑模式下运行前会打包图集
Legacy Sprite Packer传统打包模式 相对下面两种模式来说 多了一个设置图片之间的间隔距离
Padding Power:选择打包算法在计算打包的精灵之间以及精灵与生成的图集边缘之间的间隔距离这里的数字 代表2的n次方
Enabled For Build: Unity进在构建时打包图集，在编辑器模式下不会打包
Enabled: Unity在构建时打包图集，在编辑模式下运行前会打包图集Always
UI进阶
UI事件事件接口
日前所有的控件都只提供了常用的事件监听列表，如果想做一些类似长按，双击，拖拽等功能是无法制作的//或者想让Image和Text，RawImage三大基础控件能够响应玩家输入也是无法制作的，而事件接口就是用来处理类似问题，让所有控件都能够添加更多的事件监听来处理对应的逻辑
注意:UI事件的接口要打开射线检测
常用的事件接口:
IPointerEnterHandler - OnPointerEnter当指针进入对象时调用(鼠标进入)
IPointerExitHandler - OnPointerExit -当指针对出对象时调用(鼠标离开)
IPointerDownHandler - OnPointerDown - 在对象上按下指针时调用 (按下)
IPointerUpHandler - OnPointerUp - 松开指针时调用 (在指针正在点击的游戏对象上调用)(起)
IPointerclickHandler - onPointerclick - 在同一对象上按下再松开指针时调用 (点击)
拖拽系:
IBeginDragHandler - OnBeginDrag - 即将开始拖动时在拖动对象上调用(开始拖拽)
IDragHandler - onDrag - 发生拖动时在拖动对象上调用 (拖拽中)
IEndDragHandler - OnEndDrag - 拖动完成时在拖动对象上调用 (结束拖拽)
不常用系:
IInitializePotentialDragHandler - OnInitializePotentialDrag-在找到拖动目标时调用，可用于初始化值
IDropHandler - OnDrop - 在拖动目标对象上调用
IScrol1Handler - OnScroll - 当鼠标滚轮滚动时调用
IUpdateSelectedHandler - OnUpdateSelected - 每次勾选时在选定对象上调用
ISelectHandler - OnSelect - 当对象成为选定对象时调用
IDeselectHandler - OnDeselect - 取消选择选定对象时调用
导航相关:
IMoveHandler - onMove - 发生移动事件 (上、下、左、右等) 时调用
ISubmitHandler- onSubmit - 按下 submit 按钮时调用
ICancelHandler- onCancel - 按下 Cancel 按钮时调用
栗子:
public class IEnmertortest : MonoBehaviour,IPointerEnterHandler,IPointerExitHandler,IPointerDownHandler,IPointerUpHandler
{
public void OnPointerExit(PointerEventData eventData)
{
print("鼠标退出");
}
void IPointerDownHandler.OnPointerDown(PointerEventData eventData)
{
print("鼠标按下");
}
void IPointerEnterHandler.OnPointerEnter(PointerEventData eventData)
{
print("鼠标进入");
}
void IPointerUpHandler.OnPointerUp(PointerEventData eventData)
{
print("鼠标抬起");
}
}
接口函数的参数讲解:
父类: BaseEventData
pointerId: 鼠标左右中键点击鼠标的ID 通过它可以判断左中右键的按下
position:当前指针位置 (屏幕坐标系)
pressPosition: 按下的时候指针的位置
delta: 指针移动增量，按下后记录这次点，然后后续事件与这个点的偏移量
clickCount: 连击次数
clickTime: 点击时间，两次点击得到的是系统的事件
pressEventCamera: 最后一个onPointerPress按下事件关联的摄像机
enterEvetnCamera: 最后一个onPointerEnter进入事件关联的摄像机
EventTriagger
事件触发器是EventTrigger组件,它是一个集成所有事件接口的脚本,它可以让我们更方便的为控件添加事件监听
直接加脚本然后加上对应事件
et.triggers.Add();
//声明一个希望监听的事件对象
EventTrigger.Entry entry = new EventTrigger.Entry();
//声明事件类型
entry.eventID = EventTriggerType.PointerUp;
//监听函数关联
entry.callback.AddListenr((data)={
print("test");
})
et.triggers.Add(entry);
//声明一个希望监听的事件对象
屏幕UI坐标系转换
RectTransformUtility 公共类是一个RectTransform的辅助类,主要用于进行一些 坐标的转换等等操作,其中对于我们目前来说 最重要的函数是 将屏幕空间上的点，转换成UI本地坐标下的点，优点是更加的准确
public void OnDrag(PointerEventData eventData)
{
Vector2 newPos;
//将屏幕空间转换为UI的相对父对象的转换
RectTransformUtility.ScreenPointToLocalPointInRectangle(
this.transform.parent as RectTransform,
eventData.position,
eventData.enterEventCamera,
out newPos
);
this.transform.localPosition = newPos;
print(newPos);
}
Mask遮罩
在不改变图片的情况下，去改变图像就叫遮罩的作用，通过在父对象上加Mask组件就可以了
想要被遮罩的Image需要勾选Maskable
只要父对象添加了Mask组件，那么所有的UI子对象都会被遮罩
遮罩父对象图片的制作，不透明的地方显示，透明的地方被遮罩
模型和粒子UI之前
模型显示UI之前
方法一：直接用摄像机渲染3D物体
canvas的渲染模式要不是覆盖模式//摄像机模式 和 世界(3D)模式都可以让模型显示在UI之前 (轴在UI元素之前即可) 注意:
摄像机模式时建议用专门的摄像机渲染UI相关
面板上的3D物体建议也用UI摄像机进行渲染
方法二**:** 将3D物体渲染在图片上，通过图片显示(适用于但角色之类的) 专门使用一个摄像机渭染3D模型，将其渲染内容输出到Render Texture上，类似小地图的制作方式//再将渲染的图显示在UI上，该方式 不管canvas的渲染模式是哪种都可以使用
粒子特效
方法一:直接加到UI层
添加到UI层可以更改渲染层级去选择层级的渲染
异形按钮
在Untiy中，有些图片最为按钮镂空部分点击也会触发射线检测，因为检测的时候不是按有无像素，而是图像的边框，所以会发生误触
方法一:通过添加子对象的形式
按钮之所以能够响应点击，主要是根据图片矩形范围进行判断的/它的范围判断是自下而上的，意思是如果有子对象图片，子对象图片的范围也会算为可点击范围/那么我们就可以用多个透明图拼凑不规则图形作为按钮子对象用于进行射线检测
上面镂空的地方会有响应，更改如下结构
将Button变为一个空的矩形范围，然TargetImage变为Button的父对象，这样点击的还是Button，响应的是父对象的图片
点击事件是自下而上反馈，所以可以拼接多个图形，尽可能完美
方法二 通过代码改变图片的透明度响应闻值
第一步:修改图片参数 开启Read/Write Enabled开关
2.第二步:通过代码修改图片的响应闯值 该参数含义: 指定一个像素必须具有的最小alpha值，以变能够认为射线命中了图片，就是通过透明度检测
开启透明度读写，然后调整阈值
img.alphaHitTestMinimunThreshhold = 0.1f
自动布局
自动布局是什么
虽然uGUI的RectTransform已经非常方便的可以帮助我们快速布局//但UGUI中还提供了很多可以帮助我们对uI控件进行自动布局的组件//他们可以帮助我们自动的设置UI控件的位置和大小等
自动布局的工作方式一般是
自动布局控制组件 + 布局元素 自动布局
自动布局控制组件: unity提供了很多用于自动布局的管理性质的组件用于布局//布局元素: 具备布局属性的对象们，这里主要是指具备RectTransform的uI组件
水平布局组件
将子对象并排或者竖直的放在一起 组件名: Horizontal Layout Group 和 Vertical Layout Group
Padding: 左右上下边缘偏移位置
Spacing:子对象之间的间距
childAlignment:九宫格对其方式
control child size: 是否控制子对象的宽高
use child scale: 在设置子对象大小和布局时，是否考虑子对象的缩放
child Force Expand: 是否强制子对象拓展以填充额外可用空间
也可以给子元素添加布局元素的控件，控制子对象的UI
网格布局组件
将子对象当成一个个的格子设置他们的大小和位置 组件名: Grid Layout Group 参数相关:
Padding: 左右上下边缘偏移位置
Cel1 size:每个格子的大小
Spacing: 格子间隔
start corner:第一个元素所在位置 (4个角)
start Axis: 沿哪个轴放置元素，Horizontal水平放置满换行，Vertical竖直放置满换列
child Alignment: 格子对其方式 (9宫格)
Constraint:行列约束
Flexible: 灵活模式，根据容器大小自动适应
Fixed Column Count: 固定列数
Fixed Row Count: 固定行数
内容大小适配器
它可以自动的调整RectTransform的长宽来让组件自动设置大小//一般在Text上使用 或者 配合其它布局组件一起使用 组件名: Content size Fitter//参数相关
Horizontal Fit: 如何控制宽度
Vertical Fit:如何控制高度
Unconstrained: 不根据布局元素伸展
Min size: 根据布局元素的最小宽高度来伸展
Preferred size: 根据布局元素的偏好宽度来伸展宽度
####宽高比适配器
让布局元素按照一定比例来调整自己的大小
使布局元素在父对象内部根据父对象大小进行适配 组件名: Aspect Ratio Fitter
参数相关:
Aspect Mode: 适配模式，如果调整矩形大小来实施宽高比
None:不让矩形适应宽高比
width Controls Height: 根据宽度自动调整高度
Height Controls width: 根据高度自动调整宽度
Fit In Parent: 自动调整宽度、高度、位置和锚点，使矩形适应父项的矩形，同时保持宽高比，会出现“黑边”
Envelope Parent: 自动调整宽度、高度、位置和点，使矩形覆盖父项的整个区域，同时保持宽高比，会出现“裁剪”
Aspect Ratio: 宽高比; 宽除以高的比值
Canvas Group
可以解决面板整体禁用，整体的淡入淡出的问题
为面板父对象添加 canvasGroup组件 即可整体控制 参数相关: Alpha: 整体透明度控制 Interactable:整体启用禁用设置 Blocks Raycasts: 整体射线检测设置
实在是懒得传图了
