关于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:元素下边离锚点的距离
- 情况二:锚点左右分离为两部分
这种情况就和上钟类似,属性面板变出了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源码相关的东西,那些才是硬货!