Canvas
1.所有的UI元件都需要放在Canvas里
2.UI元件的绘制顺序,与在 Hierarchy的顺序相同,在上面的元素会先被绘制,位于后续绘制元素的下面
3.可以选择3种不同的渲染模式:
Screen Space - Overlay
类似于深度摄像机,会将UI渲染到游戏场景的最前面
Screen Space - Camera
类似于深度摄像机,但是可以选择一个Camera来渲染UI,因此可以调整Camera的相关属性
World Space
把UI看做3D空间中的一个Object来渲染
Rect Transform
编辑UI时,一般采用如下的设置:
可以调整旋转点Pivot,缩放,平移等:
可以调整Anchor点,使得UI跟随窗口改变而改变位置或形态:
![【UGUI】Canvas和Rect Transform 【UGUI】Canvas和Rect Transform](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuc2h1emhpZHVvLmNvbS9Vc2Vycy90dXJlbmxvbmcvQXBwRGF0YS9Mb2NhbC9ZTm90ZS9kYXRhLzk3MjA0NjA0MEBxcS5jb20vNjRiZDQxNjBlZThhNDkyNTgzOGQ4MDQ1ZjlkNWQxZDMvY2xpcGJvYXJkLnBuZw%3D%3D.png?w=700&webp=1)
![【UGUI】Canvas和Rect Transform 【UGUI】Canvas和Rect Transform](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhBdmFXMWhaMlZ6TG1OdWFYUmliRzluTG1OdmJTOWliRzluTHpJMU1EQXdOaTh5TURFME1USXZNalV4T1RFME5EVTVPVGt6TVRrekxuQnVadz09LmpwZw%3D%3D.jpg?w=700&webp=1)
![【UGUI】Canvas和Rect Transform 【UGUI】Canvas和Rect Transform](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhBdmFXMWhaMlZ6TG1OdWFYUmliRzluTG1OdmJTOWliRzluTHpJMU1EQXdOaTh5TURFME1USXZNalV4T1RFME5UWTFPVE16TmpVMUxuQnVadz09LmpwZw%3D%3D.jpg?w=700&webp=1)
![【UGUI】Canvas和Rect Transform 【UGUI】Canvas和Rect Transform](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhBdmFXMWhaMlZ6TG1OdWFYUmliRzluTG1OdmJTOWliRzluTHpJMU1EQXdOaTh5TURFME1USXZNalV4T1RFMU5ETTFNVFUxT0RJd0xuQnVadz09LmpwZw%3D%3D.jpg?w=700&webp=1)
![【UGUI】Canvas和Rect Transform 【UGUI】Canvas和Rect Transform](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhBdmFXMWhaMlZ6TG1OdWFYUmliRzluTG1OdmJTOWliRzluTHpJMU1EQXdOaTh5TURFME1USXZNalV4T1RFMU5UYzBNRFUxT1RFd0xuQnVadz09LmpwZw%3D%3D.jpg?w=700&webp=1)
也可以在属性面板中选择常用的Anchor位置:
![【UGUI】Canvas和Rect Transform 【UGUI】Canvas和Rect Transform](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhBdmFXMWhaMlZ6TG1OdWFYUmliRzluTG1OdmJTOWliRzluTHpJMU1EQXdOaTh5TURFME1USXZNalV4T1RFMk1USTFOakkwT0RFekxuQnVadz09LmpwZw%3D%3D.jpg?w=700&webp=1)