【UGUI学习笔记】RectTransform组件

RectTransform继承于Transform


       上图中的中间九个按钮叫做绝对布局(也有人叫九宫格),边上的七个按钮叫做相对布局。上图只是为了让用户更好的操作,下图才是它的数值:


       Anchors的名字叫做锚点,其存在最小点与最大点,anchormin与anchormax均为向量。

       在Anchor下面还有一个属性叫Pivot,轴心。是坐标原点在UI自身左下角的0-1空间向量。


       设置红色框体的Pivot时,其坐标系如图所示,(0,0)表示红色物体的左下角,(1,1)表示红色物体的右上角。


       下图中黑色框体为父物体,红色框体为当前物体。设置红色框体的anchor时,其坐标系如图所示,(0,0)表示父物体的左下角,(1,1)表示父物体的右上角。中间的九个绝对布局就是anchormin与anchormax重合。边上的七个相对布局就是anchormin与anchormax分开。


与父UI的关系:

       当UI处于绝对布局时,轴心点与锚点之间的距离恒定。此时红色框体的大小不会随父物体的大小变化而变化,位置会根据Pivot点到Anchor点的距离一致而改变。

       当UI处于相对布局时,锚点不再是一个点,而是一个框子,通常称之为锚框,有四个点,anchormin表示左下角,anchormax表示右上角。此时红色框体的左下角到锚框的左下角距离保持不变,红色框体的右上角到锚框的右上角距离保持不变。此时红色框体的四条边与锚框的边间距是固定的,红色框体的大小随父物体的大小变化而变化。

Pos (X, Y, Z) ,矩形轴心点(pivot)与锚点(anchors)之间的距离。

Left, Top, Right, Bottom,矩形的四条边与锚框(anchors)之间的间距。

RectTransform的其他属性:

 anchoredPosition:在绝对布局下,该属性表示的是锚点到pivot的向量;在相对布局下,unity会根据Pivot、AnchorMin和AnchorMax计算出一个锚点,该属性表示的是计算出的锚点到Pivot的向量。

offsetmin、offsetmax:offsetmin表示的是当前图片的左下角相对锚框的左下角的偏移,offsetmax表示的是当前图片的右上角相对锚框的右上角的偏移。

绝对布局如下图:


anchor为(0,0.5)
anchor为(0,0)

相对布局如下图:


anchor为(0,0),(1,0)
anchor为(0,0),(1,1)

sizeDelta:尺寸变化量,该属性表示offsetMax - offsetMin得到的向量,绝对布局下即从图片的左下角指向右上角的向量。

sizeDelta可以动态设置Rect大小:绝对布局下sizeDelta(x,y)与Rect的宽高是一致的,可以直接通过sizeDelta的x,y来动态设置RectTransform的对应的宽和高;相对布局下直接调整sizeDelta可以调整Rect大小,但是不好理解,通过offsetMin和offsetMax来动态调整Rect的大小比较方便。

Rect:这是一个只读属性,前两个参数是从Pivot指向UI自身左下角的向量,后两个参数是UI自身的width和height。在绝对布局和相对布局下输出一致。

改变RectTransform的top

GetComponent<RectTransform>().offsetMax = new Vector2(GetComponent<RectTransform>().offsetMax.x, top);

改变RectTransform的Right

GetComponent<RectTransform>().offsetMax = new Vector2(right,GetComponent<RectTransform>().offsetMax.y);

改变RectTransform的bottom

GetComponent<RectTransform>().offsetMin = new Vector2(GetComponent<RectTransform>().offsetMin.x, bottom);

改变RectTransform的left

GetComponent<RectTransform>().offsetMin = new Vector2(left,GetComponent().offsetMin.y);

改变RectTransform的width,height

GetComponent<RectTransform>().sizeDelta = new Vector2(width, height);

改变RectTransform的pos

GetComponent<RectTransform>().anchoredPosition3D = new Vector3(posx,posy,posz);

GetComponent<RectTransform>().anchoredPosition = new Vector2(posx,posy);

RectTransform的方法:

void GetLocalCorners(Vector3[] fourCornersArray); 

该方法表示获取UI的四个角在以自身Pivot为原点的坐标系中的坐标。作为参数的Vector3数组需要自己声明。获取四个角的顺序是左下、左上、右上、右下。

void GetWorldCorners(Vector3[] fourCornersArray);

该方法表示获取UI的四个角在世界坐标系的坐标。

void SetSizeWithCurrentAnchors(RectTransform.Axis axis,float size);

按照当前的anchor信息来设置尺寸(实际上根据的是pivot,设置的结果与anchor无关),有两个参数,第一个是Axis类型的值,需要指定一个方向,水平或垂直;第二个参数,是本身的宽高。

例:将宽高设为(100,30)。

RectTransform rt = GetComponent<RectTransform>();

rt.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal,100);

rt.SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical,30);

void SetInsetAndSizeFromParentEdge(RectTransform.Edge edge,float inset,float size);

设置当前UI相对父UI边的距离及当前UI的尺寸,第一个参数是一个Edge类型的值,需要指定以父对象的哪个边为基准(也就是Top、Bottom、Left、Right四个值之中的一个,即对齐方式); 第二个参数,是离指定边的距离; 第三个参数,是本身的宽度或者高度。

例:将宽高设为(100,30),与父UI的右边间距为0,与底边间距为0。

RectTransform rt = GetComponent<RectTransform>();

rt.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Right, 0, 100);

rt.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Bottom, 0, 30);

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,905评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,140评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,791评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,483评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,476评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,516评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,905评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,560评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,778评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,557评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,635评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,338评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,925评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,898评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,142评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,818评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,347评论 2 342

推荐阅读更多精彩内容