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的其他一些方法,

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页