关闭

[UGUI] Rect Transform

标签: RectTransformUGUI
489人阅读 评论(0) 收藏 举报
分类:

两个概念:(Anchor和Pivot)

Anchor

锚点,四个小三角组成,作用是作为定位目标,它们的位置会跟着父级的变动而变动,其定位方式是按照父级的百分比。后面统一称呼为左上、右上、左下、右下四个锚点。

Pivot

轴心,用一个空心小圆圈表示,作为本身的缩放、旋转、定位的中心点/参考点,和三维物体的轴心概念一致。

两种定位方式:固定的和拉伸的

两种定位方式都是针对x和y某个轴向来说的,x和y轴向的定位方式互相独立,可以一致,也可以不一致。

固定的

    锚点在该方向上是重合的,例如,如果x方向上是固定的,那么左上和右上锚点一定是重合的,左下和右下锚点一定是重合的。Y方向上,则左上和左下必定重合,右上和右下必定重合。

    固定定位模式下该方向的定位方式是直接以轴心和锚点的距离来表示的。例如,如果X方向上是固定定位,那么Rect Transform组件中,X方向是用Pos X(表示轴心相对于锚点的X方向的坐标,以像素为单位,是固定值)和Width(物体的宽度,以像素为单位,是固定值)来描述的。需要注意的是,这些值都是固定的像素值。

拉伸的

锚点在该方向上是分离的。

拉伸模式下,该方向的定位方式是以相应的边界和锚点的距离来描述的。

例如,如果x方向上是拉伸模式,那么Rect Transform组件中,X方向上是用Left和Right两个值来描述的。分别表示该物体左侧离左侧锚点的偏移距离和物体右侧离右侧锚点的偏移距离,单位都是像素,都是固定值。Y方向上是用Top和Bottom来描述,意义可以类推。

总结一下,无论是固定模式还是拉伸模式,锚点和父级的定位方式是按百分比计算,而描述物体位置时,无论是固定还是拉伸模式,Left、Right、Top、Bottom以及Pos X、Pox Y都是用像素来描述,是固定的值。
看完上面对定位方式的描述,应该意识到,pivot在拉伸模式下对于定位是没有帮助的(因为是按照边缘来计算的)。另外pivot是可以手工修改位置的。确保上方轴心按钮是Pivot而不是Center,直接拖动pivot的小圈,可以改变pivot位置,pivot在Rect Transform中是用百分比来表示的,左下角是(0,0),右上角是(1,1)。除了手动拖动,也可以直接在Rect Transform的Pivot中直接输入数值。另外注意一点,Pivot是可以跑出物体的边界的。
锚点的调整,可以直接用鼠标分别拖动四个锚点,拖动的同时按住Shift键会同时改变元素本身的大小。也可以直接在Rect Transform中的Anchors中输入数值来调整。

常见的定位组合:

  1. 四个锚点定位在物体的四个角,这样可以保证该物体长宽和位置都始终按照现在相对于父级的百分比来缩放。
  2. 四个锚点定位在父级的四个角,这样可以保证该物体的四个边界(上下左右)依次和父级的四个边界保持固定的距离。
  3. 四个锚点中,左上和左下重合,右上和右下重合,都放在父级的顶部,这样可以保证横向上按比例和父级定位,纵向上和顶部保持固定的距离
    等等

预览功能

当选择某个UI元素时,在Scene窗口直接拖动其他物体的边界,会以预览方式呈现对布局的影响,释放鼠标时会变回原来的尺寸。注意如果拖动的是选择了的物体,会真正的改变物体的尺寸。

预设好的一些定位方式

点击Rect Transform左上角的示意图标,可以打开预设锚点界面,里面有一些预设好的常用定位和锚点组合方式。
上方有提示,按下Shift键可以在改变锚点的同时也改变Pivot,按下Alt键可以再改变锚点的同时也改变自身的位置

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:46779次
    • 积分:387
    • 等级:
    • 排名:千里之外
    • 原创:25篇
    • 转载:1篇
    • 译文:0篇
    • 评论:4条
    文章存档
    最新评论