Unity3D UGUI组件的Inspector属性探究(一)--RectTransform

关于RectTransform

我们都知道unity任何一个物体都会有一个组件–Transform,用来表示物体的位置坐标.而在UGUI中,UI元素是有专门的RectTransform组件来描述元素的几何信息，而他是继承于Transform组件的.

他长这样

现在让我来了解一下他里面的各个属性

Anchors，锚点

他长这样



如果用过同学应该知道在UGUI中锚点是干嘛用的,下面的文章里有一些它的运作动图可以看一下

UGUI学习笔记

-善于观察的同学可能已经发现，不管什么情况，button的四个顶点到相应锚点的相对位置是不变的.

-而且当锚点分开和锚点在一个点时,属性面板显示的属性是不一样的

我主要就是讲解一下这些属性到底是如何工作的

当锚点在一个点时

他长这样



其中的属性:

PosX : UI元素的X轴位置,坐标原点为锚点

PosX : UI元素的Y轴位置,坐标原点为锚点

PosZ : UI元素的Z轴位置,坐标原点为锚点(修改后没有任何影响)

Width:UI元素的宽度

Height:UI元素的高度

这是大家常用的情况,都很好理解,可是当锚点分开时情况开始不一样了

当锚点分开时

情况一:锚点上下分离为两部分

他长这样



圈出来的那种情况和他左右两边的是一样的的,从左到右的差别为上下分离的两个锚点连成的线是在左边,中间,右边

可以看到这个时候属性面板的一些属性变得不一样了

Top:元素的上边离锚点的距离

Bottom:元素下边离锚点的距离

4000

情况二:锚点左右分离为两部分

这种情况就和上钟类似,属性面板变出了Left,Right属性

Left:元素的左边离锚点的距离

Right:元素下边离锚点的距离

情况三:锚点上下左右分离为四个部分

这种情况Top,Botton,Left,Right就都出现了,不再赘述.

下面以一个并无卵用的使用技巧来加深对这些属性的理解,以结束锚点的介绍

不使用sprite,,仅利用Image组件实现血条,进度条效果

他长这样



制作方式



1.Bg的Width设为400,把Filled的锚点设为Bg上下左右四点,并将Top,Bottom,Right,left设为0,此时Filled将和Bg保持同样大小(技巧:按住Alt,点击锚点选框右下角即可将子元素与父物体大小保持一致)

2.将Filled的Right属性设为400,此时filled的宽度为0,

3.将将Filled的Right属性逐渐变成0,就会有这种填充效果了(这里不提供代码了,只讲属性)

Anchors

Anchors的Min和Max分别是正规化的值(从0到1)，表示占父RectTransform的百分比

这是前面贴的那篇博文里的话,我再自己讲一下自己的理解

贴个图



可以将父物体看成由左下角为一个原点,宽高分别为X,Y轴,值是0到1的一个坐标系

Min:四个锚点的左下角的点在此坐标系中坐标

Max:四个锚点的右上角的点在此坐标系中坐标

Pivot

Pivot表示UI的中心点

UI元素的旋转和缩放是围绕pivot进行的。RectTransform组件中，Pivot属性是一个正规化的二维向量，用来描述中心点在本身矩形大小的位置。默认值为(0.5, 0.5)，即几何中心。(博文中的话)

自己的理解

贴个图



还是用坐标来理解,因为point是一个点,我们需要理解他的位置.这个坐标系是以自身的左下角为原点,如图的一个坐标系,注意!这里的point的值是任意的,大家可以用这个坐标系来对Point的位置有一个直观的印象

剩下两个就是Rotation和Scale,旋转和缩放了,不用多提.

PS:今天我只是和大家分享了一些UGUI属性的知识,我觉的UGUI的精髓还是在它的实现方式上,以后再与大家分享UGUI源码相关的东西,那些才是硬货!