请选择 进入手机版 | 继续访问电脑版

石家庄老站长

点击联系客服
客服QQ:509006671 客服微信:mengfeiseo
 找回密码
 立即注册
查看: 15|回复: 0

在UGUI中使用RectTransform

[复制链接]

1

主题

1

帖子

-7

积分

限制会员

积分
-7
发表于 2021-4-4 14:39:51 | 显示全部楼层 |阅读模式
Canvas子节点上GameObject的Transform组件由3358www.sina.com/(以下简称rectT)组件代替。除了“Position”、“rotation”和“scale  3大”之外,还有“anchors”、“pivot”和左上角的框。

他们的代表队是RectTransform





首先是基本排序。左上角的图标上写着middle,center。

Anchors和pivot都是0.5。这种情况最接近中学学的平面直角坐标系。

1.父节点的中心点已经是原点

2.坐标是x,y

3.宽度高度为宽度和高度

加起来,“以相对于父节点中心点水平和垂直方向分别偏移x和y像素的位置为中心,创建宽度和高度宽度的矩形”。





本例将父节点设置为红色,子节点设置为蓝色,子节点的坐标设置为50,100。蓝色矩形的位置水平偏移50像素,垂直偏移100像素。





这些都很简单有几种相似的排序方法。

我们订购了有九个红色的小盒子按钮。中心对齐是上述默认对齐。

周围的“八大保护法”理解也很简单。

将父节点的“xx”点作为原点…(后面的相同内容)。

以左上角的对齐为例,是“父节点的3358www.sina.com/原点”

右下角按“父节点的3358www.sina.com/原点”对齐

用这种方式类推





这里还有一个例子。如果将对齐方式调整为“左上原点”

那我将坐标设置为0,0。矩形的中心在父节点的左上角




mFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTI0NzE4MQ==,size_16,color_FFFFFF,t_70" alt="例子2" />
…这里也非常简单。
引出一个问题,“假如我要子节点的左上角对齐父节点的左上角该怎么办?”,子节点的中心点对齐的确很奇怪,不符合常规情况。
这里就要使用我们刚刚所提到的pivot
pivot定义的是子节点的中心,默认的0.5,0.5代表中间。而我们这种情况下需要把左上角当作中心,就需要把值调整为0,1。就是左上角了。




值得一提的小技巧:同时设定pivot
在上面的有一段话:shif: also set pivot
当你在设定的时候按下shift,就会自动生成常用的pivot。上文所说的情况就可以一键设定了。


另外,在修改了pivot之后,rotation和sacle的调整也会以新的pivot为中心进行变化。就不贴例子了,有兴趣的朋友可以自行设置一下。

然后就是蓝色的几种对齐方式说明:
最简单,最常用的对齐方式,就是右下角那个十字。
当我们选择后小图标的文字会变成strech,strech。
对应点pos和宽高也变成了left,top,right,bottom。


这种对齐方式代表的是子节点每条边,对到父节点边上的距离。
全部都是0,就表示和父节点重合,相当于屏幕
假如要用一张图片当黑底,我们就可以使用这种对齐方式:
无论手机的分辨率怎么变化(这也是我们为什么要适配的原因),黑底的大小始终等于屏幕大小。想起有人曾经弄了一个宽高都是99999的图片当背景…哈哈哈


懂了以上例子之后别的就很好理解了。
举个例子:这种对齐方式代表“水平方向是以拉伸的方式对齐”,而垂直方向保持原来的坐标系对齐法则。
即“以父节点的顶部中心为原点,垂直方向偏移y像素,高度为height。左右两边距离父节点的边界为left和right的矩形”


实际效果:会随着横向变化而拉伸自己,垂直方向始终保持从顶部往下偏移


基本的使用介绍就到这里。那unity内部是如何实现的呢?会在下一篇文章中介绍。
有错误欢迎指正。

ps:我们为什么需要适配?以下图为例,假如右上角的小地图是以中心为原点进行对齐。那会发生很多奇怪的情况:
屏幕太短看不到;屏幕太长会在中间,挡住视线;分辨率太高地图会很小,分辨率太低地图会很大…
用一套ui解决所有的情况,才是合格的ui仔

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|无图版|手机版|小黑屋|石家庄@IT精英团

GMT+8, 2021-5-10 15:13 , Processed in 0.061623 second(s), 25 queries .

Powered by Discuz! X3.4

© 2001-2021 Comsenz Inc.

快速回复 返回顶部 返回列表