最近有同學(xué)問到在使用UGUI時(shí)病梢，看到在Inspector面板中的RectTransform組件下有兩個(gè)按鈕复凳，一個(gè)虛線框耍休，一個(gè)是一個(gè)R鍵（圖1）辱匿，而它們表示什么意思呢键痛？
當(dāng)時(shí)我給你說啊，我就這個(gè)表情匾七，因?yàn)橹皦焊蜎]注意啊絮短，還是自己見識(shí)太少???♀?
然而，抱著實(shí)事求是的態(tài)度昨忆，我趕緊去網(wǎng)上尋求答案丁频，發(fā)現(xiàn)在網(wǎng)上關(guān)于這兩個(gè)按鈕的介紹也是少之又少，有的雖然有邑贴，但是感覺介紹的也不是特別清晰席里，所以我決定查詢官方API直接看官方的意思。在官方API里拢驾，它給了這樣一段話：
一 奖磁、第一個(gè)虛線按鈕
On a RectTransform component, the dotted square button is the "Blueprint mode"; it allows you to edit RectTransforms as if they were not rotated and scaled. It enables snapping too.
在這句話里說的很明白了，在RectTransform這個(gè)組件里繁疤，那個(gè)虛線的按鈕表示的是“藍(lán)圖模式”咖为；它允許你在當(dāng)前的UI控件沒有旋轉(zhuǎn)和縮放的情況下依然可以編輯當(dāng)前控件的RectTransform。
這句話什么意思呢嵌洼，說白了案疲，它是和我們當(dāng)前UI控件的旋轉(zhuǎn)和縮放有關(guān)的封恰，如果你還不是很明白麻养，請(qǐng)看下面的下面情況：
1、在Untiy場(chǎng)景中我創(chuàng)建了一個(gè)Image控件诺舔，reset了RectTransform鳖昌，然后當(dāng)前我并沒有選中任何按鈕，然后對(duì)當(dāng)前的Image控件進(jìn)行旋轉(zhuǎn)和縮放低飒，如圖3：
相信大家肯定看出來效果许昨，當(dāng)我改變Image的Scale和Rotation時(shí)，當(dāng)前控件周圍的四個(gè)小藍(lán)點(diǎn)所在的區(qū)域會(huì)跟隨改變褥赊，而小藍(lán)點(diǎn)所圍成的區(qū)域就是當(dāng)前Image控件的真實(shí)大小區(qū)域糕档，在這種模式下，當(dāng)我們改變縮放和旋轉(zhuǎn)的時(shí)候拌喉，藍(lán)點(diǎn)組成的矩形會(huì)隨之變大或變小速那。
2俐银、我們先reset一下RectTransform,然后點(diǎn)擊一下虛線按鈕，這時(shí)候再來調(diào)節(jié)我們的Image控件的旋轉(zhuǎn)和縮放端仰，如圖4：
可以看到捶惜，當(dāng)我選中虛線按鈕之后，無論怎么調(diào)節(jié)我們的Rotation和Scale荔烧，藍(lán)色點(diǎn)組成的矩形區(qū)域無動(dòng)于衷（藍(lán)色框：上來吱七，自己動(dòng)！???♀?）
二鹤竭、第二個(gè)R按鈕
The R button is the "Raw edit mode"; when enabled, manually editing pivot and anchor values will not counter-adjust the position and size of the rectangle in order to make it stay in place. However, changing the pivot and anchor values by using the "anchor presets" button will counter-adjust as usual.
簡(jiǎn)單解釋一下踊餐，這個(gè)有點(diǎn)長(zhǎng)。它說R按鈕叫做原始編輯模式臀稚；如果被選中了市袖，當(dāng)手動(dòng)去編輯我們當(dāng)前UI控件的中心點(diǎn)pivot和錨點(diǎn)anchor的時(shí)候，將不會(huì)反向地區(qū)適配當(dāng)前這個(gè)矩形框的位置和大小烁涌，為了讓它他保持在原來的位置苍碟。然而，如果你要是通過有一個(gè)叫做“錨點(diǎn)預(yù)設(shè)”按鈕去改變中心點(diǎn)和錨點(diǎn)的值的時(shí)候撮执，這時(shí)候我們當(dāng)前的中心點(diǎn)和錨點(diǎn)仍然會(huì)通過“反向適配”的方式去改變?cè)瓉礤^點(diǎn)和中心點(diǎn)的位置微峰。
解釋完之后，發(fā)現(xiàn)并不是那么簡(jiǎn)單抒钱，廢話不多說蜓肆，直接看圖吧（能用圖解決的問題就別多bb???♀?）
1、reset了RectTransform谋币，然后當(dāng)前我并沒有選中任何按鈕仗扬，然后對(duì)當(dāng)前的Image的pivot和anchor進(jìn)行改變，如圖5：
PS: pivot表示UI控件創(chuàng)建后中間藍(lán)色的小圓圈蕾额；anchor就是控件中間那透明的小菊花早芭，有四個(gè)花瓣。（待會(huì)著重看圖片中他們的變化）
當(dāng)我改變中心點(diǎn)和錨點(diǎn)的位置時(shí)诅蝶，發(fā)現(xiàn)當(dāng)前圖片的位置和大小并沒有發(fā)生改變退个。
2、reset了RectTransform调炬，然后選中R按鈕语盈，然后對(duì)當(dāng)前的Image的pivot和anchor進(jìn)行改變，如圖6：
效果和區(qū)別相信各位已經(jīng)看得很明確了吧缰泡，這里我再改變中心點(diǎn)和錨點(diǎn)時(shí)刀荒，當(dāng)前Image控件會(huì)跟通過改變自己的大小來進(jìn)行適配當(dāng)前中心點(diǎn)和對(duì)應(yīng)錨點(diǎn)的位置。
總結(jié)：這里的藍(lán)圖模式其實(shí)就是對(duì)于UI控件中游戲?qū)ο蟮男D(zhuǎn)和縮放產(chǎn)生影響，而原始編輯模式表示對(duì)游戲?qū)ο蟮闹行狞c(diǎn)和錨點(diǎn)產(chǎn)生影響缠借，然而在真正開發(fā)過程中我認(rèn)為它們的作用可能是輔助我們進(jìn)行調(diào)試UI時(shí)使用资溃，小弟才疏學(xué)淺，如果有解釋不當(dāng)烈炭，或者您有其他見地溶锭，隨時(shí)歡迎拍磚，關(guān)于這兩個(gè)按鈕在真實(shí)項(xiàng)目開發(fā)過程中的使用符隙，如果哪位大佬知曉趴捅，也希望不吝賜教。
