http://www.2fz1.com/post/unity-ugui-recttransform/#jtss-tsina

uGUI知識點剖析之RectTransform

一、基本要點

RectTransform繼承于Transform，在 Transform 基礎上，RectTransform 增加了 軸心（pivot）、錨點（anchors）、和 尺寸變化量（sizeDelta）。

其中anchors和pivot都是坐標原點在左下角的0-1向量空間，0-1代表的是比例。anchors的向量空間是子UI相對父UI的比例位置，pivot的向量空間是相對UI本身的比例位置。

二、Anchors（錨點或錨框）

錨點功能的引入，使UI相對布局和絕對布局，自適應，等比縮放等完美融合一起。在uGUI中Anchors并不一定是錨點，也可能是一個矩形。當Anchors匯聚成一個點時，我們通常稱之為錨點；當Anchors是一個矩形狀時，我們通常稱之為錨框。Anchors是子UI在父UI中的映射位置，但并不代表子UI的實際大小，子UI的實際大小，還會通過這些屬性(width,height,posX,posY,left,top,right,bottom)相對Anchors進行調整。

基本概念：

• Pos (X, Y, Z) ，矩形軸心點（pivot）與錨點（anchors）之間的距離。
• Left, Top, Right, Bottom，矩形的四條邊與錨框（anchors）之間的間距。

（一）Anchors是一個點時

• 在數值上表示為：achorMin.x==achorMax.x && achorMin.y==achorMax.y
• Width/Height可以設置，不受Anchors影響。
• PosX/PosY可以設置。設置此值后，矩形軸心點與錨點之間的距離就恒定了，不管如何改變父UI的尺寸。
• 子UI不會隨父UI進行拉伸，位置和大小是固定的。

（二）Anchors是一條線時

• 一條橫線：achorMin.y==achorMax.y，如上圖。子UI寬度會隨父UI進行拉伸，高度和Y方向的距離是固定的。此時，Left,Right,PosY,Height可以設置。
• 一條豎線：achorMin.x==achorMax.x。子UI高度會隨父UI進行拉伸，寬度和X方向的距離是固定的。此時，Top,Bottom,PosX,Width可以設置。（沒有上圖，可以自行測試）

（三）Anchors是一個矩形時

• achorMin.y!=achorMax.y && achorMin.y!=achorMax.y
• 子UI寬高都是拉伸狀態。
• 寬高不可以設置。
• Left, Top, Right, Bottom可設置，矩形的四條邊與錨框的邊間距是固定的。

三、anchoredPosition

anchoredPosition官方描述為：The position of the pivot of this RectTransform relative to the anchor reference point.

即：RectTransform的pivot與錨點（anchor reference point）的向量。

（一）Anchros匯聚一個點時

Anchros匯聚一個點時，錨點（anchor reference point）比較好理解，就是Anchros匯聚的這個點。

（一）Anchros是一個矩形時

Anchros是一個矩形時，錨點（anchor reference point）的位置就稍顯復雜，此時錨點（anchor reference point）的位置是根據pivot計算出來的線性插值。

----在此插入線性插值相關知識，復習一下基礎知識。----

線性插值法是指使用連接兩個已知量的直線來確定在這兩個已知量之間的一個未知量的值的方法。

假設我們已知坐標(x0,y0)與(x1,y1),要得到[x0,x1]區間內某一位置x在直線上的值。根據圖中所示，我們得到:

• y = (1 ? α)y0 + αy1 或者 y = y0 + α(y1 ? y0)
• x = (1 ? α)x0 + αx1 或者 x = x0 + α(x1 ? x0)

這樣就可以通過α就可以直接得到 x,y。

通過線性插值的方法計算錨點

α即為pivot(0-1)的比例系數！通下圖實例，看一下計算過程。

• 已知pivot(0,0.5)，pivot所在坐標值為(100,250)
• 已知左下角錨點坐標(x0,y0)=(0,0)
• 已知右上角錨點坐標(x1,y1)=(600,500)

以上值，通過Rect的Width,Height及Rect與錨的間距，以錨左下角為原點的坐標系獲得。

• anchorReferencePointX = (1 ? 0)x0 + 0x600 = 0;
• anchorReferencePointY = (1 ? 0.5)x0 + 0.5x500 = 250;

得到：anchorReferencePoint ＝ (0,250)

圖中黃點即為計算出來的anchorReferencePoint，anchorReferencePoint到pivot之間的向量，即為anchoredPosition！

anchoredPosition＝pivot(100,250)-anchorReferencePoint(0,250)=(100,0)；

四、offsetMin與offsetMax

• offsetMax為當前矩形右上角相對于錨點右上角的偏移。
• offsetMin為當前矩形左下角相對于錨點左下角的偏移。

1、Anchors匯聚一個點時

offsetMax/offsetMin的計算如下圖：

Anchors匯聚一個點時，即以錨點為坐標原點（0,0），offsetMax和offsetMin就可以直接用坐標系的方式，快速得出右上角和左下角在此坐標系中的（x,y）。

2､Anchors是一個矩形時

offsetMax/offsetMin的計算如下圖：

Anchors是一個矩形，則需要以左下角錨點和右上角錨點分別作為坐標原點畫兩個坐標系，以計算offsetMin和offsetMax.

五、sizeDelta

官方文檔只用了一句英文進行了描述：The size of this RectTransform relative to the distances between the anchors.

是不是很費解？官方文檔很多類似這種，描述不詳細，造成理解上的困難和學習成本增加。

sizeDelta是錨點定義的子矩形與錨點區域大小偏移量，也可以稱之為尺寸變化量。

如上圖所示，紅色區域為錨點定義的子矩形，矩形相對錨點的偏移就可以通過右上角與錨點右上角的offsetMax到左下角與錨點左下角的offsetMin之間的向量（綠色箭頭）來表示。

因此得出計算方法：

sizeDelta = offsetMax-offsetMin

（一）如何動態RectTransform的大小

1、Anchors匯聚一個點時

sizeDelta（x,y）與Rect的寬高是一致的。RectTransform與錨點偏移量就是本身的大小。

RectTransform的Rect是只讀的，當需要動態設置RectTransform的尺寸時，在Anchors匯聚一個點時，就可以直接通過sizeDelta的x,y來動態設置RectTransform的對應的寬和高。

2、Anchors是一個矩形時

sizeDelta同樣可以設置Rect大小，但理解上不太好轉換。可以直接通過offsetMax和offsetMin的偏移量來動態調整Rect的大小。具體實例，后續會添加本知識點的實例。

（二）sizeDelta的計算實例

如下圖，紅色區域的Anchors是一個anchorMin(0,0)到anchorMax(1,1)的全拉伸錨框，left,right,top,bottom全為50。

紅線內數據，sizeDelta = offsetMax-offsetMin得到的向量。
即：sizeDelta ＝ (-50-50,-50-50) = (-100,-100)

＝＝＝＝＝（本文完）uGUI系例知識點請關注后續文章＝＝＝＝＝

引用

• • http://wiki.mbalib.com/wiki/線性插值法
  • http://docs.unity3d.com/ScriptReference/RectTransform.html

轉載于:https://www.cnblogs.com/alps/p/9415521.html

總結

以上是生活随笔為你收集整理的uGUI知识点剖析之RectTransform的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。