UGUI RectTranstrom锚点和坐标系

转自：http://www.jianshu.com/p/ebce72240d6c

锚点相对关系

锚点是我们用来确定UI元素的位置的，当然这个锚点是相对离自己最近的父类而言的，子类的锚点和父类的锚点是关系的，而是以父类的UI为基础的，这一点看文字不好看懂，下边我们用几个图来说明

Paste_Image.png

这四个点就是该Image的锚点，而该图片的大小和锚点是不一样的大小，这个要怎么调我们下边会讲解，大家不要着急，下边我们在该Image下创建一个子物体，然后把他的锚点设置为平铺在父物体上

Paste_Image.png

该选项就是平铺到父物体身上

Paste_Image.png

我们此时观察该物体的锚点，平铺到父物体身上，刚开始我的理解就是他应该和父物体的锚点对齐，但是后来发现自己错了，他应该是和父物体对齐，以父物体的大小为基准，我们看这张图和第一张记性比较下我们就能看到。

Pivot

这个也可以叫做锚点，但是感觉不是太贴切，他的作用是该物体的所有变化，比如旋转，缩放都是以该点为基准点，（Pivot也是以该物体的大小为基准 ），该值 X,Y都是取值范围是从0到1，默认为0.5，就是中心点

Paste_Image.png

这个点就是Pivot点，我们旋转试一下

若水GIF截图_2016年12月25日10点52分1秒.gif

下边我们把Pivot点调到坐下角，X=0，Y=0，我们再去旋转

缩放大家可以自己去试下。

Anchors

手动锚点

Paste_Image.png

我们先看下这个，因为锚点这个东西都是以矩形的方式的情况出现的，而这里边有4个参数需要我们填，我们在看几个参数的时候不要横着看（Min X看到Y），要竖着看这两个X值是确定这个Anchores在X方向的最小值和最大值，两个Y值确定Y方向的的最大值最小值，这样我们就可以确定一个矩形了（记住，不管你是手动拖锚点还是通过数值改锚点，最终都是组成一个矩形）有的时候可能不小心把Min的X值调的比Max的X值都大，这个在图中会显示，但是运行不了，而且我们通过手动拖动锚点就根本不会出现这种情况

若水GIF截图_2016年12月25日11点11分22秒.gif

这个就是手动拖动锚点。

自动锚点

Paste_Image.png

这个就是自动锚点，我们可以点开它然后选择不同的对齐方式，这个问题我们要注意几个问题

Paste_Image.png

上图我红框圈起来的都是我们可以选择的锚点方式，细心点会发现有的是一个点，有个是两个点，这就是我们在选择该锚点方式的时候，锚点的分布方案，我们选择不同的锚点方式的时候，该UI元素的大小怎么去调节，也是有区别的。

Paste_Image.png

我们先随便选择一个点的锚点方式，这种分布方式代表四个锚点都是在一个地方我们通过Anchors里的参数也可以看出来

Paste_Image.png

图更直观点，接下来我们怎么去调节该图片的大小呢

• PosX，Y 该图片的Pivot点距离锚点的距离，通过这两个调节图片的位置
• width height，通过这两个调节该图片的大小

Paste_Image.png

我们再选择有两个点的锚点分布方式，我们可以注意下下边Anchors值，X值是一样的，Y值不一样

Paste_Image.png

我们发现描点分布方式框后边有几个参数也发生了变化

• Posx 表示Pivot点距离锚点X方向的值（因为他的X值是一样的）
• Top Bottom我们可以通过这两个值来改变该图片的高度
• Width 该图片的宽度
  当然其他的两个点的锚点分布方式还有好多，参数可能也不一样，大家可以自己去看下。

Paste_Image.png

这种是四个点的锚点分布方式，我们通过下图可以看的直观些

我们注意后边红线圈的几个参数
Left，Right，Top，Bottom这几个表示该图片离锚点所绘制的边框上下左右的距离。

小结

• Posx，y这种参数一般出现在四个锚点组成了一个点或者是一条线的情况下，Pivot点距离该点或者该线的距离。该参数在锚点组成一条线的情况下，只会出现一个。
• Width，Height这种参数出现在四个锚点组成了一个点或者是一条线的情况下，表示该图片的宽度和高度。该参数在锚点组成一条线的情况下，只会出现一个。该值改变是以Pivot为基础的。
• Left，Right,Top,Right这种参数会出现在四个锚点组成了一个矩形，表示该图片的某个边缘，距离锚点组成的图形的边缘的距离，有正负之分，在范围以内是正值，边框外为负值。四个锚点组成一条线的时候，是Y方向的线的时候，会出现Top和Bottom两个选项，表示距离该锚点Y值最大值和最小值的距离。是X方向的线的时候，会出现Left和Right两个选项，表示距离该锚点X值最大值和最小值的距离。
  语文不好，上边的几个参数经常混合出现，解释的有些不到位，大家可以根据上边的解释测试下，就会完全理解了，如果还不理解，可以简信。

RectTransform

当锚点在中心的时候，我们在上边提到的PosX，Y，Z,这个我们也可以理解为坐标系，但是这个坐标系和世界坐标系是不一样的，我们暂且理解为UI坐标系，UI坐标系的朝向跟世界坐标系是一样的，但是UI坐标系的距离和世界坐标系是不一样的

 //获取UI坐标系的2D坐标，就是X,Y值
 GetComponent<RectTransform>().anchoredPosition;
 //获取UI坐标系的3D坐标，
 GetComponent<RectTransform>().anchoredPosition3D;
//获取该UI在世界坐标系的3D坐标
 GetComponent<RectTransform>().position;
 //和上一个值是一样的是世界坐标系
 transform.position;
 //和世界坐标系transform.up是一样的，都是单位长度
 GetComponent<RectTransform>().up;

有的时候这个rectTransform还有其他的和transform的其他一些方法，