Unity——RectTransform詳解

1. Anchor

unity中的ui元素是有嚴(yán)格的父子關(guān)系的，子物體的位置是根據(jù)父物體的變化而變化的，而子物體和父物體聯(lián)系的橋梁就是Anchor。在recttransform面板中可以調(diào)整錨點(diǎn)的值

為什么一個(gè)點(diǎn)會(huì)由四個(gè)值來確定呢，其實(shí)Anchors準(zhǔn)確來說是由兩個(gè)點(diǎn)確定的。他們就是AnchorMin以及AnchorMax

之所以anchorMax和anchorMin的值是小數(shù)，是因?yàn)槠浔碚鞯氖窃擖c(diǎn)所在位置占父物體大小的比例，也就是圖中黑色畫線部分占灰色物體總長(zhǎng)度和總寬度的比例，所以在示意圖的情況下
二者的值為：anchorMax(0.5,0.5),anchorMin(0,0) (默認(rèn)左下角為0，0點(diǎn)，右上角為1，1點(diǎn))

當(dāng)anchorMax與anchorMin不相等時(shí)，Anchor呈現(xiàn)為一個(gè)框，我稱之為錨框(即示意圖中的情況)

為了方便后續(xù)描述，我把Anchor分為兩種情況
當(dāng)anchorMax與anchorMin相等時(shí)，Anchor呈現(xiàn)為一個(gè)點(diǎn)，我稱之為錨點(diǎn)
當(dāng)anchorMax與anchorMin不相等時(shí)，Anchor呈現(xiàn)為一個(gè)框，我稱之為錨框(即示意圖中的情況)

2. 絕對(duì)與相對(duì)布局

想要清晰的理解Recttransform的各個(gè)屬性，個(gè)人認(rèn)為首先需要建立的第一個(gè)概念就是絕對(duì)布局以及相對(duì)布局這兩個(gè)概念。

2.1 絕對(duì)布局

所謂的絕對(duì)布局，就是出現(xiàn)錨點(diǎn)的情況，此時(shí)的recttransform面板中的屬性變成了

PosX,PosY,PosZ,Width,Height，這五個(gè)屬性，首先說說Width和Height，在絕對(duì)布局的情況下無論分辨率是多少，父物體多大，該UI元素的大小是恒定的，如下圖所示

而剩下的PosX,PosY,PosZ表征的就是Pivot (第三部分有關(guān)于Pivot的講解) 到錨點(diǎn)的距離

所以如果使用了絕對(duì)布局，在采用不同分辨率的時(shí)候，該元素的大小恒定，可能就會(huì)出現(xiàn)在高分辨率情況下元素太小或者低分辨率情況下元素比屏幕大的情況。

2.2 相對(duì)布局

所謂相對(duì)布局，就是出現(xiàn)錨框的情況。在這種情況下UI元素的四個(gè)角，距離四個(gè)對(duì)應(yīng)的錨點(diǎn)的距離是不變的，在這種情況下RectTransform的屬性又變?yōu)榱薒eft,Top,Right,Bottom,PosZ，其中的PosZ表征的是該元素到父物體在Z軸上的偏移，利用這個(gè)值可以調(diào)整UI元素的顯示順序，不過我用的不多，這里不作太多討論。剩下的四個(gè)值應(yīng)該很好理解了，就是UI元素的每一條邊距離父物體的每一條邊的距離。
在示意圖的情況下，我設(shè)定了紅色圖片（子物體）距離灰色圖片（父物體）的每一條邊的距離都是200個(gè)單位。

接下來我們將灰色的圖片（父物體）縮小，看看紅色圖片的變化

我們會(huì)發(fā)現(xiàn)紅色的圖片縮小了，但是其每個(gè)邊距離父物體的距離是不變的，這個(gè)就是所謂的相對(duì)布局。

