UGUI RectTransform详解

为什么会卡住

  • 没有找到思考路径
  • 没有找到关键问题
  1. anchordPosition 与 LocalPosition之间如何转换?
  2. anchordPosition对于UGUI是什么?
  3. localPosition 对于UGUI是什么?
  4. andhordPosition于localPosition 是什么关系?

以下面几个支点来思考

  1. RectTransform 解决的是什么问题
  2. 有哪些概念,元素
  3. 每个元素逻辑意义是什么
  4. 每个元素如何计算获得
  5. 验证

RectTransform 解决的是什么问题

主要解决了两个问题

  1. RectTransform 设计了一套UI 空间, 通过该空间可以方便组织UI, 该逻辑包含anchord, pivot 等概念
  2. 在具体实现中,通过将RectTransform 转换为transform ,复用并实现UI 具体显示的功能。我们知道transform 只包含点的概念,但可以旋转,有父子节点转换等功能,通过将参数转换为具体的localPosition, 实现了这些功能。其效果类似于不同的空间变换。

为什么理解起来困难?
因为UGUI 对用户的操作部分为了易用性,又隐藏了一些很重要的细节, 下面是包含部分的

包含哪些部分

具体功能 描述 定位 读写
Anchor 描点 直接使用 读写
Pivot 轴心 直接使用 读写
anchoredPosition Pivot 的位置 隐藏在代码中 读写
sizeDelta 对高宽进行调整 隐藏在代码中 读写
rect 当前节点所表示的区域 隐藏在代码中
Anchor Reference Point 描点参考位置 缺失的重要概念
PosX, PosY UI位置 只是方便用户操作读
Left, Right, Top, Buttom 与描点对比的修正 只是方便用户操作
Width 只是方便用户操作
Height高 只是方便用户操作

其实整个RectTransform 的概念数据是靠上面的几个读写功能实现的,下面对每个部分进行详细解释。 上面读写的数据都是RectTransform 存储的核心数据, 其他数据都是在这基础之上可计算获得。 可以看到整个RectTransform 的核心是围绕Anchor与Pivot展开,Anchor与Pivot都是将UI 的 RECT 归一化为 [0-1] , 方便做UI 的编辑

Anchord

锚点 AnchordMin于AnchorMax其值是可以表示为一个RECT组成的区域。 UI都是以 RECT 来组织的,Anchord 描述了在父节点中将UI 看成[0,0,1,1] 组成的矩形区域,在其之上进行锚定,锚定的结果也是一个RECT (PS. RECT 内容可以看成[minx,minY, Width, Height])

Pivot

轴心, 其值是一个点,表示该图像的起始位置(0,0)点和旋转轴 也是以 [0, 1] 组成

Anchor Reference Point

描点参考位置, 来源在Unity 的文档中。
实际是Anchor 锚定的矩形区域的中心点, 这个没有在代码里直接标识出来,实际在文档里是有这个概念。
当Anchord 中的Anchord Min 与 Anchord Max 一致的时候, Anchor Reference Point 指向的就是Anchord Min那个点。 当Anchord Min 与 Anchord Max 两个点组成了一个矩形区域,Anchor Reference Point 指的就是这个矩形区域的中心点

sizeDelta

对由Anchor 框出的矩形进行偏移, width 与height 就是依据该值来进行调整

anchoredPosition

说的是Pivot的像素位置, 一个相对于 anchor reference point 所在的位置
原文:
The position of the pivot of this RectTransform relative to the anchor reference point.

localPosition

localPosition就是pivot在transform中的位置
再根据上面anchoredPosition的解释可以知道
Pivot 的在UI父节点中的位置, 是 Anchor Reference Point + anchoredPosition
所以 anchoredPosition于localPosition 都是描述Pivot的位置,只是参考点不同。

获得公式
localPosition = Anchor Reference Point + anchoredPosition
= (Anchor - Parent Pivot) * (parent Width, parent Height) + anchoredPosition

其中关键是
Anchor Reference Point 的计算 = (Anchor - Parent Pivot) * (parent Width, parent Height)
是为什么?

