美文网首页
UGUI RectTranstrom锚点详解和坐标系

UGUI RectTranstrom锚点详解和坐标系

作者: LeoYangXD | 来源:发表于2016-12-25 11:28 被阅读2972次

锚点相对关系

锚点是我们用来确定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的其他一些方法,

相关文章

  • UGUI RectTranstrom锚点详解和坐标系

    锚点相对关系 锚点是我们用来确定UI元素的位置的,当然这个锚点是相对离自己最近的父类而言的,子类的锚点和父类的锚点...

  • Cocos Creator 坐标系

    坐标系和节点变换属性 一、概念 1.锚点Anchor 锚点由 anchorX 和 anchorY 两个值表示,他们...

  • UGUI锚点(Anchors),轴点(Pivot)及RectTr

    锚点Anchors UGUI为屏幕自适应提供了锚点机制,方便在不同分辨率下的UI元素保持相同的布局格式,本篇将锚点...

  • 面试

    如何理解UGUI的描点与轴心 1:锚点是这个物体针对他父物体的一个对齐方式 2:轴心:用来被计算和锚点的距离,不一...

  • u3d

    Screen获取屏幕的大小 ugui自适应可以通过锚点和位置改变 方法聚合类调用 类加载的时候初始化init

  • iPhone X 适配方案(UGUI和NGUI)

    本文作者旨在通过改锚点的方式,分别实现在NGUI和UGUI上的iPhone X适配技术方案,并结合自身项目经验,阐...

  • UGUI元素的锚点原则

    以最接近的那个锚点位置作为该元素的锚点

  • 1-1 古典《超级个体》你的身价,被什么决定?

    [内容梳理] 职业价值坐标系 一个点的价值往往不是由点本身决定的,而是由坐标系决定的。 “陆地体系”:施恩《职业锚...

  • springBoot+Mybatis注解大全

    锚点目录:一、SpringBoot 快速整合Mybatis二、Spring注解(annotations)详解三、个...

  • Unity3D UGUI组件跟随鼠标运动

    初衷 因项目的需求,在制作中需要让UGUI中的组件,追随鼠标的运动轨迹。由于个人在以前使用中对于UGUI的坐标系了...

网友评论

      本文标题:UGUI RectTranstrom锚点详解和坐标系

      本文链接:https://www.haomeiwen.com/subject/gtwrvttx.html