zoukankan      html  css  js  c++  java
  • Unity UGUI RectTransform图解

    UGUI RectTransform.Unity RectTransform详解

    The first:look look API.

    http://docs.unity3d.com/ScriptReference/RectTransform.html

    在新的UI系统中,无论ButtonTextImageToggle等组件,都是基于RectTransform进行布局的。

    你可以不知Button为何物,不知Text为何物,不知Image为何物,但是一定要知道RectTransform

    Unity4.6引入的新的UI坐标系,它在新的UI系统中扮演了极其重要的角色。

     

    它的属性有anchoredPosition,anchorMax,anchorMin,offsetMax,offsetMin,pivot等。

    干说是比较难以理解RectTransform的表面与内在联系的。那么我们就用最直接的图文代码方式来解释它各个属性之间的联系。

    新建一个场景,其UI关系如下图,这个场景中我们要实验的对象就是参考按钮。

    父容器是BaseBox,子对象是白色的Button。

     

    首先 我们来验证按钮的anchorMax,代码如下:

            if (isTween)
    
            {
    
                Vector2 value = btnRect.anchorMax;
    
                value += new Vector2(0.01f, 0.01f);
    
                btnRect.anchorMax = value;
    
                btnText.text = btnRect.anchorMax.ToString();
    
            }

    它的作用很明显当isTween为true时候,请注意下图中的anchorMax值将会不断叠加。而anchorMin却不动丝毫。

    所以我们可以理解为,图中白色按钮的左下角表示anchorMin,而变化的右上角自然就是anchorMax

    通过这两个点各自的XY值,我们可以确定这个UI对象在整个父容器当中的尺寸比例。

    记住,是比例,当你切换回Scene场景就可以看到!

    //////////////////////////

    同样的方式再看anchorMin

    当isTween为true时候,我们的anchorMin值将会不断减小。

            if (isTween)
            {
                Vector2 value = btnRect.anchorMin;
                value += new Vector2(0.001f, 0.001f);
                btnRect.anchorMin = value;
                btnText.text = btnRect.anchorMin.ToString();
            }

    请注意下图中Anchors Min的值和按钮的变化。原理同上面的anchorMax.不再重复表述。

     /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

     接下来,我们再看anchoredPosition。

            if (isTween)
            {
                Vector2 value = btnRect.anchoredPosition;
                value += new Vector2(1, 1);
                btnRect.anchoredPosition = value;
                btnText.text = btnRect.anchoredPosition.ToString();
            }

    请注意下图中按钮的最低点【Left-Bottom】和最高点的【Right-Top】参数进行等比例变化。

    但是却不会影响anchorMax,anchorMin的锚点比例变化。所以修改他是不会影响UI对象在父容器中定义的占比尺寸。

    通过这个例子,我们知道了anchoredPosition的作用就是修改UI对象的2维坐标位置。

    我们再往下看看offsetMax,演示代码如下下

            if (isTween)
            {
                Vector2 value = btnRect.offsetMax;
                value += new Vector2(0.1f, 0.1f);
                btnRect.offsetMax = value;
                btnText.text = btnRect.offsetMax.ToString();
            }

    通过下图的结果,我们确定了offsetMax起作用就是改变按钮的最高点【Top-Right】的值。

    而相应的最低点却没有同比例调整,那么必然导致UI对象尺寸的改变。

    但是对UI对象的anchorMax,anchorMin锚点确实没有任何影响的。

    通俗的理解就是通过溢出自身的anchorMax,anchorMin定义的占比边界来改变尺寸。

    为了说明offsetMax的改变对anchorMax,anchorMin是否有影响,我们在看一下Scene中当时的情况。

    没错,UI对象确实变了尺寸,但是对anchorMax,anchorMin半毛钱的影响都没有。

    下面顺便再配上offsetMin的演示:

            if (isTween)
            {
                Vector2 value = btnRect.offsetMin;
                value += new Vector2(0.1f, 0.1f);
                btnRect.offsetMin = value;
                btnText.text = btnRect.offsetMin.ToString();
            }

    结果如下图 我们确定了offsetMin起作用就是改变按钮的最低点【Bottom-Left】的值。

    //////////////////////////////////////////////////////////////////////////////////////////////////////////////////

    通过上面的演示,我们可以确定锚点的变化是会影响按钮尺寸的,而按钮的尺寸变化却不会影响锚点。

    anchoredPosition的变化是需要offsetMax,offsetMin共同配合实现。

    //////////////////////////////////////////////////////////////////////////////////////////////////////////////////

    往下再看pivot

            if (isTween)
            {
                Vector2 value = new Vector2(Random.Range(0.1f, 0.9f), Random.Range(0.1f, 0.9f));
                btnRect.pivot = value;
            }

    这个概念很简单就是UI元素的轴心点,UI元素想怎么Rotation都要围绕轴心点来运动。直接看演示图:

    我们把pivot 的值进行了随机,在Scene场景中的pivot圆圈圈就是这么疯狂了。此处略过3千字。

    最后我们要说的就是sizeDelta

            if (isTween)
            {
                Vector2 value = btnRect.sizeDelta;
                value += new Vector2(0.1f, 0.1f);
                btnRect.sizeDelta = value;
                btnText.text = btnRect.sizeDelta.ToString();
            }

    这是个什么东东,我们看演示图吧。

    那么他在Scene场景中真实的状态是什么样的呢?看下图

    你没有看错,Anchors没有任何变化,他只是改变了自己的尺寸而已,

    他的变化依然要通过修改offsetMax,offsetMin实现。所以大家应该明白,sizeDelta和offsetMax,offsetMin是存在必然联系的。

    关系就是:btnRect.sizeDelta=btnRect.offsetMax-btnRect.offsetMin;

    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

    小小的一个RectTransform,这里面的关系还是有点意思。大家多多思考。

    本篇完结,纯属个人理解,如有错误,欢迎大家指出修正。

  • 相关阅读:
    rhel7 编写CMakeList.txt编译运行MySQL官方例子代码
    记录下 rhel 7 安装MySQL 并重置root密码
    杨辉三角 可以不用二维数组的
    一个ACE 架构的 Socket Client
    一个ACE 架构的 C++ Timer
    一个C++版的网络数据包解析策略
    标记下 'net 查壳/脱壳/加壳' 工具
    C++动态加载DLL调用方法
    C# (灰度)加权平均法将图片转换为灰度图
    C# GMap下提供一个高德地图
  • 原文地址:https://www.cnblogs.com/2Yous/p/5052723.html
Copyright © 2011-2022 走看看