分析:
Parent Pivot 是父节点在矩形区域中的起点, 矩形是以(0,0, 1,1)定义的矩形区域
Anchor 的描述的也是父矩形区域的位置
他们都是同一个坐标系统:父节点所描绘的一个矩形区域.

那么Anchor 相对于Parent Pivot 的偏移量就是 Anchor – Parent Pivot
得到的就是 Anchor Reference Point 以父节点得描述的UI 空间。
然后乘以 父节点的 宽高, 就得到实际像素位置。
知道了这一切,localPosition的计算就很容易了

Rect

描述的是RECT区域在当前UI坐标系下的区域。

只和本UI的Width, Height , Pivot 相关.

总结公式

localPosition = (Anchor - Parent Pivot) * (parent Width, parent Height) + anchorPosition

rect = (– PivotX *Width, PivotY *Height, Width, Height)
(minx, miny, width, height)

Rect in parent = rect + localPosition

验证

计算localPosition

Parent
Pivot = (0.5 , 0) , sizeDelta = (200, 100)

Local
Anchord = 0.5, 1
Pivot = 0, 0
AnchordedPosition = 0,0

localPosition = ((0.5, 1) – (0.5,0))* (200, 100) + 0,0
= (0,1) * (200, 100) + 0,0
= (0, 100) + 0,0
实际是 x=0, y=100,z=0

总结

anchordPosition对于UGUI是什么?
localPosition 对于UGUI是什么?
andhordPosition 的关系是什么?

localPosition = Anchor Reference Point + anchordPosition
anchordPosition 是相对于参考点 Anchor Reference Point 的偏移
localPosition 是相对于父节点 0,0点的偏移.

localPosition与anchoredPosition 都是描述pivot的位置信息。
只是使用的坐标系不同,localPosition使用的父节点坐标系,anchoredPosition是用的是UI设计参考的坐标。

localPosition于anchoredPosition互相转换的伪代码如下

       Vector3 AnchordToLocalPosition(Vector2 pos)
        {
            if (_parentRectTransform != null)
            {
                // 计算参考点相对于 父节点的位置
                var anchorPos = (anchorReferencePoint - _parentRectTransform.pivot);
                
                // 转换为像素
                anchorPos *= _parentRectTransform.size;
                   
                
                return anchorPos + pos;
            }

            return Vector3.zero;
        }

        // 通过transform 相对坐标计算anchordPosition 位置
        Vector2 LocalPositionToAnchord(Vector3 pos)
        {
            if (_anchoredPosition != null)
            {
                var anchorPos = (anchorReferencePoint - _parentRectTransform.pivot);
                anchorPos *= _parentRectTransform.size;

                return ((Vector2)pos - anchorPos);
            }

            return Vector2.zero;
        }
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,270评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,489评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,630评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,906评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,928评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,718评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,442评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,345评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,802评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,984评论 3 337
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,117评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,810评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,462评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,011评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,139评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,377评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,060评论 2 355

推荐阅读更多精彩内容

  • RectTransform属性一览 前言 最近要做UI,有时候需要在代码中调整改变UI控件的属性,比如位置、大小等...
    胡萝卜啊啊啊阅读 1,332评论 0 2
  • 一、Unity简介 1. Unity界面 Shift + Space : 放大界面 Scene界面按钮渲染模式2D...
    MYves阅读 8,211评论 0 22
  • Rect Transform layout系统足够灵活,可以处理许多不同类型的布局,还允许以完全自由的方式放置元素...
    胡萝卜啊啊啊阅读 5,070评论 1 1
  • 看Unity3D文档像看国内教课书一样,一些概念,不懂的时候看还是不懂,明白了以后再看,好像也没有说错。好几个做U...
    xClouder阅读 16,669评论 0 20
  • 前言 最近一段时间的实习都是苦逼的在做ui,做移动端的,适配是永恒的话题,庆幸的是unity提供了一套强大的接口让...
    巨龙饿了阅读 66,154评论 20 139