GJM :Unity UI 之 UGUI 開發

時間 2019-12-08

標籤 gjm unity ugui 開發简体版

原文原文鏈接

轉載URL：http://www.manew.com/thread-41633-1-1.htmlphp

最近由於要作各類UI控件，因而與UGUI槓上了。首當其衝的就是RectTransform，最坑爹的是，這貨居然不是UGUI框架的，代碼居然封裝在unityengine裏面，因此，不得不吐槽下unity的開源動機，根本就是留一手，估計只是由於本身的研發力量不足，因此開放一部分出來而已。
RectTransform繼承於Transform，配合Canvas專門交給UGUI使用，具體這邊就不展開了，我如今也木時間去搞清楚這些亂七八糟的關係。

直接開講RecTransform。RectTransform首先要闡述的就是Anchor。html

<ignore_js_op>

小小的仰慕下設計該解決方案的人，華麗麗的一套思想解決了絕對佈局與相對佈局的問題。至於其是否是獨創我就不得而知了，本人視野有限，UI方面的東西非常生疏。
看完了上面的圖，咱們再來看下這個圖： <ignore_js_op>

。你能夠理解爲上面那個圖是用來讓你更好的操做，下面這個纔是他的數值。那麼，anchor究竟是啥，在ugui裏面。
Anchor名字叫錨點，但在ugui裏面其應該叫錨框。其存在最小點與最大點。你能夠閉眼想象一下兩個點決定一個矩形，固然也能夠決定的是一個點（重合）。如中間的那九個（有人叫他九宮格）就是最大點與最小點重合。anchormin與anchormax均爲向量，那麼其向量空間是啥，下面一張圖說明。

<ignore_js_op>

   其中黑色框子爲父物體，紅色物體爲當前物體。設置紅色物體的anchor的時候，其座標系如圖。(0,0)表徵父物體的左下。（1,1）表徵右上角。
   如此，你本身動手很好理解中間那九個絕對佈局。你還能夠手動設置值，讓他的錨點位於父物體的某個位置。那個圖你能夠理解爲預約義的幾個錨點位置，固然也是最經常使用的，通常咱們要麼居中，要麼就是靠左，靠右的，不多出現非要靠左邊1/3處的。
   下面咱們來說解下邊上的七個相對佈局。相對佈局與絕對佈局如此和諧的融合主要得益於錨框這個概念的提出。在ugui中，錨點再也不是一個點，而是一個框子，有四個點，用兩個點來進行表徵。即anchormin與anchormax，前者表徵左下角，後者表徵右上角。

<ignore_js_op>

      觀察圖，你能夠看到錨點已經分爲四個點，組成了一個錨框了。這個時候，就是相對佈局了，你的物體會隨着父物體變化而變化。
      當使用相對佈局的時候，錨框會根據你的輸入變換成一個矩形或者一條線，總之四個點各類組合。

      咱們觀察RectTransform還有一個屬性叫pivot，該屬性表徵的爲中心，用3dmax或者maya的人應該不會生疏這個概念。其向量空間以下圖所示：

<ignore_js_op>

RectTransform還存在一個屬性叫anchoredPosition（anchoredPosition3D此處就忽略不講了）。其表徵的爲錨點到pviot的向量。對於絕對佈局很好理解，由於錨點就是一個點，以下圖
首先anchor設置爲(0.5,0.5),pivot設置爲(0.5,0.5)，獲得下圖：

<ignore_js_op>

   可是對於錨框的情形，如何計算，爲此我作了大量的測試，總結，最終獲得的結論爲：錨點爲錨框根據pviot計算獲得，而後再經過錨點計算出pviot相對錨點的偏移向量。有興趣的能夠自行測試下，我測試的數據以下：
   一、pviot(0.5,0.5)，anchor從（0,0）（0,0），（0,0）（0,0.1），（0,0）（0,0.2）……（0,0）（0,1）獲得的anchoredposition的變化爲(250.0, 300.0)、(250.0, 275.0)、(250.0, 250.0)、(250.0, 225.0)、(250.0, 200.0)、(250.0, 175.0)、(250.0, 150.0)、(250.0, 125.0)、(250.0, 100.0)、(250.0, 75.0)、(250.0, 50.0)。能夠看出錨點位於錨框的中心。
   二、pviot(0,0)，anchor從(0,0)，（0.1,0.1），（0.2,0.2），（0.3,0.3），（0.4,0.4），（0.5,0.5），（0.6,0.6），（0.7,0.7），（0.8,0.8），（0.9,0.9），（1,1）獲得的輸出anchoredpoistion爲一直爲(150.0, 100.0)
   三、pivot爲(1,1)，條件同第二條，獲得的輸出爲(350.0, 500.0)、(310.0, 450.0)、(270.0, 400.0)、(230.0, 350.0)、(190.0, 300.0)、(150.0, 250.0)、(110.0, 200.0)、(70.0, 150.0)、(30.0, 100.0)、(-10.0, 50.0)、(-50.0, 0.0)。

