UI中的Rect Transform

  RectTransform 是 Transform 的 2D 对应 Component。

  Transform 表示单个点,Rect Transform 表示一个2D矩形(UI空间),如果父子物体都有Rect Transform,那么子物体就可以指定在父物体矩形中的位置与大小, RectTransform 就是定义UI元素的位置、旋转和大小。

一、 锚点(Anchor)

         1. 定义

         物体的锚点:子物体依据Anchor来对齐父物体,又分为Min和Max来表示锚点的位置,实际上锚点是包括四个小的锚点组合而成,可以通过修改Min和Max的值,来移动这四个锚点的位置,如下图,

 

         2. 锚点位置坐标的关系

  点调整4个小锚点的时候,会出现比例信息,这个比例是子物体在父物体中的缩放比例。

         如果四个小锚点分离的话,这时会切换到相对尺寸的状态,面板上的属性:

                   Pos X、Pos Y、Width、Height  =>  Left、Top、Right、Buttom

 

         锚点未分离时,显示的是物体的大小及位置,当锚点分离的时候,显示的是物体以锚点组成的矩形作为边界,在画布上的填充空间。

         3. Anchor Presets(锚点预设置)

         点选Rect Transform左上角,可以开启Anchor Presets工具,这里会列出常用的Anchor,可以快速套用。按住Shift可以连同Pivot一起改变;按住Alt可以连同位置一起改变。

        

二、 Pivot (支点)

         物体自身的支点,影响物体的旋转、缩放、位置,改变UI pivot必须先开启控制面板的Pivot按钮,如下图,

 

         Pivot的位置不同,影响其轴点。

        

三、 锚点(Anchor)和支点(Pivot)结合

         1. Rect Transform的面板属性

                   1). Anchor四个小锚点重合时,属性内容包括:

                   形状:width+hight ;

                   位置:posX+posY+posZ;

                  2). Anchor锚点不重合时,属性内容包括:

                   Left+right+top+bottom+PosZ;(形状和位置融合)

         2. 控制和改变Rect Transform的不同属性的API

                  1. anchoredPosition—当锚点重合时这个变量比较有用处

                   pivot与锚点(anchor reference point)的向量。

                  a.  Anchor锚点重合时,比较好理解,如下图,

 

                   此时物体的位置position(x,y,z)就是以锚点作为基准点,povit作为计算点,得出来的:

anchoredPosition  =   position

                   b. Anchor不重合时,此时锚点(anchor reference point)的位置是根据pivot计算出来的线性插值。

         PS线性插值法

         线性插值法是指使用连接两个已知量的直线来确定在这两个已知量之间的一个未知量的值的方法。

 

         已知坐标(x0,y0)与(x1,y1),要得到[x0,x1]区间内某一位置x在直线上的值,则:

 

           y = (1 − α)y0 + αy1 或者 y = y0 + α(y1 − y0)

           x = (1 − α)x0 + αx1 或者 x = x0 + α(x1 − x0)

         这样就可以通过α就可以直接得到 x , y。

 

         通过线性插值的方法计算锚点

         α即为pivot(0-1)的比例系数!通上图实例,看一下计算过程:

              已知pivot(0,0.5),pivot所在坐标值为(100,250)

         已知左下角锚点坐标(x0,y0)=(0,0),已知右上角锚点坐标(x1,y1)=(600,500),

以上值,通过Rect的Width,Height及Rect与锚的间距,以锚左下角为原点的坐标系获得。

         anchorReferencePoint X = (1 − 0)*0 + 0*600 = 0;

         anchorReferencePoint Y = (1 − 0.5)*0 + 0.5*500 = 250;.

         得到:anchorReferencePoint = (0,250);

         图中黄点即为计算出来的anchorReferencePoint,所以anchoredPosition如下:

anchoredPosition = pivot(100,250) - anchorReferencePoint(0,250) = (100,0);

                  2. offsetMinoffsetMax—这两个变量在锚点分离的时候作用比较大

                   offsetMax(Vector2)为当前矩形右上角相对于锚点右上角的偏移。

                   offsetMin(Vector2)为当前矩形左下角相对于锚点左下角的偏移。

                   锚点不重合时:

         Anchors是一个矩形,则需要以左下角锚点和右上角锚点分别作为坐标原点画两个坐标系,以计算offsetMin和offsetMax,那么,

offsetMin  =  (left,bottom)

offsetMax  =  (right,top)

                   3).sizeDelta—用来表示物体的总尺寸

                   sizeDelta是锚点定义的子矩形与锚点区域大小偏移量,也可以称之为尺寸变化量,表示了物体的实际的hight和weight。

 

                   如上图所示,红色区域为锚点定义的子矩形,矩形相对锚点的偏移就可以通过右上角与锚点右上角的offsetMax到左下角与锚点左下角的offsetMin之间的向量(绿色箭头)来表示。,因此得出计算方法:

     sizeDelta = offsetMax-offsetMin

                   sizeDelta.x  =  Width

                   sizeDelta.y  =  hight

 

三、Blue Print Mode(蓝图模式) 和Raw Edit Mode(原始编辑模式)

 

         1. Blue Print Mode(蓝图模式):

         忽略了物体的Local Rotation和Local Scale,方便原来的旋转与大小调整物体。

 

         2. Raw Edit Mode(原始编辑模式)

         在Inspector中调整Pivot和Anchor时,物体会维持目前位置与大小(Inspector中数值部分),从而会导致物体的移动,而不是变形。

猜你喜欢

转载自www.cnblogs.com/yzm-code/p/9210209.html