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中数值部分),从而会导致物体的移动,而不是变形。

UI中的Rect Transform的更多相关文章

  1. UI中 frame 与 transform的用法与总结

    在iOS中,我们是不可以直接访问控件中frame的结构体的成员的,因此我们需要分三步来改变一个UI控件的位置,大小 一.frame用法 frame的结构体类型为: struct CGRect { CG ...

  2. unity4.6学习Ugui中文文档-------参考-UGUI Rect Transform

    1 . Rect Transform Rect Transform 是 2D 与 3D 图形的 Transform 组件对应.它用来指定用户界面系统中的大小. 位置和旋转的控件 Properties ...

  3. (九)unity4.6学习Ugui中文文档-------參考-UGUI Rect Transform

     大家好.我是孙广东.   转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unit ...

  4. 【UGUI】Canvas和Rect Transform

    Canvas 1.所有的UI元件都需要放在Canvas里 2.UI元件的绘制顺序,与在 Hierarchy的顺序相同,在上面的元素会先被绘制,位于后续绘制元素的下面 3.可以选择3种不同的渲染模式: ...

  5. Unity3D之UGUI学习笔记(二):Rect Transform与Anchor

    Rect Transform 我们都知道,Unity3D中所有的GameObject都必须要携带一个Transform组件,且该组件无法移除,那么作为UI显示的GameObject则不是携带Trans ...

  6. 关于Canvas Rect Transform 设置问题?

    Render Mode: Screen Space - Overlay:将UI放置在场景的上面,调节场景大小或调整分辨率,则Canvas也会随之调整. Screen Space - Camera:Ca ...

  7. 关于Unity中UI中的Slider,Toggle和InputField等节点

    一.Slider节点 1.创建一个Canvas 2.对Canvas进行一些初始化操作 3.创建一个Image的UI节点在Canvas下面作为子节点 4.把Image铺满整个Canvas,把宽高设置为6 ...

  8. Unity5UGUI 官方教程学习笔记(二)Rect Transform

    Rect Transform Posx    Posy   Posz  :  ui相对于父级的位置 Anchors :锚点  定义了与父体之间的位置关系    一个锚点由四个锚组成  四个锚分别代表了 ...

  9. unity ui中使用onmouseover

    unity ui中鼠标移进或者移出的触发方式与2d.3d的不同,2d.3d物体使用的是onmouseover,ui使用的是OnPointerEnter.需要实现以下两个接口. public class ...

随机推荐

  1. 多条件分类统计group by 显示数目为0的类别

    CREATE TABLE #authorTable(author VARCHAR(50)) INSERT #authorTable SELECT 'peter' UNION SELECT '捌妮' U ...

  2. SQL-在Update中进行子查询和左联查询

    以下总结源自后边的三个参考思索和测试而来: 我们有一张行政区划表,为了查询速度的优化,我们需要在这张表中,将每个乡镇的记录中写入其所属的省.市.县, 表如下: 当然,我们可以使用游标或在存储过程中使用 ...

  3. Spring教程笔记(3)

    getBean() ApplicationContext接口获取Bean方法简介: • Object getBean(String name) 根据名称返回一个Bean,客户端需要自己进行类型转换: ...

  4. 将多窗体应用程序改造为仿Chrome形式的简易方法

    需求 在我们现有的ERP应用中,他是基于WinForm设计的,在早期的设计中,我们每打开一个作业,就会新建一个窗口,就像这样: 当我们打开很多的作业时,用户要通过Windows的任务栏慢慢找到,当然, ...

  5. IE10打印预览无反应

    1. 建议您打开IE后,按Alt键,选择”工具“-”兼容性视图设置“,将网站添加到兼容性视图列表中,看情况如何.2.internet选项-高级-启用保护模式 勾去掉 看看行不行3.按下“Windows ...

  6. Redhat 6.3上安装OpenSSL

    需求是:在Redhat 6.3上安装OpenSSL 1.1.0b. 一开始试图去搜索rpm,没有对应版本.https://pkgs.org/http://rpmfind.net/放弃! 只能通过编译源 ...

  7. laravel5.5首次使用php artisan migrate注意问题:

    1.在app/Providers/AppServiceProvider.php中设置字符串默认长度:(不进行这一步,执行php artisan migrate会报错,同时创建的表会有所缺失) use ...

  8. 《程序设计入门——C语言》翁恺老师 第四周编程练习记录

    1 奇偶个数(5分) 题目内容: 你的程序要读入一系列正整数数据,输入-1表示输入结束,-1本身不是输入的数据.程序输出读到的数据中的奇数和偶数的个数. 输入格式: 一系列正整数,整数的范围是(0,1 ...

  9. firefox 开启安全禁用端口

    firefox 开启安全禁用端口 step1: 在firefox地址栏键入 about:config step2: 新建字符串 network.security.ports.banned.overri ...

  10. 修改AD中PCB各层的透明度

    1.采用的Altium designer 版本为AD16: 2.进入PCB编辑页面,快捷键Ctrl+D,进入视图配置: 3.选择“透明度”,设置选中的层.对象所需的透明度:(横向可以连续选择多个对象, ...