如果有同學(xué)出現(xiàn)這種情況，那就是因?yàn)門op和Bottom的值加起來比父物體的高還要高，所以計(jì)算子物體高的時(shí)候出現(xiàn)負(fù)數(shù)的情況，就會(huì)出現(xiàn)這種叉叉的情況，只要還原父物體的大小就ok（橫向同理）。

3. Pivot

Pivot中心點(diǎn)，就是該UI元素旋轉(zhuǎn)縮放的中心點(diǎn)，左下角為(0,0)右上角為(1,1)

所以之前在絕對(duì)布局的情況下，PosX和PosY的值就是Pivot到錨點(diǎn)的值。

4. Offset

首先說說OffsetMax，其實(shí)OffsetMin也是同理。接下來會(huì)主要解釋兩個(gè)問題

OffsetMax的值是怎么計(jì)算得出來的呢？OffsetMax又有什么用呢？

其實(shí)沒有那么神秘，這個(gè)值就是UI元素的右上角的坐標(biāo)，減去AnchorMax的值，得到一個(gè)從AnchorMax指向元素右上角的向量(vector2類型)，各位看官可以自行測(cè)試一下。

那么這個(gè)值有什么用呢，因?yàn)檫@個(gè)值是一個(gè)可讀可寫的屬性，所以在錨框的情況下我們可以在代碼里面動(dòng)態(tài)的去調(diào)整UI元素相對(duì)邊界的距離，其次更重要的是，利用這這兩個(gè)值就可以計(jì)算出sizeDelta的值了！

5. sizeDelta

以前對(duì)這個(gè)屬性是真的一臉懵逼，網(wǎng)上很多教程說這個(gè)值可以設(shè)置UI元素的大小，但是真的有時(shí)候好用，有時(shí)候有不好用，真的一頭霧水，官方文檔說的也是很籠統(tǒng)，但是現(xiàn)在搞清楚了其中的聯(lián)系以后，就覺得清晰了不少了。

其實(shí)sizeDelta的值就是OffsetMax-OffsetMin的值

所以就會(huì)出現(xiàn)有時(shí)候sizeDelta得到的是UI元素的大小，有時(shí)候又不是的情況，下面就復(fù)現(xiàn)一下這兩種情況

5.1 錨點(diǎn)情況下的sizeDelta

在錨點(diǎn)情況下，offsetMax和Min的起點(diǎn)相同，根據(jù)向量相減的三角形法則（不記得是不是這樣說得了哈哈哈），可以得到一個(gè)新的向量，這個(gè)新的向量的X和Y的大小正好UI元素的寬和高相等，所以在這個(gè)時(shí)候去設(shè)置sizeDelta的值，可以直接調(diào)整UI元素的大小

5.2 錨框情況下的sizeDelta

在錨框的情況下，offstMax減去Min，得到的將不再是UI元素的大小，而是一個(gè)新的奇怪的向量，這個(gè)向量代表的物理意義是，sizeDelta.x值就是UI元素的寬度與的錨框?qū)挾鹊牟钪?，sizeDelta.y的值就是UI元素的的高度與的錨框高度的差值(sizeDelta.x：UI寬度 - 錨框?qū)挾?；sizeDelta.y：UI高度 - 錨框高度)

所以這個(gè)屬性之所以叫做sizeDelta，是因?yàn)樵阱^點(diǎn)情況下其表征的是size（大?。阱^框的情況下其表征的是Delta（差值）

6. rect

rect中的屬性，不與UI元素所在的位置有關(guān)，只和其自身屬性相關(guān)，所以其中的rect.width和rect.height屬性就可以讓我們?cè)谌魏吻闆r下取得元素的大小，而rect.x和rect.y如圖所示，表示的是以Pivot為原點(diǎn)，UI元素左下角的坐標(biāo)，可以看到圖中Pivot是在UI元素的正中間，所以左下角的坐標(biāo)就剛好是(-100,-100)

