Unity中Rect類型詳解

Rect類的用處以及爲什麼要了解它?

簡單來說,這個主要在Unity的UGUI、GUI以及編輯器擴展GUILayout等時設置佈局都要用到,瞭解一下豐富自己的知識面,減少寫出bug的情況。

Rect類型的基本概念

衆所周知這是一個矩形的結構體類型,那麼它內部是如何來定義的呢?先來看一下官方怎麼說
在這裏插入圖片描述
這麼一大坨的主要意思就是:知道一個矩形的根座標(x,y)和長寬(width,height)就可以定義一個矩形了。Unity用了很多2d空間,一般都使用左下角爲根座標(例如屏幕座標)從x向右遞增,y向上遞增。這個Rect使用的恰恰相反,x向右遞減,y向上遞減(這句別看,建議直接跳過)。很多人可能還是不能理解,一臉懵逼。沒錯官網這個說明有點抽象,甚至會誤導。接下來我給大家用自己的方式講解。

徹底理解它,開始!

rect.x與rect.y (這一節很重要,懂了這個其他的就都很簡單了!)
x,y就是rect類的根座標,有了它我們就能確定我們就能確定矩形的位置。我們寫個小代碼來確定一下它的根座標到底在哪?

	void Update()
	{
        if (Input.GetMouseButtonDown(0))
        {
            Rect r=new Rect(0,0,200,200);
            print(r.Contains(Input.mousePosition));
        }
    }

這時候我們點擊我們屏幕的左下角,發現返回true,完全可以點擊到。

對!其實就是這麼簡單,不要被官網的說明誤導。它就是根座標在左下角,根據width與height向右和向上畫出來的一個矩形,但是還稍稍有點不太一樣。
在UGUI中,transform.rect你得到的相關屬性或許很會奇怪。接下來的例子我們都以transform.rect得到的值來講解。

我們在界面中添加一個Image,他的錨點與pivot值都不變,具體如下圖:
在這裏插入圖片描述
這時候他的長寬都是知道的。我們輸出trans.rect.x與trans.rect.y會是什麼呢?
結果是(-50,-50),rect.size就是對x與y的包裝。
因爲rect的根是基於pivot的值來算的,把pivot的位置作爲整個圖形座標的原點(0,0)。那麼trans.rect的x與y因而所以就在第三象限爲負值。
那麼trans.rect.x與y的算法就是x=-width * pivot.x 和 y=-height * pivot.y。

下面用一張圖來幫助理解。
在這裏插入圖片描述
驗證代碼

    print("trans's rect x and y"+trans.rect.x+" "+trans.rect.y);
    print("caculate rect x and y"+-trans.rect.width*trans.pivot.x+" "+-trans.rect.height*trans.pivot.y);
    //trans.rect.position就是 x和y的封裝

結果輸出
在這裏插入圖片描述
舉一反三
那麼如果pivot改爲(0.5,1),trans.rect的xy各是多少呢?還是一樣的公式,此時整個座標的原點到了圖形最上面那一條邊的中間了,trans.rect的xy爲(-50,-100)。

總結:UGUI中rect的根座標是基於pivot的位置來計算的。其他場景下的rect可以認爲pivot爲(0,0),那麼rect的根座標也就自然爲(0,0)。

rect.min和rect.max
rect.min也就是(rect.x,rect.y),表示左下角座標也就是根座標
rect.max就是(width+rect.x,height+rect.y),表示右上角座標
同時rect.min=(rect.xMin,rect.yMin) rect.max(rect.xMax,rect.yMax)
(以下例子pivot爲(0.5,0.5))
代碼驗證

    print("trans's rect min and max"+trans.rect.min+" "+trans.rect.max);
    print("caculate rect min and max"+new Vector2(trans.rect.x,trans.rect.y)+" "+new Vector2(trans.rect.width+trans.rect.x,trans.rect.height+trans.rect.y));     

結果輸出
在這裏插入圖片描述
舉一反三
如果這是pivot爲(0,1)呢?
通過上面的公式求的min(0,-100)max(100,0)

rect.center
rect.center就是整個矩形的中心座標。
center.x座標爲(rect.xMin+rect.xMax)/2
center.y座標爲(rect.yMin+rect.yMax)/2
(以下例子pivot爲(0.5,0.5))
代碼驗證

    print("trans's rect center"+trans.rect.center);
    print("caculate rect center"+(trans.rect.xMin+trans.rect.xMax)/2+" "+(trans.rect.yMin+trans.rect.yMax)/2); 

結果輸出
在這裏插入圖片描述
舉一反三
如果這是pivot爲(1,1)
center值爲(-50,-50)

多實踐幾次就可以徹底理解了。上文主要討論了UGUI中的rect的各個屬性的求法,其他情況下求法一樣。只把pivot考慮爲(0,0)就可以了

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章