细说UGUI中Anchor和Pivot(一)

背景

相信刚接触UGUI的时候,这套新系统中RectTransform里的position,anchor,pivot一定让大家有点迷糊不适应吧。因此就想详细介绍一下这几个概念,之所以标题中没有提position,是因为主要还是以介绍Anchor和Pivot为主,position会带过介绍

概念

锚点Anchor

Anchor就是一个RectTransform相对于其父节点在父节点中固定的几个参考点。可能我的表述还不是很到位。所以分成几点来说明

  1. 父节点
    锚点在从属结构上,是属于子RectTransform对象,是其中的一种属性,但是其取值范围是位于父节点的,也就是说,整个父节点的Rect的范围,都是anchor的取值范围(在编辑器中拖动锚点可以直观的看到)

  2. 固定的参考点
    锚点是一种定位的参考点,子对象以锚点为参考点,并相对于锚点进行定位。而锚点一旦设定,其位置相对与父节点是固定的,因此,子对象也就能相对于父节点进行定位了

  3. 值范围
    锚点取值在[0,1]之间,是一个比例值,这个比例值,是以父节点的width,和height来进行比例计算的,比如其值为1的话,是指父节点Rect的width的最远点,或是height的最高点

我们可以这样理解,假设我们将Rect中心点作为一个参考点,锚点代表了Rect自身相对于父节点的位置

轴点Pivot

轴点是Rect的实际中心点,和Rect尺寸中心点不同。尺寸中心点是以宽,高取1/2得到。而轴点是可以任意指定的,如果将Rect旋转,可以看到Rect是围绕轴点旋转,而不是中心点。轴点是范围也是[0,1]的比例值。轴点是属于Rect自身的。

我们这样理解,假设我们将Rect中心点来作为一个参考点的话,轴点代表了Rect相对于自身的偏移

anchoredPosition

当4个锚点三角合拢在一起的时候,锚点位置就是此时4点合拢的位置。而当4个锚点三角分开的时候,锚点用来计算anchoredPosition的位置是有4个锚点位置分别和轴点做插值计算,unity文档是这么说,我个人理解应该是将anchor的min,max经过关于轴点的插值结算,来得到一个新的点,这个新的点和pivot之间的相对距离就是anchoredPosition。

从上面轴点和锚点的概念介绍,在结合anchoredPosition的概念,我们就可以知道anchoredPosition的相对距离,实际上就表明了子Rect以Pivot为原点时,相对于父节点的偏移。在计算子节点的位置偏移时,永远是拿轴点而不是中心点来作为参考点的

子Rect的位置计算

(一)我们先假设父Rect,子Rect的轴点都在中心(0.5,0.5)的位置,4个锚点也在这个位置合拢。此时,子Rect相对于于父Rect的偏移是(0,0)。如果此时,仅仅是子Rect的轴点发生偏移,那么子Rect当前的偏移就是

offset_p = 轴点偏移

(二)继续上一步,如果此时锚点发生了变动(假设锚点还在一起,只是离开了中心位置),那么此时,Rect当前偏移就是

offset_a = offset_p + 锚点偏移
这里的锚点偏移就是anchoredPosition,这也是为什么设置该值可以改变RectTransform的位置的原因

如果锚点没有在一起,实际上只是多了一步,计算一个关于Pivot点插值的虚拟的点来代替锚点位置来做偏移计算。

(三)我们继续,假如此前两步都是在父Rect在世界坐标原点时候完成,那么如果现在父节点相对与世界坐标原点偏移了,那么Rect当前相对于世界坐标原点的偏移就是

offset = offset_a + 世界坐标偏移

今天先写到这里,老实说这个东西写清楚似乎要比理解清楚更难,我得整理整理思路,待续

  • 5
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值