至此，anchor與pviot以及anchoredposition介紹完畢。下面就是offsetmin與offsetmax。offsetmin表徵的是圖元的左下角相對錨框的左下角的便宜，offsetmax表徵圖元的右上角相對錨框的右上角的偏移。如對於絕對佈局以下圖：

<ignore_js_op>

anchor爲(0,0.5)

<ignore_js_op>

anchor爲（0,0）

相對佈局以下：

<ignore_js_op>

anchor爲（0,1）（1,1）

<ignore_js_op>

anchor爲(0,0)(1,1)

   再下一個屬性是sizeDelta了，「The size of this RectTransform relative to the distances between the anchors.」寫得多直白（吐槽下，官方的英文文檔是啥級別的資料組維護的，專業坑爹三十年麼！！！）。這裏闡述下，這個屬性表示的就是offsetMax-offsetMin獲得的向量，即圖元從左下角指向右上角獲得的向量。固然若是用的是相對佈局的話，這個向量看起來會很是詭異。因此，這個變量就別用了，屬於坑爹API。
   最後一個屬性，只讀的Rect，其表徵的是圖元這個Rect，其向量空間爲pviot做爲原點的xoy座標系。目前沒以爲有啥大的用途。

   下面來闡述下其中的某些方法：
   void GetLocalCorners(Vector3[] fourCornersArray);該方法表示獲取圖元的四個角在父物體座標系中的座標。這裏有個坑就是你本身要聲明一個四個長度的Vector3數組做爲參數送進去，方法執行完畢該數組會被賦值好，依次順序爲從左下開始到右下（若是有旋轉的話，另談）。
   void GetWorldCorners(Vector3[] fourCornersArray);該方法同上，只是獲取到的是世界座標系的座標。該方法灰常有用，我上一個項目畫寫板就是經過這個東西來肯定鼠標位於texture的哪個像素上，從而完成畫寫。
   void SetSizeWithCurrentAnchors(RectTransform.Axis axis, float size);按照的當前的anchor信息來設置尺寸。其實該方法名字我以爲應該增長上pviot這幾個字母，由於實際上你會發現他根據的是pviot，設置的結果與anchors反而無關，其強大之處也在於此，使用及其方便，你只要設定好pviot，而後就能夠設定其爲你想要的範圍。很好操控。
   見下圖：

<ignore_js_op>

原位置

<ignore_js_op>

pviot(0.5,0.5)

<ignore_js_op>

pviot(0,0)

測試代碼：

[C#] 純文本查看複製代碼

 
              if 
              (Input.GetKeyDown(KeyCode.A)) 
             
              { 
             
              gameObject.GetComponent<RectTransform>().SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, 200); 
             
              } 
             
              if 
              (Input.GetKeyDown(KeyCode.S)) 
             
              { 
             
              gameObject.GetComponent<RectTransform>().SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical, 100); 
             
              }

void SetInsetAndSizeFromParentEdge(RectTransform.Edge edge, float inset, float size);這個函數能夠簡單的理解爲設置圖元相對父圖元邊的距離以及圖元的尺寸，其強大之處在於其徹底無論你當前的pviot設置的啥，你的anchor設置的又是啥。例圖以下：

<ignore_js_op>

原圖

<ignore_js_op>

圖1

<ignore_js_op>

圖二

測試代碼：

[C#] 純文本查看複製代碼

 
             if 
             (Input.GetKeyDown(KeyCode.W)) 
            
             { 
            
             gameObject.GetComponent<RectTransform>().SetInsetAndSizeFromParentEdge(RectTransform.Edge.Top, 100, 300); 
            
             } 
            
             if 
             (Input.GetKeyDown(KeyCode.A)) 
            
             { 
            
             gameObject.GetComponent<RectTransform>().SetInsetAndSizeFromParentEdge(RectTransform.Edge.Left, 100, 400); 
            
             } 
            
             if 
             (Input.GetKeyDown(KeyCode.S)) 
            
             { 
            
             gameObject.GetComponent<RectTransform>().SetInsetAndSizeFromParentEdge(RectTransform.Edge.Bottom, 100, 300); 
            
             } 
            
             if 
             (Input.GetKeyDown(KeyCode.D)) 
            
             { 
            
             gameObject.GetComponent<RectTransform>().SetInsetAndSizeFromParentEdge(RectTransform.Edge.Right, 100, 400); 
            
             }