但是有一個(gè)問題，rect屬性是一個(gè)只讀的屬性，如果我們想要設(shè)置UI元素的大小的話，這好像又不適用了，所以RectTransform還提供了幾個(gè)非常有用的方法。

7. anchoredPosition

通過直接設(shè)置anchoredPosition的值可以改變UI元素的位置，但也是要分錨點(diǎn)和錨框的情況

在使用錨點(diǎn)的情況下，anchoredPosition表征的是元素Pivot到Anchor的距離

在使用錨框的情況下，anchoredPosition表征的是元素Pivot到錨框中心點(diǎn)的距離

8. Recttransform類中一些方法的介紹

8.1 SetSizeWithCurrentAnchors(Animations.Axis axis, float size)

這個(gè)方法無論在絕對(duì)布局還是相對(duì)布局的情況下，都可以通過直接設(shè)置rect中的width和height值來改變UI元素的大小。

private RectTransform rectTransform;
// Use this for initialization
void Start()
{
    rectTransform = GetComponent<RectTransform>();
    rectTransform.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, 100);
    rectTransform.SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical, 100);    
}

8.2 SetInsetAndSizeFromParentEdge(RectTransform.Edge edge, float inset, float size)

這個(gè)方法就比較冷門了可能，不過還是挺強(qiáng)大的。調(diào)用這個(gè)方法，可以根據(jù)父物體的Edge（某一邊）去布局。其中第一個(gè)參數(shù)就是用于確定基準(zhǔn)的邊，第二個(gè)參數(shù)是UI元素的該邊界與父物體該邊界的距離，第三個(gè)元素是設(shè)定選定軸上UI元素的大小，可能說起來有點(diǎn)復(fù)雜，但是我上兩張圖相信各位就可以秒懂了。

首先以右邊界為基準(zhǔn)

private RectTransform rectTransform;
// Use this for initialization
void Start()
{
    rectTransform = GetComponent<RectTransform>();
    rectTransform.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Right, 200, 400);
    //這種情況下我選定父物體的右邊界為基準(zhǔn)，結(jié)果如下圖
}

然后以下邊界為基準(zhǔn)

 private RectTransform rectTransform;
// Use this for initialization
void Start()
{
    rectTransform = GetComponent<RectTransform>();
    //rectTransform.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Right, 200, 400);
    rectTransform.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Bottom, 200, 400);
}

在使用這個(gè)方法的時(shí)候要注意錨點(diǎn)也會(huì)改變，改變的規(guī)則為

• 以左邊界為基準(zhǔn)時(shí)，anchorMin和anchorMax 的y不變x變?yōu)?.
• 以右邊界為基準(zhǔn)時(shí)，anchorMin和anchorMax 的y不變x變?yōu)?.
• 以上邊界為基準(zhǔn)時(shí)，anchorMin和anchorMax 的x不變y變?yōu)?.
• 以下邊界為基準(zhǔn)時(shí)，anchorMin和anchorMax 的x不變y變?yōu)?.

8.3 GetWorldCorners(Vector3[] fourCornersArray)

使用這個(gè)方法，可以取得UI元素四個(gè)角的世界坐標(biāo)，具體使用方法，先建立一個(gè)長(zhǎng)度為4的vector3數(shù)組，然后傳進(jìn)這個(gè)方法，調(diào)用一次后，數(shù)組被賦值，里面的四個(gè)元素分別是UI的左下角 ，左上角，右上角，右下角。

  private RectTransform rectTransform;
    // Use this for initialization
    void Start()
    {
        rectTransform = GetComponent<RectTransform>();
        Vector3[] corners = new Vector3[4];
        rectTransform.GetWorldCorners(corners);
        foreach (Vector3 corner in corners)
            Debug.LogWarning(corner);
    }

最后

還有一篇文章參見：https://zhuanlan.zhihu.com/p/121107857 

到此這篇關(guān)于Unity RectTransform詳解的文章就介紹到這了,更多相關(guān)Unity RectTransform內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論