Unity3d中UGUI組件精簡復盤（二）Canvas及其相關組件

一、 Canvas組件

上一節，我們簡單概括了Unity3D編輯器中RectTransform的相關屬性簡要介紹，具體詳情鏈接為：Unity3d中UGUI組件精簡復盤（一）RectTransform組件

1.canvas的三種渲染模式

所有的UI元素只有在Canvas下才能夠正常顯示

• Screen Space - Overlay：UI元素始終在3D物體之上的

即便添加了一個Cube調至攝像機面前，Canvas一樣在最上層顯示

• Screen Space - Camera：與攝像機關聯，3D物體可以遮擋UI

當我們將攝像機拖至Render Camera

此時的Canvas的位置會跟攝像機的位置關聯，畫布的位置會調整是攝像機的渲染切面上，此時Canvas的位置可以通過調節Plane Distance的距離來實作，

• World Space：整個Canvas會作為一個3D物體來進行調節

可以對Canvas的位置進行調節，即屬性位置可以進行調節

注意： Screen Space - Overlay模式與Screen Space - Camera模式下特有的屬性：Pixel Perfect

• Pixel Perfect：是否為了準確顯示圖片的像素關閉抗鋸齒

例如：做了抗鋸齒處理后，可能100像素的圖片會被處理為101像素

如果有的圖片要求特別高，需要關閉抗鋸齒，此時勾選Pixel Perfect

• Target Display：根據組件設定的Display 可以在Game中單獨進行顯示
  我們可以通過設定不同的DisPlay從而實作攝像機Game中顯示的效果不同，
  具體如圖：

二、UI單位和像素的對應關系

上面講到講到抗鋸齒處理中，提及到了像素，這就不得不提一嘴UI單位與像素之間的對應關系了，首先我們了解一下Canvas Sacaler組件下的屬性，

Canvas Sacaler組件：
作用：控制界面的縮放，即控制的所有UI元素的縮放和像素，但不會直接作用于字體的大小或者圖片的尺寸

• Scale Factor： 調節縮放變數

假設 將Canvas下的Canvas Scacaler組件下的Scale Factor屬性 設為0.5，渲染效果會縮放為原來的0.5倍，但是Image的圖片大小（width、height）不會發生實際的改變，

• Reference Pixels Per： 1Unity單位對應b個像素

• Pixels Per Unity： 多少像素對應1Unity單位

例如圖：

<該素材圖片來自于網上>

三、Canvas Scaler下的三種適配方案

1. ConstantPixelSize模式下的UI適配

• ConstantPixelSize：顯示螢屏會根據螢屏的大小來自動變，但是UI的元素的大小是不會變的

這種情況下，會出現以下情況，當在1920*1080尺寸下，UI布局如果為這樣

在不進行適配調整的情況下，當尺寸調整為1080*720，UI布局效果如下：

會出現上面的白色面板 遮擋住了中心的 棕色面板，因此需要進行適配

UI適配的方法，就是通過Canvas里的Scale Factor 來進行控制，因為constant Pixel Size 模式下，顯示螢屏會根據螢屏的大小來實作自動適配，

因此，我們可以通過代碼控制Canvas Scaler 里的Scale Factor 來進行實作：

eg.TestConstantScaler

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class TestConstantScaler: MonoBehaviour {

	// Use this for initialization
	void Start () {
        float wScale = Screen.width / 1920.0f;
        float hScale = Screen.height / 1080.0f;
        //第一種模式下進行的UI適配的操作
        GetComponent<CanvasScaler>().scaleFactor = wScale;
	}

}

運行程序呢，當獲取到當前螢屏為1080*720時，則會計算出相應的縮放比，賦值給sacleFactor，從而實作跟1920 *1080一樣的UI布局效果，

_{說到這就不得不提一嘴博主作業中的經歷，起初博主在作業期間，也是第一次遇到關于螢屏解析度適配的問題，當時博主也覺得這個問題就是一個適配問題，思路很明確，獲取解析度->每次重啟游戲根據解析度動態計算->調整位置，但是由于之前并沒有去實踐過，導致在一個簡單的問題上卡很久，當然，一般來說，專案組針對于解析度的適配，一般早已在框架中寫有，參考呼叫即可，}

因此，僅僅通過對組件屬性注解的幾篇文章想要學好unity基本是不可能的，更多的還是要通過具體實踐、廣泛應用才能孰能生巧，

_{如果看到這，已經覺得很吃力了，建議先去了解和簡單學習Unity的基本使用，不必在組件的注解上深究與組件屬性，博主之所以將屬性注解通過圖片展示效果，一方面，是簡要注解屬性，另一方面，更是找到我們自以為知道但是實則不了解的組件屬性的作用與，這些內容也是通過網路學習，只是博主更愿意把它總結下來，這樣的話，就能做到針對某個組件更加的有目的性！}

2. ScreenWithScreen Size模式下的UI適配

通過控制Reference Resolution 來進行調整UI

• Match Width Or Height：適應你的寬或者高，Match一般設定為0.5

• Expand：Canvas會進行放大，即畫布的大小最小也不會低于原來我們設定的1080*720

• Shrink：Canvas會被縮放，即畫布的大小最大也不會超過原來我們設定的1920*1080

3. ConstantPhysicalSize模式下的UI適配

根據物理大小來調整進行適配

• Physical Unit

• Centimeters: 厘米

• Milimeters: 分米

• Inches： 英尺

• Point： 點

• Picas： 派卡

我們一般用到Point這個屬性，Point指構成顯示屏的點的數目

• Fallback Screen DPI： 對應物理單位的像素密度

• Default Sprite DPI： 默認精靈的像素密度

• Reference Pixels Per： 每個unity單位對應的像素數
  
  

四、Graphic RayCaster組件

該組件針對的是UI作用的，用于管理圖片射線回應的一個組件，關閉該組件時，UI元素則得不到射線回應

屬性：

• Ignore Reversed Graphics： 勾選，翻轉的圖片無法回應射線，不勾選，翻轉的圖片一樣可以回應射線

• Blocking Objects： 決定什么物體能夠遮擋射線

  1.None： 判定沒有遮擋
  2.Two D： 2D物體可以遮擋射線
  3.Three D： 3D物體可以遮擋射線
  4.All： 所有物體只要在攝像機前，都可遮擋射線

判定原則：根據碰撞體來進行判定

Blocking Mask決定什么層級能夠遮擋射線，只有選中的層級才能對射線進行阻擋

五、Canvas Group組件

屬性：

Alpha： 透明通道，對Canvas下的所以子物體都可以通過該組件下的Alpha來統一進行管理，例如需求：有幾個圖片，放在一起，希望這幾張圖片同時變透明

Interactable： 它所管理的元素是否能夠接收圖形射線的檢測

Ignore Parent Groups： 當前的Group是否受父級Group的影響

以上呢，便是我對Canvas及其相關組件作出的簡要的描述，希望能夠對你有所幫助~ 也希望能獲得你們的關注、點贊、評論吖~
你們的點贊、評論就是我前進的動力！

作者：ProMer_Wang

鏈接：https://blog.csdn.net/qq_43801020/article/details/117611758

本文為ProMer_Wang的原創文章，著作權歸作者所有，轉載請注明原文出處，歡迎轉載！